Accueil / Blog / 5 Surprisingly Great Examples of Responsive Websites

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. 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. 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 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, 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.

Watch a recorded webinar about building a responsive website with Drupal


Posted on by bvdputte (non vérifié).

I wouldn't call a responsive site. The home page is well done, agreed. But nothing else is.

Posted on by Tom Wentworth.

Fair enough, but the home page is beautiful and hey, it's Microsoft :)

Posted on by Anonymous (non vérifié).

beautiful? i don't think so=)

Posted on by amit verma (non vérifié).

Good examples, but may i know exact benefits of having this kind of design for any website? And what are the limitations and constraints?

Posted on by Lily Davidson (non vérifié).

I don't know about Microsoft, all I know is that anyone can do their own Responsive Websites nowadays. Just do some extensive research and watch helpful tutorials like this one that my friend made on youtube om/watch?v=KAPGp61XY6c

Posted on by AShwini (non vérifié).

leaving home page nothing is proper

Posted on by Timo Kirkkala.

Disney fails quite badly by force-redirecting to geographically local website without even giving an option to switch back to requested That is, me living in Finland and trying to access without proxy I can only see - which is not that appealing experience. Or at least it is far from a fantastic RWD website.

Posted on by Aidan Dsouza (non vérifié).

These are good examples of responsive websites, but there are numerous websites available which are having surprisingly good respoinsiveness. Today I had went through such couple of sites like m/ & . You should also consider them

Ajouter un commentaire

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • Pour publier des morceaux de code, entourez-les avec les balises <code>...</code>. Pour du PHP, utilisez. <?php ... ?>, ce qui va colorier le code en fonction de sa syntaxe.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
By submitting this form, you accept the Mollom privacy policy.