December 3, 2012

Website Examples that Use Responsive Web Design

We found some great sites that utilize Responsive Web Design in one way or another. Take a moment to check out the examples below. Here’s a hint: adjust your browser size or change devices to test various user experiences.

SmashBrand (www.smashbrand.com)

Hey, look, our website is on the list! No surprise there. We’re big fans of Responsive Web Design.  Our content automatically adapts to smaller media (i.e. tablets and phones) so that you can easily navigate the site, regardless of browser size. You can see a quick example in the images and above and below.  Now on to the next…..

About.com (www.about.com)

Ok, I know this is sort of a cop-out from our previous article on responsive web deisign. We already used this example in that article. With that being said, we really do love this example. Why? Because About.com reaches approximately 69 million unique visitors per month (that’s a lot, by the way), so they know that visitors will be viewing the site from a multitude of devices. About.com has been designed so that it responds and adapts to a viewer’s behavior and screen size. Based on your browser size, screen resolution and orientation (i.e. portrait vs landscape), About.com automatically resizes and re-orders the design; as well as adapts images, text and columns.

Clear Air Works (www.cleanairchallenge.com)

Take a deep breath and say “Ahhhhh.” Clean Air Works gives Charlotte, NC commuters information on a green commute; information that looks great on any device size. This website is perfect for commuters who are viewing the website on their mobile phones while they wait for the train or bus in the morning.

Microsoft (www.microsoft.com)

Yes, you read this right, we said Microsoft. After gaining design momentum from the Windows Phone and mobile-friendly Windows 8, Microsoft is one of the first big tech companies to embrace responsive web design for its consumer and business sites. Microsoft.com easily reconfigures itself, on the fly, to a number of devices–large and small. For more information on Microsoft.com’s redesign, check out this article from Forbes.

Starbucks (www.starbucks.com)

Starbucks doesn’t just serve up delicious peppermint-chocolate mochas and scrumptious breakfast sandwiches. Starbucks.com is another major website that has been redesigned for multi-device responsiveness. Check out this announcement on the site.

W3C (www.w3.org)

No surprise here… the W3 is practicing what it preaches.  If you don’t know what W3C is, they are a group that developers web standards.  W3C’s standards define key parts of what makes the World Wide Web work.

And many more…

There are many more websites that have jumped on the Responsive Web Design bandwagon. Just do a search for “best responsive web sites” on your favorite search engine. We also recommend this great article from the Google Webmaster blog. It describes all the ways that Google has implemented Responsive Web Design on its sites.

[notification style=”tip” font_size=”12px” closeable=”false”] If you have a great example of a website that is using responsive design just mention it in the comments below. If we think its awesome we will add it to the article. [/notification]

by Kevin Smith
Kevin’s creativity and 15+ years experience, including four of his own successful consumer brands allow him to solve complex problems and create fresh ideas that leave others thinking “I wish I’d done that."

Let's work together.

Tell us a little about your project, and we'll be in touch right away.

Your Details

Don't worry, this is for our eyes only, but we want to be able to reach out to you and chat.


Your Project

It's okay if you are unsure, but this helps us determine if we are a good fit. Our fixed price proposals are based on the estimated number of hours for us to complete a project, so understanding your constraints allows us to propose a win-win scenario.

What type of Project are you enquiring about?

What is your budget? $40 - 80k

What is your timeline 4 - 10 Weeks +

Upload files

Drag, drop, or click. Any files you have that might help us understand your project are welcome and encouraged.

Got a Project brief or any additional files you would like to send?

Prepare for a quick response!