Line25

Showcase of Outstanding Responsive Web Designs

Read the full post

This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web design. These websites not only look great at full scale monitor resolution, but are designed to gracefully scale according to the user’s screen size. Resize you browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well presented formats.

What is responsive web design?

Screen resolutions

Websites are no longer viewed only on a computer monitor. Smartphones, tablets and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. The idea of catering for various resolutions isn’t anything new. Back in the days of table based designs designers either chose the fluid or static route. Today’s responsive websites take a similar approach by using fluid widths in percentages and ems, but go a step further by using scalable images and adjustable layouts depending on the browser size.
To achieve this ‘scalability’, CSS media queries are used to apply different page styling according to certain parameters, such as min-width and orientation. The first step is to create a mobile version, but you could go on to customise your design for a range of resolutions.

Showcase of responsive web designs

Ready for some examples? Here’s a roundup of 50 of the most outstanding examples of responsive web designs. Each one is displayed with a preview of both the full size website and an example of a small resolution, but to get the full experience be sure to visit the live site and play around with it yourself.

Alsacréations

View the responsive website design

Sasquatch Festival

View the responsive website design

Earth Hour

View the responsive website design

Cognition

View the responsive website design

Tileables

View the responsive website design

Philip Meissner

View the responsive website design

Interim

View the responsive website design

Ribot

View the responsive website design

Visua Design

View the responsive website design

Laufbild Werkstatt

View the responsive website design

Sweet Hat Club

View the responsive website design

iamjamoy

View the responsive website design

Andrew Revitt

View the responsive website design

Stijlroyal

View the responsive website design

Sleepstreet

View the responsive website design

Pelican Fly

View the responsive website design

eend

View the responsive website design

Converge SE

View the responsive website design

iwantedrock

View the responsive website design

Joni Korpi

View the responsive website design

Jason Weaver

View the responsive website design

Cohenspire

View the responsive website design

Think Vitamin

View the responsive website design

CalebAcuity

View the responsive website design

3200 Tigres

View the responsive website design

Marco Barbosa

View the responsive website design

Jeremy Madrid

View the responsive website design

Lapse

View the responsive website design

Ryan Merrill

View the responsive website design

Media Queries

View the responsive website design

Electric Pulp

View the responsive website design

Tee Gallery

View the responsive website design

Stephen Caver

View the responsive website design

Happy Cog Hosting

View the responsive website design

Splendid

View the responsive website design

A Different Design

View the responsive website design

This is Texido

View the responsive website design

Edge of my Seat

View the responsive website design

Hardboiled Web Design

View the responsive website design

St Paul’s School

View the responsive website design

Robot… or Not?

View the responsive website design

Handcrafted Pixels

View the responsive website design

re:play

View the responsive website design

Sparkbox

View the responsive website design

SimpleBits

View the responsive website design

UX London

View the responsive website design

CSS-Tricks

View the responsive website design

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

