5 Surprisingly Great Examples of Responsive Websites

Ethan Marcotte wrote the book (literally) on responsive design in 2010. Ethan wrote that:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things”.

Ethan was involved in project for the 2011 Boston Globe redesign, which was the first big site to adopt a responsive approach. But 2012 was the year where responsive design hit the mainstream. Here are 5 great examples of responsive websites, from companies you might not expect.

Microsoft.com. Yes, Microsoft. The same company who brought us Internet Explorer 6 has a beautifully designed responsive website. The site looks glorious across all the common screen sizes (called breakpoints in the responsive design world). What makes Microsoft’s site especially nice is the widescreen design. The main hero image is 1600 pixels wide, much wider than most designers would have used in the past. Kudos for Microsoft for one of my favorite responsive redesigns in 2012.

General Electric. GE was founded in 1892 through a merger of Edison General Electric and the Thompson-Houston Electric Company, and has become of America’s best and most successful companies. GE recently launched a new, responsive design that looks great on desktops, tablets, and smartphones. GE also used a long page design, which nicely highlights the GE story and humanizes the brand.

Disney.com. Moving a site with the complexity of Disney to a responsive design must have been quite a challenge. The end result was worth the investment, as the new disney.com looks fantastic - highlighting the rich, vivid imagery of the Disney universe. They’ve also integrated a slick video player directly inside of the responsive design, which sales up and down automatically.

State Governments of Alabama, California, Maine, North Carolina, and Rhode Island. It’s great to see the public sector embrace the digital transformation and start thinking about mobile first. Responsive design is even making its way to the upper echelons of government. Governor Paul LaPage of Maine is thrilled with his state’s new responsive design, “Combining innovative design with user-friendly navigation, Maine.gov is a site for the people. It provides transparency and efficiency.” Really hoping to see more state and local governments embrace mobile and the importance of design in 2013.

Starbucks. It’s not surprising that Starbucks would implement a responsive design however, it is surprising, and cool, that they published their style guide online. The Starbucks style guide defines their responsive grid framework, regions, blocks, and more with great examples of each. If you’re a web developer thinking about responsive design, then you should definitely take a look at Starbuck’s site and style guide.

So those are five surprisingly great examples of responsive design. Let me know about your favorite sites in the comments. And to learn more about doing responsive design with Drupal, take a look at one of our on-demand webinars.