Responsive Web Design: 50 Examples and Best Practices

Responsive web design term is related to the concept of developing a website design in a manner that helps the lay out to get changed according to the user’s computer screen resolution. More precisely, the concept allows for an advanced 4 column layout 1292 pixels wide, on a 1025 pixel  width screen, that auto-simplifies into 2 columns. Also, it suitably fixes on the smartphone and computer tablet screen. This particular designing technique we call “responsive web design”.

Responsive web designing is an entirely different designing version than traditional web designing, and developers (especially fresher) must know about the pros and cons of responsive web designing. This blog is a mighty example of the approach so we will reveal a few facts about the uses of responsive web designing. The basic instinct might be to choose media queries to develop a responsive site. However, the hassle one faces with media queries is that new queries can pop up from moment to moment; each time, the user experiences sudden and drastic changes to the look and organization of the site. Experts suggest using some CSS transitions to ease the jump.

Pages that include data tables pose a special challenge to the responsive web designer. Data tables are extremely wide by default, and when someone zooms out to see the whole table, it becomes too small to read. When one tries to zoom in to make it readable, he or she is supposed to scroll both horizontally and vertically to look through it.  Well, there are several ways to avoid this problem. Reformatting the data table as a pie or mini-graph is an approved solution. The mini-graph fixes even in narrow screens.

Images in responsive web designs are called context-aware. This particular technique serves the purpose of responsive designing in true sense as the images serve at different resolutions, ranging from larger screens to smaller ones. The scaled images appear to change fluidly with the help of updated developer tools and coding languages, allowing designs to look sharp in every context. Responsive web designing is remarkably different from traditional designing in terms of technical and creative issues, and a careful use of this can do wonders while designing.

Responsive Web Design Examples

Simon Collison

Andersson-Wise Architects

Stephen Caver

Sparkbox

Food Sense

The Boston Globe

Think Vitamin

Sasquatch! Music Festival

Internet Images

Staffanstorp

Seminal Responsive Web Design Example

Naomi Atkinson

Forefathers Group

Spigot Design

New Adventures In Web Design Conference 2012

Illy Issimo

Arrrrcamp Conference

Robot or Not?

Earth Hour

Clean Air Commute Challenge

Launch Kit

Teixidó

Ribot

Page 1 Page 2

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

