Startseite / 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.

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.

Watch a recorded webinar about building a responsive website with Drupal

Kommentare

Posted on by bvdputte (nicht überprüft).

I wouldn't call microsoft.com 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 (nicht überprüft).

beautiful? i don't think so=)

Posted on by amit verma (nicht überprüft).

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 (nicht überprüft).

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 http://www.youtube.c om/watch?v=KAPGp61XY6c

Posted on by AShwini (nicht überprüft).

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 disney.com. That is, me living in Finland and trying to access www.disney.com without proxy I can only see www.disney.fi - which is not that appealing experience. Or at least it is far from a fantastic RWD website.

Posted on by Aidan Dsouza (nicht überprüft).

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 http://www.sbr-technologies.co m/ & http://www.dadaabstories.org/ . You should also consider them

Neuen Kommentar schreiben

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

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.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
By submitting this form, you accept the Mollom privacy policy.