Sep 26 2012

16 Impressive Responsive Designs that You Can Learn From

responsive

It seems the term ‘responsive’ is on every Web designer’s lips these days, and why shouldn’t it be? Building a beautiful, effective website is difficult enough, let alone having to muddle through using WAP and mediaqueries to serve up multiple versions for each type of device. It’s not hard to see the attractiveness of deploying a single site that caters to all devices simultaneously – not least due to the ease of keeping all the content in sync.

We’re committing to the responsive movement in a big way here at digital-telepathy (our biggest undertaking in this realm so far has been updating SlideDeck, our WordPress content slider plugin, to be responsive), and we’ve encountered tons of inspirational examples all around the Web, so it’s about time we shared some of the sites out there that get our responsive juices flowing.

The 16 best examples of responsive design on the Web today

Stink Digital
We love the long-scrolling page style that’s getting popular these days, so it’s nice to see Stink Digital making great use of it, as well as going the extra step to progressively simplify the navigational elements as the resolution decreases. In addition, we love the subtle use of buttery-smooth parallax scrolling effects to seamlessly change the title of each section being viewed.

Check it out: http://www.stinkdigital.com/

Japi Blog
This lively blog design offers several progressive states as the edges of the browser start to close in. Notice how, rather than simply shove the sidebars under the post content from right-to-left, Jane Morgan’s bio section actually flips over to the right – it’s a more important piece of content than the table of contents, so it gets prioritized in the scheme of how the layout adjusts itself. This is a great example of the designer/developer remaining thoughtful about ensuring the best user experience across all devices, instead of simply accommodating them.

Check it out (likely NSFW, unless you’re design nerds like us): http://blog.japijane.cl/

Heroku Status
This wonderful design starts out with a clean timeline diagram that gradually simplifies down to a beautiful and minimalistic list view that fits neatly in your palm. The best thing is that nothing is sacrificed here – no elements disappear except the timeline itself, so the page remains 100% informative across all devices.

Check it out: https://status.heroku.com/

Treehouse Blog
The responsiveness of this blog is pretty standard – that is, until you notice that the categories navigation and search bar at the top get seamlessly replaced by a snappy, touch-optimized pair of icons. And then it becomes awesome.

Check it out: http://blog.teamtreehouse.com/

Fiafo
Subtle, but comforting refinements abound in this beautifully responsive layout – from the thumbnails of the secondary stories in the top nav, and the handy little “back to top” tab anchored in the footer, everything in this layout tunes itself for a pleasurable experience no matter how you’re viewing it. A great reminder that responsive doesn’t automatically mean shoving the sidebar to the bottom – it’s optimizing the layout for the user, regardless of what that requires.

Check it out: http://www.fiafo.com/

Bronco
When it comes to the sheer number of responsive elements present on one page, few homepages match Bronco’s entry. Virtually every element on the page dances in a tight choreography as the browser window changes size, and each of the potential layouts is finely tuned for an optimal experience.

Check it out: http://www.bronco.co.uk/

Travel Oregon
Where to begin with this one? The illustrated style is a definite departure from the vast majority of clean, geometric responsive sites out there – likely because illustrations are more difficult to scale smoothly. This hasn’t stopped Travel Oregon from taking on the challenge, and we heartily applaud them for it. Browsing this site across multiple devices is almost encouraged, with certain illustrations, images and elements simply not appearing when going from one resolution to the other. A ton of thought and effort went into this one, and it’s a memorable experience as a result.

Check it out: http://traveloregon.com/

Dress Responsively
This delightfully meta site walks the walk by offering a progressively simplified browsing experience for their tshirts that espouse, erm, progressively simplified browsing experiences…

Check it out: http://dressresponsively.com/

Shiny Demos
Opera’s web standards sandbox offers a lovely retro experience that makes full use of the extra width of a desktop-sized screen, while still offering a pleasing layout in smaller resolutions.

Check it out: http://shinydemos.com/

DivShot
A nice, clean layout with an animated demo that gracefully falls away to a simple video hero section. Of special note is the masonry-style Tweets section, that gradually collapses to a single column as the screen width requires.

Check it out: http://divshot.com/

Ethan Marcotte
Ethan’s personal site offers a stylish, refined look, which is preserved across all resolutions – but what really stands out is how he’s treated the thumbnails of his selected portfolio work: instead of simply scaling down the images to fit, thereby losing the detail that’s visible to the viewer, Ethan has instead opted to crop the amount of the image that’s visible at any given size. This means that the user is still able to see the finer details in each example of his work, regardless of the device they’re using. It’s a subtle decision that makes all the difference to the viewer, and yet is likely not noticed by anyone. Except for us.

Check it out: http://ethanmarcotte.com/

Forefathers
There’s lots to like about the responsive qualities of this old-timey site, from the different graphical elements that gradually disappear as the available space decreases, to the responsive content slider that maintains its functionality at all sizes.

Check it out: http://forefathersgroup.com/

Diablo Media
This nicely-done long-scrolling page design uses pays attention to detail in its typography – beyond a certain screen size, the headlines will switch to a more readable font for lower resolutions. Also of note is that virtually every element of the page is preserved, for a truly uniform experience across all devices.

Check it out: http://diablomedia.com/

Food Sense
A couple of distinct decisions make the Food Sense site an interesting example of responsive web design. First, the content slider scales down to a certain point, beyond which the slider navigation elements actually disappear, leaving the slide itself to remain as a kind of animated banner. It’s debatable as to the merits of this approach, but it does remove a tricky UI element that wouldn’t be as usable at a small screen size, so it shows thoughtfulness in the approach. In addition, the global navigation makes a dramatic shift from the left-hand sidebar up to the top of the screen once we hit tablet/medium resolution.

Check it out: http://foodsense.is/

More Hazards More Heros
This intriguing band site is notable for its drastic, but logical take towards simplifying its experience for the user. The full, desktop-sized site contains pics of the band, and full lyrics listings for each song on the album. Size it down, however, and boom – gone are the lyrics, pictures, illustrations and all the unnecessary fluff, leaving you with just a music player, a logo, and a button to download the wonderful songs you’re enjoying.

Check it out: http://morehazards.com/

Hicksdesign
Much like the Japi Blog example above, this site displays a very deliberate and intentional order in which different content elements are prioritized, and eventually discarded, as the screen resolution dictates.

Check it out: http://hicksdesign.co.uk/

What do you think? See any responsive techniques in this list that you think should be more widely adopted? Let us know in the comments!

About the Author:

Marketing strategist, designer, WordPress-er, fascinated singulatarian, sci-fi lover & improv comedian, with a dash of UK panache. Thinker/doer. Friend to startups. Enemy of bananas. I'm also the Director of Products at digital-telepathy. Join/find me on Google+ and Twitter.

Leave a Response

18 Responses

  1. Sep 26 2012
    Bennie Mosher

    I love the collection. All these sites are amazing. Does anyone know of a tutorial somewhere that helps us understand this tag:

    • Sep 27 2012
      Jamie Hamel-Smith

      Hey Bennie, your tag got stripped out. What tag was it? (in plain language).

  2. Sep 26 2012
    Jamie

    Love these. It’s great to see more sites focusing on the mobile experience.

    • Sep 27 2012
      Jamie Hamel-Smith

      I don’t know… I still think there’s something to be said for an experience that’s tailored to the device (or device size).

    • Sep 28 2012
      Daniel Spronk

      Good examples and a neat list… they all have great design too.
      One thing that does bother me is that in some examples the navigation is placed vertically for the smallest width. The navigation then claims the whole screen on a device with a small screen (like an iPhone). The way the screenshots are taken above (looks beautiful btw), more vertical space is shown than most mobile devices will see.

      Replacing navigation items with touch-optimized icons or using the Off-Canvas pattern seems a way to better accommodate the principle ‘Content First, Navigation Second’.

      Horizontal navigations work OK, but very dependent on the number of items in your navigation.

  3. Sep 26 2012
    eflynnbot

    What’s interesting is that I’m yet to see someone take narrative experience and make it responsive. All the sites are hyper functional and pragmatic. They show product or services and let you sign up for whatever but none really tell a story in an interesting way.

  4. Sep 27 2012
    Michael Vermaak

    There are some great examples above. Another site worth checking out for responsive design is http://simpleasmilk.co.uk Great work form the awesome guys here in the UK.

    • Sep 27 2012
      Jamie Hamel-Smith

      Hey Michael,
      The Simple as Milk example is really slick. They have astonishingly clean source code and are making very good use of Lettering.js for their heading text. Awesome example! Thanks for sharing.

  5. Sep 28 2012
    jshen

    I would add http://video.disney.com/ to this list. Not only is it a beautiful responsive design, but the video player is responsive as well.

  6. Oct 03 2012
    web design

    I love the collection

  7. Oct 04 2012
    Adam Johnson

    wow :)
    jason amunwa I love your collection

  8. Oct 10 2012
    Frank de Jong

    (btw. As of last week, microsoft.com is also completely responsive). I’m currently working on a responsive webdesign project for philips.com, but somehow I’m still not sold on the whole responsive concept. Instead of defining layout, you now define behaviour of your layout… the experience is simply less tailored to your device.

  9. Oct 23 2012
    Ann

    Great examples. I really enjoy your “breakdown” as well, simple and straight to the point

  10. Nov 05 2012
    Baytech Web Design

    Great effective responsive designs….shiny demos part is awesome…It will really help me for my upcoming website design…Thanks for this post and please regularly update this type of informative post.

  11. Dec 15 2012
    graphic design company beijing

    These responsive designs can be both advantageous as well as frustrating to use in various environments. But all though, they are really just amazing.