Responsive Web Design – Case Studies in the Wild

Throughout the course of our Responsive Web Design (RWD) blog series, we have been talking a lot about the what and why of RWD. We have also looked at some processes and workflows, including paper prototyping and guerrilla user testing. So we thought it was time to take a look at some case studies and examples of real live websites that are designed responsively. This is an exciting time as some big enterprise companies have taken on the challenging task of creating responsive sites. In this post we are going to survey some of the inspiring and exciting examples out there.

Boston Globe

In 2011, the Boston Globe teamed up with Upstatement. the Filament Group and grand-daddy of responsive design Ethan Marcotte, to build an HTML5 responsive Boston Globe site. The team worked to ensure news layouts would not be dictated by the homepage layout, but rather that the homepage layout could adapt in a way that best displays the content. The Boston Globe’s quality journalism moved forward into the multi-device, digital world with graceful ease, thanks to this responsive redesign.

Starbucks

In 2012 Starbucks redesigned their site to be responsive. They were one of the first big retailers to take this step.  The announcement on their blog points to analytics around the types of devices people were using to access as the impetus for the redesign. The growth in mobile and tablet traffic is of course one of the core reasons to consider implementing a responsive site. A very interesting aspect of this redesign was that Starbucks published their responsive style guide online. The style guide explains the grid frame work, various layout options, and site components with  instructions, code samples and illustrations. It is a really comprehensive guide and a fantastic resource.

Gov.uk

The recent UK government website redesign has our digital hearts all a-flutter at Usability Matters! The redesigned gov.uk site is the winner of the 2013 Design of the Year Award from the UK Design Museum. The huge growth in traffic from mobile devices has meant that governments everywhere have needed to create a robust mobile strategy, and in the UK responsive design is the winner: “When it comes to mobile, we’re backing open web standards (HTML5). We’re confident that for government services, the mobile web is a winner, both from a user and cost perspective.” The project has a fantastic set of design principles which we highly recommend exploring, and can be spotted hanging up around our office! The purpose of the site is to help you find information quickly, and showcases well-thought out content and structure.

Telus

An ongoing and exciting responsive project is the redesign of Telus.com. A beta version of the new site is live and allows the team to gather input from real users, enabling a truly iterative process. The mobile site got off the ground in only 4 months, with updates almost every week. Telus created an internal digital lab of key people from the company and partnering digital enterprises to enable a lean process “built on a foundation of consumer feedback.” It is very exciting and inspiring to see a big enterprise company like Telus take on the challenge of designing responsively, in an iterative way, showing their designs to the real world at prototype stage!

So there you have it, some ground-breaking and inspiring case studies of responsive design out in the real world. If you would like to read more about our approach to responsive design at Usability Matters, check out this case study of our work with Sportsnet! Till next time, stay responsive!

 

image credit: http://ryanswarts.com/responsive/plain/