RWD Inspiration - fun effects on mobile and desktop

Sun, 19 Oct 2014 17:35:35 +0000

I love seeing web designers doing fun and interesting things on their sites. But the ones that I really like are the ones that reflect the theme of the page or article. This is the kind of RWD inspiration I look for every day.

This is an article about lead poisoning which is a serious issue. But serious issues are hard to read, because who wants to read a depressing article? The Seattle Times web team decided to dress it up a bit with some fun features.

On the desktop version the pull quotes fully appear when you mouse over them and the headline gets completely revealed when the mouse runs over it. But I had the most fun on my iPad when I viewed this page. There, when you tap the screen fingerprints appear and slowly fade away.

[embed]http://html5in24hours.com/wp-content/uploads/2014/10/loaded-with-lead.mp4[/embed]

You may not think this is an example of responsive design, because the layout doesn’t change on the iPad from the desktop, but it is. This design responds to the fact that on an iPad, you are tapping the screen with your fingers—a mouse click wouldn’t make a fingerprint!

Inspiring Responsive Web Designs

Fri, 30 May 2014 23:25:06 +0000

There are so many inspiring sites out there and I love the responsive ones the best. Here are some great inspirational sites that I’ll be featuring in my responsive web design book. Check these out on your mobile phone, tablet, and desktop. Most of them have at least three breakpoints, and they all look good.

Possibly the First Responsive Web Page

Andersson-Wise

Design Week Portland

Snohomish Aquatic Center

Mr. Simon Collison

About Family Crafts

Food Sense

Internet Images

BBC News

City of Snohomish Washington

Comments:

Tom Hagerty - May 5, 2015

I just finished reading Responsive Web Design and am enthusiastic about getting to work making my two sites responsive. Your suggestion of using just two breakpoints with small, medium, and large makes me feel optimistic. If I had to use a dozen breakpoints I’d be overwhelmed. I hope I can do what I have to on Expression Web 4 since I’m used to the program. But maybe I’ll have to try some of the other editors you mentioned.

Jennifer Kyrnin - Jun 4, 2015

Good luck Tom! I hope that you can use your familiar editor. If you can edit the HTML and CSS code directly, then you should be able to.

RWD Inspiration on HTML5 in 24 Hours

RWD Inspiration - fun effects on mobile and desktop

Inspiring Responsive Web Designs

Comments: