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
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/
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/
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/
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/
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/
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/
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/
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/
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/
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’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/
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/
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/
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/
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!