53 Comments
  1. Designrshub Oct 12, 2:10 pm

    I like those thumbnails :) Its really awesome to see a uniformed images.

    Reply
    +1
  2. Michael Hobson Oct 13, 7:09 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -5
  3. Roll studio Oct 14, 10:31 am

    Great showcase, but take a look at http://www.helpfulstrangers.com too!

    Reply
    +1
  4. Jeremy Linskill Oct 19, 4:18 am

    Great article and examples. I think something else that should be mentioned is that in the field of web design and development, we are at a point where it is impractical – financially and otherwise – for any business to attempt to keep up with the seemingly endless amount of new devices coming to market. Understanding and being able to apply responsive design is key to operating in this reality.

    Reply
    +3
  5. Sagar Ranpise Nov 3, 12:49 pm

    Hi Adrian,

    Very nice post on responsive design. I have also created a post on creating responsive html5 page using media queries. I hope you like mine too.

    Thanks & Regards,
    Sagar S. Ranpise

    Reply
    +1
  6. Terry Nov 8, 7:11 pm

    This is a great list, I especially liked ASU’s site. I read a good article about workflows that might be helpful to others interested in responsive design.

    Reply
    0
  7. Michael Byers Nov 22, 2:42 pm

    Really good examples. I am trying hard to make sure my future designs are responsive.

    Reply
    +1
  8. Tammy Cornett Dec 2, 12:12 am

    After a complete redesign and new content creation in August, this week our site (it.eku.edu) is now responsive. Our goal with the redesign was to be clear, concise, consistent and keep our content correct. The goal with the RWD is for our users (students, faculty, staff) to be able to find the IT support they need on any device.

    Reply
    0
  9. Nick M Dec 9, 4:19 am

    This was a very interesting article, I liked the many examples.

    Reply
    0
  10. Boris Kotevski Dec 12, 3:11 pm

    Considering the above example can be a great step in the right direction toward a good website design.

    Reply
    +1
  11. Eric Snowden Dec 20, 2:05 am

    I just redesigned my site using Foundation. Would love to be added to the list – http://www.ericpaulsnowden.com

    Reply
    +2
  12. Greg Dec 20, 10:43 pm

    Some great examples here. Also thinking of developing a responsive layout for my site next year.

    For anyone interested I’ve started writing a series of articles on responsive design here:

    http://www.phoenixstudios.co.uk/blog/2011/03/02/responsive-web-design-an-introduction/

    Reply
    -2
  13. Tim Conrad Dec 22, 8:37 am

    Take a look at http://www.aquatera.ca. Just finished new site design as well as responsive design. Now to make those features grow!

    Reply
    0
  14. John Jan 17, 10:17 pm

    Would you prefer it to be unpredictable? That’s not good UI design.

    Reply
    +1
  15. Joseph Buarao Jan 18, 1:55 pm

    Great collection mate! :) thanks for sharing this mate

    Reply
    0
  16. Paul Eustice Jan 18, 8:35 pm

    Some nice examples here. I recently launched my site (I actually started playing with it in December 2010 but I got lazy) which uses a responsive layout with column-count, which I haven’t seen used on any other sites.

    It’s also fluid between breakpoints, which is something I think many people miss out, to ill effect. What point is a responsive site that isn’t fluid between your set resolutions?

    Take a look :)

    http://pauleustice.com

    Reply
    -1
  17. Sahil Jan 19, 1:30 pm

    thanks, great collection of these responsive designed sites, this is really a good reference.

    Reply
    0
  18. Joe Twumasi Jan 20, 2:31 am

    Nice list on responsive web design and looking forward in getting my new website to this technique in making it easier on different screen resolution.

    Reply
    0
  19. Martin Jan 28, 3:47 am

    Im currently working on redesign project: You can take a look: http://www.aktivtek.no/hjemmeside-design.html I just hope to find some inspiration soon. I have been trying to figure something out but it take some time. BTW Arrrrcamp Conference is really cool.

    Reply
    0
  20. TJ Feb 3, 12:13 am

    This is a great article and some really good examples of responsive design.

    I think we’re really going to start to see a shift from traditional design to responsive design. It makes the most sense for client who are looking to design their website and applying similar themes to a mobile or tablet device without having to create a native app.

    Reply
    0
  21. Ken Feb 5, 1:47 pm

    Great examples of very responsive and fluid design. Really nice for inspiration for any designer willing to level up their skills for flexible work

    Reply
    0
  22. Michael Hobson Feb 10, 6:14 pm

    Just redesigned my portfolio site responsively! http://www.tremulantdesign.com

    Reply
    0
  23. Sheryl Feb 11, 2:11 am

    Love these examples. Does anybody have any examples or insight on how to apply responsive design to desksites that currently employ mega-dropdown navigation?

    Reply
    0
  24. Prodyot Feb 18, 8:06 pm

    Unquestionably this is an awesome list.
    Each of them is a great treat to my responsive eyes.
    Now, had the title of this collection read “50 Mind Boggling Responsive Templates Free To Download” then maybe I would have jumped in undefined uncontrollable ecstasy and maybe would have collapsed dead with a sudden heart attack :)
    Thanks for saving my life :)
    And, thanks for sharing the list.

    Reply
    0
  25. Coco Feb 20, 9:35 pm

    Thank you for the article with those great examples. There are so many good inspirations …

    Reply
    0
  26. Sebasitan Mar 9, 4:02 pm

    Great lists that really presents at lot of interesting examples. We are currently trying to educate our clients in Responsive Design, and I will add this to a “must read list” :)

    Reply
    +1
  27. Westleigh Mar 18, 7:05 pm

    How to I brief my designers for a responsive web design layout? or is this purely a developers role where he/she must convert the design into responsive code?. How is responsive handled / done when it’s PSD to HTML/CSS?

    Reply
    0
  28. Mads Sørensen Mar 20, 2:05 am

    Very nice examples here! RWD is moving along really fast, but I wish there was a better way to do images responsive!

    I found this little browser app who’s located in the menubar, it’s really great for when I’m developing my responsive sites. Check out http://www.minisizeapp.com.

    Reply
    0
  29. Steve Dwyer Mar 21, 10:45 pm

    This is a very cool list of responsive design examples. A couple members of our Front End Development and Design team at the agency I work for (Hanson Inc. http://www.hansoninc.com) presented a Slideshare talking about the future of responsive design. Check it out… It’s loaded with great information and may be helpful ~

    http://www.hansoninc.com/slideshare-what-is-responsive-design/

    Either way, great examples.

    P.S. Our agency website was built using responsive design – http://www.hansoninc.com

    Cheers!
    Steve

    Reply
    0
  30. Stein Mar 22, 3:08 pm

    Thanks for these great example websites! Times are evolving and web designers need to keep up, that’s a fact. However, I do feel that the more we adjust our website designs to display properly on different screens and devices is limiting our creative ability. Designers need to create designs that fit all, so it’s almost becoming a necessity to stick to the standard header-content-sidebar-footer layout, making it hard for creative, alternative designs to survive and I think that’s just too bad.

    Reply
    +1
  31. Sebastien Gignoux Mar 28, 11:28 pm

    Hi Adrian,

    Very useful post to get inspired. Thanks.

    I am trying to find out how widespread responsive design has currently become for web designer, do you know of any survey or polls?

    Since I haven’t found anything I am trying to do my own poll. Answering it will take only 4 clicks and less than 30 seconds. You can access it here: http://responsive.wufoo.com/forms/z7x3x5/ and the results are here: https://responsive.wufoo.com/reports/z5p8q2/

    If you could just answer it or even spread the word with a twit or something, that would be great. I think the results will interest everybody in the web design community.

    Reply
    0
  32. Carla Dawson Apr 19, 5:20 pm

    Does anybody know of site that sells responsive design themes? Template monster has some but not enough. I am looking for wordpress themes.
    Thanks
    Carla

    Reply
    0
  33. Tony Porto Apr 20, 6:35 am

    Awesome examples that go beyond the usual grid layouts

    Reply
    0
  34. Janimatti Ellonen Apr 27, 8:11 pm

    Hi, this article causes my Safari on the new iPad to crash. Happens every time. Tried 4 times.

    Reply
    0
  35. Michele May 9, 12:58 am

    Hi guys, look at this full responsive design with a masonry layout:
    http://openlastminute.it

    Reply
    0
  36. Frederik Heyninck May 17, 10:57 am

    This is also a nice example to mention http://www.felix-partners.be

    Reply
    0
  37. Alissa May 21, 8:03 pm

    I’m a seasoned web designer/developer in the traditional fixed sense but a total noob to responsive design. I have a client who has hired me to design for responsive web. Specifically Omega Theme.

    I have question. Please keep in min my noob status.

    Do I need to create separate designs for each of the platforms my client wants – Desktop, Laptop, Tablet and Mobile – or just one design? It seems to me that the point of responsive web is one design that responds. Hence the term “responsive web” :) Am I correct?

    Reply
    0
    • ned Jun 8, 10:46 pm

      you can try building it up using twitter bootstrap which has the responsive magic embeded in it.

      Reply
      0
  38. Timothy Gibson May 22, 3:28 am

    I believe that eventually, there will be more variety of layouts that uses responsive web design given the fact that it is fairly new.

    Reply
    0
  39. Russell Epstein May 23, 5:06 pm

    Great examples; thanks for sharing. We just made our site responsive. It is unique in that the images are not only fluid across screen sizes, but are draggable and droppable as well. To check it out, go to http://www.bandabout.com and click Get Started.

    Reply
    0
  40. web design May 28, 10:38 am

    Really interesting article. A great collection of responsive web designs.Responsive design continues to get a lot of attention. Thank you so much for this fine piece of quality content. Keep sharing.

    Reply
    0
  41. Shingo Jul 30, 10:38 pm

    Absolutely stunning designs, very inspiring. Here’s my take on responsive design http://www.shingokko.com/resource/blog-entry/responsively-design-a-blog/example.html, there’s also a tutorial on it on the same site. Cheers!

    Reply
    0
  42. Dasha Aug 10, 10:37 pm

    Отличный способ проверить насколько граммотно сделана разработка адаптивного сайта
    http://plastilin5.com/tools/

    Reply
    0
  43. Pavel kalivoda Sep 24, 11:45 pm

    Very nice examples. Surpisingly, there is also a new fine art photo gallery and it’s content not only adjusts to your display size and resolution. The slideshows also have real-time response to lanscape / portrait orientation of your mobile device.

    http://sendart2.me

    See for yourself!

    Pavel

    Reply
    0
  44. DevBridge Oct 9, 9:59 pm

    These are excellent, very inspiring examples. We just redesigned our website responsively, too: http://www.devbridge.com/

    Reply
    -2
  45. Muhammed Athimannil Mar 5, 1:25 pm

    Good collections, I’m sure these design will give inspiration for my up coming portfolio

    Reply
    +3
  46. Virgil Mar 20, 12:31 am

    Great examples indeed!thanks for sharing this with us.Responsive design is still the future!

    Reply
    0
  47. Debbie Navarro Apr 19, 5:54 pm

    Awesome..Thank you for sharing.

    Reply
    0
  48. Stan May 9, 6:41 pm

    Hi,

    The simple way to see how your website look like on the latest smartphones and tablets

    Give it a try now : http://www.pikock.com/en/piresponsive.html

    Stan

    Reply
    +1
  49. Ráfaga Gianesini May 22, 5:11 pm

    Great examples.
    I want to show my responsive website: http://www.applica.com.br

    Thanks!

    Reply
    0
  50. Rainer Jun 13, 5:45 pm

    Nice collection of showcases. And a very interesting time to be a web designer. Well, as interesting as always ;-) Rainer, http://www.transporter.at

    Reply
    -1

Leave a Reply

*
* Minimum length: 20 characters