Subscribe by E-mail

Your email:



Featured Author on Business 2 Community

B2B Marketing Zone

Marketing Technology for Growth

Current Articles | RSS Feed RSS Feed

10 Examples of Amazing Responsive Web Design

 

Responsive web design (RWD) is more than just a web design trend, it’s become a web design requirement. In order for your website to be properly experienced by every segment of your target audience, you need to design for the devices they use. This means creating websites that optimize for smartphones and tablets of nearly every size. A great RWD uses flexible images, fluid layouts and media queries to achieve a great design and user experience no matter how it is sized. Here are 10 great examples of RWD from across the web. When clicking through the sites, be sure to resize the windows to see how they respond! 

1. Starbucks 

When Starbucks marketers began to realize that many of their customers were accessing their website via mobile devices, they wasted no time in developing a responsive site. The website is now easy to navigate no matter how you access it and the sophisticated design perfectly embraces the Starbucks signature look.

Starbucks RWD

2. Microsoft  

The company went through a major rebranding last year and that included the launch of this clean, modern, responsive website. The minimalist design transforms beautifully across platforms and it is a perfect fit for a brand set on creating a product line of such diverse devices. 

Microsoft RWD3. Disney  

Kids love Disney and parents love keeping their kids busy with smartphones and tablets. It only seems natural that a website dedicated to the entertainment of children and parents should be easily accessed on handheld devices. This site is great because the big pictures and video aren’t sacrificed when the page is scaled down.

Disney RWD 4. Harvard University  

It’s great to see a traditional institution like Harvard embrace such a modern web design. Their responsive site is clean, easy to navigate, and fits well within the university’s brand asthetic.

Harvard RWD5. Time 

News sites often have a difficult time with responsive design due to the overwhelming amount of content to deal with. With some careful decisions regarding grids, Time managed to create a minimalistic website that is readable on all platforms. This is especially important for news sites that want to cater to their readers on-the-go. 

Time RWD

6. Smashing Magazine 

It's not an easy task to make a blog readable on even the smallest of devices, but Smashing Mag manages to pull it off. This website is very fun to resize because the designers have truly thought about the design grid at every single window size. The result is a beautiful, readable blog that doesn’t sacrifice any of the site’s original design. 

Smashing RWD

7. Mozilla

It’s a smart move for Mozilla to have a responsive website to advertise the responsive capabilities of their browser. Instead of just saying that their Firefox browser is fluid and responsive, they prove that they know what they’re talking about. 

Mozilla  RWD8. Food Sense 

This food blog was one of the first to incorporate a responsive design into their website. Even though its been a few years since it launched, the Food Sense website is still one of my favorite examples of beautiful responsive design.

Food Sense RWD

9.Barack Obama 

This website, built for the 2012 election, was built with the mobile user in mind. The responsive site was the perfect way to communicate with the tech-savvy younger generation that helped re-elect Obama for his second term.

Obama RWD

10. Crayola  

Here is a great example of how a lot of content and navigation can be scaled down on a mobile device. The full-width site has a ton of navigation tabs, but on a mobile device, only the important tabs are displayed while the main navigation disappears into a friendly accordion menu.  

Crayola RWD

11. Responsive Sausage Dog 

Just for fun! 

Sausage Dog RWD

Web design is all about creating a place for your audience to find and connect with your brand online. Because more and more people are accessing the web from their mobile devices, you need to make sure that the user experience on your site is seamless no matter what device is being used. Responsive web design is a great way to ensure that mobile optimization. 




Comments

Jacey...wonderful ideas here and I am very impressed with your work... 
I have just begin to peruse the site but first impressions, Synecore is lucky to have you! 
Wendy Hladick
Posted @ Tuesday, January 15, 2013 1:20 PM by Wendy Hladick
Thanks Wendy! Its great to get such positive feedback from you!
Posted @ Tuesday, January 15, 2013 3:57 PM by Jacey Gulden
My webmaster did it – our website http://www.bawdylanguage.com is responsive
Posted @ Tuesday, January 22, 2013 5:52 PM by Liz
A search function should always be included when you develop a site that is very large. Place a search box visibly on your homepage that helps your visitors search single terms that may appear anywhere on your site. You can get free search boxes from Google or FreeFind.
Posted @ Thursday, January 24, 2013 3:34 AM by Web design
Great job Liz, isn't responsive design fun?  
 
