20 Best Responsive Web Design Examples of 2012

Posted: July 10th, 2012

This is the third post in a series about Responsive Web Design, described in plain language from a front end designer.

Ok, so we’ve discussed why responsive web design is an excellent solution for our websites. Then we dug a little deeper into how it actually works. Today we want to share our 20 favorite responsively designed websites and why we think they’re so great.

The Boston Globe

Boston Globe Best Responsive Web Design
The largest responsive website to date, The Boston Globe handles loads of content effortlessly, keeping the site intuitive and the content easily accessible on the device of your choice.

Do you consider yourself an awesome developer?

You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!

thomas sanchez thrashing

Smashing Magazine

Smashing Magazine Best Responsive Web Design
I love this site. I really do. Smashing takes advantage of horizontal screen real estate like few responsive sites do. Go ahead expand your browser window out as far as your screen allows and it just maximizes the space without feeling cluttered. Furthermore, the strength of the layout and menu structure does not degrade at smaller screen sizes. Nicely done.

Food Sense

Food Sense Best Responsive Web Design
Clean layout, beautiful photography and playful iconography made me like this site immediately on my first visit. It’s a joy to look at and navigate on any device and if you’re a foody looking for scrumptious, healthy recipes it may be love at first site.

Andersson Wise

Anderson Wise Best Responsive Web Design
Type designer, Jan Tschichold once said, ‘Simplicity of form is never a poverty, it is a great virtue.’ The simple layout and understated menu and graphic elements juxtaposed against beautiful fluid images communicate that excellence in form and function are givens when working with this architecture studio. This site just says ‘good design’ whether I’m viewing it on my iPhone or my iMac.

Sphero

Sphero Best Responsive Web Design
If you haven’t check out Sphero, you should. It’s an amazing robotic ball gaming system for IOS and Android devices. But I’m not reviewing their product, just there site. A recent web design trend is the use of background photos that flood the browser window. Sphero does this well. The abstract product photos with a grid overlay don’t distract from the important content. I like the permanent menu and footer bars on my desktop, but appreciate how the footer moves to make room for more important content on my iPhone. Overall, the site is intuitive and attractive. An excellent example that responsive design done well looks great on any size screen.

CSS Tricks

CSS Tricks Best Responsive Web Design
It might be the conspicuous green frog that causes me love this site. Either way, it’s worth resizing your browser window just to see him change size, shape and color. But seriously, this is a polished responsive site. The breakpoints correspond well with the layout requirements and the result is a sharp looking site that does not degrade at any size. The main menu always looks good even when those sweet little icons go away to make room on smaller screens.

Grey Goose

Grey Goose Best Responsive Web Design
The Grey Goose site shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds. The sky is still the limit with what we can do responsively. Beautiful photography, parallax scrolling, intuitive navigation and refined typography combine to create a site that is as equally functional and attractive on my smart iPhone as it is my iMac. This list is not in order of our preference, but if it was I think Grey Goose would be at the top.

New Adventures In Web Design

New Adventures Best Responsive Web Design
With a name like “New Adventures In Web Design,” one would expect a responsive site for this web design conference. I think my favorite aspect of this site is the use of fluid typography. Notice how the menu, headline and body text resize subtly to achieve optimal legibility on all devices. Good design is all about the details and this site has the details dialed in.

Lancaster University

Lancaster University Best Responsive Web Design
Websites in the higher education space are not necessarily known for being on the leading edge of design trends. So discovering the Lancaster site was a nice surprise. I appreciate its simple, modern, non-trendy look and feel. In spite of it’s large amount of content, it’s as easy to navigate on my iPhone as it is on my iMac.

Fundraise.com

Fundraise Best Responsive Web Design
The spacious layout, bold typography and simple icons make fundraise.com easy to look at and navigate.

Web Designer Wall

Web Designer Wall Best Responsive Web Design
Nick La’s blog is a wealth of information and resources for any designer or front end developer. But that’s not why it’s in our list. The great content is accompanied by subtle texture, beautiful illustration and–thanks to its responsive nature–is easily accessible no matter what device you fancy.

Heathlife

Heath Life Best Responsive Web Design
Heathlife celebrates the heritage of one of London’s largest parks. Though maybe not quite as stunning as the park itself, this website is a beauty on screens large and small.

London & Partners

London & Partners Best Responsive Web Design
Though this site is not fluid, it has well structured layouts for any device class. Where many large responsive websites omit content for smaller screen sizes, London & Partners keeps it all, maximizing accessibility for mobile users. This is a good reminder that responsive design is an excellent solution for large and small site alike.

Oliver Russell

Oliver Russell Best Responsive Web Design
Oliver Russell has done a good job of building a site that responds well on mobile devices while keeping the integrity of the design in tact. I appreciate the shallow and straight forward content structure. My eyes are drawn to the most important sales points and I can access nearly all that I want to know without leaving the homepage. Refreshingly simple compared to the laborious, text heavy website of other marketing firms. One complaint: I would like to see the site expand beyond width of 960 pixels on larger monitors.

Ryan O’Rourke

Ryan O'Rourke Best Responsive Web Design
Ryan is product designer at Facebook, but has invested in a personal portfolio site that is a cut above the norm. Well branded and brilliantly responsive, Ryan’s site is a thing of beauty on any screen.

Jessica Hische

Jessica Hische Best Responsive Web Design
Jessica’s lettering and illustration rocks and so does her site. Seriously, I can’t help but smile when I look at it. It is simple and elegant and delightfully fluid. Oh, and for good measure she through in three additional themes. One of which is “Teen Girl Mode”, replete with rediculously distracting animated gifs and a hideous cat illustration (Just click on the little heart in the upper right corner).

Fork

Fork Best Responsive Web Design
Maybe it’s the friendly King Trident mascot, but this happy little site makes me want to download the Fork cms straightaway, or at least “try the demo”. To increase mobile load times the CSS omits the fun header illustrations at smaller sizes. Overall, site reformats and displays nicely on a variety of display ports.

Ethan Marcotte

Ethan Marcotte Best Responsive Web Design
Ethan coined the phrase, ‘Responsive Web Design’ in 2010, so it comes without surprise that his website is responsive. Ethan’s belief in articulate and intelligent design is expressed in a site that is straight and to the point without extraneous decoration.

United Pixel Workers

United Pixel Workers Best Responsive Web Design
This t-shirt shop site stretches and shrinks to fill any size view port with photos of their hip graphic t’s. Fluid images and type make this site a joy to browse on any size device. One complaint: I think the menu could be smaller for use on smartphones. Currently it takes up an unnecessary amount of valuable screen space on my iPhone.

Trent Walton

Trent Walton Best Responsive Web Design
Trent’s site is an excellent example of fluid type. On a large monitor the text size is slightly bigger for increased readability, whereas the text shrinks to achieve comfortable line lengths and legibility on my iPhone. I also really like the simple block print style illustrations Trent includes in his articles.

Related Posts Plugin for WordPress, Blogger...
By: admin

Social Driver logo

Hit Your Biggest Goals

You can launch game-changing websites, apps, and social media campaigns. Use innovative tactics such as hackathons, agile, open source, crowd sourcing to work on high impact, fast-moving projects. LEARN
Create a Pop-Up Innovation Lab

Questions?
Say hello online >


Or just pick up the phone:
1-866-395-7845