51 Comments

  1. Markus says:

    Does that mean we can expect a responsive design and coding tutorial soon? :)

  2. Derek Jensen says:

    I'm with Markus!

    Oh and thanks for the all the time to discover these responsive web designs. That must have taken a good time.

  3. Idea! I can build these types of sites by using percentages instead of pixels in my CSS!

    Different versions of the same website might cause web ddesigns to complete more work and make more money!

  4. Matt Simon says:

    Suprised not to see Nick La's redesign of Web Designer Wall not on there…http://webdesignerwall.com. Some good inspiration in there though.

    I also made a resume web page which is responsive. Take a look….

    http://www.boxadesign.co.uk/cv/

    Matt

  5. Thanks a lot for sharing this nice post!You’ve done really excellent job!

  6. Kidando says:

    Great post Chris.

  7. Good for inspiration.
    Thanks chris very helpful

  8. Sean McCabe says:

    Feel free to add the recently-released http://Abberdein.com.

    It's a very excellent example of responsive web design.

  9. Mainual says:

    Great tips, fantastic examples

  10. Just wondering if anyone knows of a framework like the 960 grid that supports this type of scalable web design.
    I'm really interested in starting to use HTML5 very soon, and this would be something I could really get into, however, I really love using frameworks to keep development time down.

  11. Great list as always. I just looking into mobile design specifically iPad so these will be a good source of inspiration. thanks.

  12. waiting for another great tutorial from chris!!!

  13. Cory says:

    Most of these are the personal pages of designers and developers. Where are the real world examples?

  14. José Mota says:

    You forgot one of the first (and best) ones. Jon Hicks' website, hicksdesign.co.uk.
    Also, Simon Collison's, colly.com. Both of these are just fantastic work.

    #2cents

  15. Shaun Bent says:

    Awesome showcase! Good work as always Chris!

  16. Daniel says:

    @ Michael Caputo
    Check http://cssgrid.net/
    @Chris Spooner
    Thanks for the inspiration

  17. John says:

    You should give credit where it's due…like thanking Media Queries (http://mediaqueri.es/) for curating the majority of your list for you.

  18. ABDUL JANOO says:

    Cool collection……….from were u get this all……

  19. ali stone says:

    Where's @colly http://colly.com/

  20. Great designs, cool tutorial, very helpful !!!

    <a href="http://www.promowebperu.com">diseño web</a>

  21. Janna says:

    Awesome and inspiring collection. Thanks!

  22. office space says:

    I can't believe it – this was one I was thinking 6 months before.

  23. Thanks for this, some really inspiring designs.

  24. Matt Simon says:

    Just wondering why my comment is still awaiting moderation? is it something I said?

  25. Dave McNally says:

    A nice list! Thanks for featuring Tileabl.es too :)

  26. As a beginner to the world of web design it's obvious that I have much to learn.

    Many thanks for the inspiration.
    Karl

  27. asdasd says:

    ascasc

  28. Jatin says:

    Really great list.

  29. Spencer says:

    Lovely list mate!

  30. asim craft says:

    Really good list. check out what we do @digitaldesignzmedia.com

  31. Manny says:

    Nice one, great list that Sasquach Festival site is brilliant.

  32. Thank you very much for this post.

    If it isn't already, it's going to be a challenge for designers to move beyond the 960px fixed width grid (though it's still a great system) and design to adapt to a wider spectrum of multiple monitor sizes and platforms.

  33. Really like them all! 1st one is definitely the best! thanks

  34. Renan Gomes says:

    Great post man ! Greetings from Brazil :)

  35. tdelphi says:

    Wow A huge nice List they inspired me to create new site.

  36. You have given nice list of website. I got your point .

  37. Azhar Kamar says:

    Awesome UI designs optimized for browser compatibility. Nice!

  38. chris george says:

    As a Web Design Company India CYBERMOUNT is one of the fastest growing web site designing company spreading wings in USA UK and India. Expertise in Web Designing, Web Applications and Online Marketing.

  39. Thanks for your good post :) i write spanish edition in my corporate blog in http://www.colorvivo.com/diseno-web-de-respuesta-para-todas-las-resoluciones/

  40. Illusion 3D says:

    No doubt this makes an impression on everyone. The fact is that most programmers do not know that 3D modelling software can be applied this way.

  41. Leo Brown says:

    Really Great list….it is very useful for fresh web designers….and also helpful how to create a beautiful templates like this…..Thanks continue your postings…..

  42. dan says:

    http://crab-tree.com is now a worldwide web design services website

  43. LKenneth says:

    These websites look fantastic great inspiration here!

  44. Great list of designs. Thanks for sharing. For website designing & SEO tips & tricks visit alltechnetworks.com

  45. Daveido says:

    Great list, I think this is a necessary feature in every website that wants to be professional! So I agree with everybody else, can we expect a tutorial on this soon? :)

  46. A very great list. I'm looking forward to the tutorial. I'm excited to learn.

Sorry, comments are now closed