Thanks for the insight, Web design - I agree that it's important to include a search function for your users to navigate a large site. It's all about usability!!
Posted @ Thursday, January 24, 2013 12:06 PM by Jacey Gulden
Thanks for the examples, I think this one can be very useful for your readers too: http://responsivedeck.com
Posted @ Wednesday, February 06, 2013 4:46 AM by Sara Domini
Great resource Sara! Thanks for sharing!
Posted @ Wednesday, February 06, 2013 9:10 AM by Sean Royer
If I may, I'd suggest our own site as an addition to the other great examples presented here: http://www.brandsbyovo.com 
 
This is a modified implementation of Bootstrap on a WordPress CMS.
Posted @ Wednesday, February 06, 2013 11:27 PM by Kyle
Thank you so much for great article. I think Responsive website design might turn out as a great way to progressively enhance even small budget projects for mobile devices.
Posted @ Friday, March 08, 2013 5:58 AM by Tony Smith
I do agree with you. Responsive website design is the main attraction in 2013. It has solved the problem of the designer in great extent.
Posted @ Saturday, March 09, 2013 11:12 AM by Ram Kumar
Love Starbucks website. Never notice its responsive.
Posted @ Wednesday, March 13, 2013 5:26 AM by Atish
Great websites you have listed there. Those websites also have great website search function. I think it adds the success of it.
Posted @ Wednesday, April 10, 2013 4:45 PM by Website Search
Great work. Thanks a lot. You have done a lot of hard work
Posted @ Wednesday, April 17, 2013 5:25 AM by Single page web Design
i want book related web designing . 
Posted @ Friday, April 19, 2013 9:25 AM by ROHIT KUMAR
I think responsive design is a fantastic way to keep visitors interested once they land on that home page. Great post!
Posted @ Thursday, May 23, 2013 10:34 AM by Tom
Yes, I agree with your informative article. Thanks for sharing. Please keep it up to date....!!!!!!!
Posted @ Friday, August 02, 2013 5:04 AM by AZ Website Design @ BMD-media
Beautiful examples for responsive web design. We’ve added this great resource to the Responsive Design Knowledge Hub: http://www.ugurus.com/responsive-design-examples 
Thanks!
Posted @ Monday, November 04, 2013 4:41 PM by Nicole Windham - uGurus
Thank you very much Nicole, I appreciate the mention!
Posted @ Monday, November 04, 2013 5:09 PM by Jacey Gulden
Responsive Sites for Your Inspiration : http://responsivesite.org/sites
Posted @ Wednesday, November 13, 2013 9:58 PM by Avinash Bhardwaj
Thanks for sharing with us.The post is written in very a good manner and it entails many useful information for me.
Posted @ Tuesday, December 17, 2013 7:55 PM by check out this company
Good work.I really appreciate you efforts :) Now every websites must be very responsive other wise no one will not entertainment your website
Posted @ Tuesday, March 18, 2014 4:47 AM by Jack
nice collections of web-responsive websites
Posted @ Tuesday, March 18, 2014 4:56 AM by kandy Doe
Wonderful article! People that visit go through your current content will quickly realize a great deal of valuable along with helpful guidelines.
Posted @ Monday, March 31, 2014 7:01 AM by choosing home loan
I am overwhelmed by your post with such a nice topic. Usually I visit your blogs and get updated through the information you include but today’s blog would be the most appreciable.
Posted @ Monday, April 14, 2014 3:57 PM by reward credit card
Nice list of sites gone responsive well. I'd like to see a super list of responsive Wordpress premium themes and then critic them - pros/cons.
Posted @ Tuesday, April 22, 2014 1:36 AM by BJ Adkins
Post Comment
Name
 *
Email
 *
Website (optional)
Comment
 *

Allowed tags: <a> link, <b> bold, <i> italics