RWD Inspiration – fun effects on mobile and desktop

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.

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

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

A List Apart Example RWD Page

Andersson-Wise

Andersson-Wise

Design Week Portland

Design Week Portland

Snohomish Aquatic Center

Snohomish Aquatic Center

Mr. Simon Collison

Mr. Simon Collison

About Family Crafts

About Family Crafts

Food Sense

Food Sense

Internet Images

Internet Images

BBC News

BBC News

City of Snohomish Washington

City of Snohomish Washington