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.

  • http://www.catnipcreations.co.za Markus

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

    • http://www.terencedevine.com Terence

      Good Idea!

      I've been studying more about media queries but haven't found any really great tutorials yet…. do it!

      • http://www.carmeliadesign.com Carmelia

        Thanks Chris, awesome list. I am looking forward for the tutorial soon.

    • http://jsdesignlab.com jeannie

      Yes! Tutorial please :) and thank you!

    • http://drawne.com Andy Feliciotti

      I expected a tutorial at the end of this :P

  • http://reworkingtoday.com Derek Jensen

    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.

  • http://webprogramming101.blogspot.com/ Web Design 101

    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!

  • http://wwwboxadesign.co.uk Matt Simon

    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

  • http://www.webdesigneruk.org website designer uk

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

  • http://kidando.net Kidando

    Great post Chris.

  • http://www.modernooze.com sam – dorset web design

    Good for inspiration.
    Thanks chris very helpful

  • http://boldperspective.com Sean McCabe

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

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

  • http://mainual.com Mainual

    Great tips, fantastic examples

  • http://www.mikecaputo.com Michael Caputo

    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.

  • http://www.my-html-codes.com HTML Codes Dude

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

  • http://jatinhariani.elementfx.com Jatin Hariani

    waiting for another great tutorial from chris!!!

  • Cory

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

  • http://josemota.net José Mota

    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

  • http://www.shaunbent.co.uk Shaun Bent

    Awesome showcase! Good work as always Chris!

  • Daniel

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

    • http://www.mikecaputo.com Michael Caputo

      Thanks so much!

  • John

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

  • ABDUL JANOO

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

  • ali stone

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

  • http://www.promowebperu.com posicionamiento

    Great designs, cool tutorial, very helpful !!!

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

  • http://www.jannahagan.com Janna

    Awesome and inspiring collection. Thanks!

  • http://www.searchofficespace.com office space

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

  • http://yellowjelly.uk.com Design Ipswich

    Thanks for this, some really inspiring designs.

  • http://wwwboxadesign.co.uk Matt Simon

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

  • http://enlivenlabs.com Dave McNally

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

  • http://www.buswebs.co.uk Karl Craig-West

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

    Many thanks for the inspiration.
    Karl

  • asdasd

    ascasc

  • http://itcutives.com Jatin

    Really great list.

  • http://visuadesign.com Spencer

    Lovely list mate!

  • http://digitaldesignzmedia.com asim craft

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

  • http://www.themwebs.me Manny

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

  • http://blog.rochelledancel.com Rochelle Dancel

    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.

  • http://blog.benjieboo.co.uk Benjamin Christine

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

  • http://www.renangomesds.com Renan Gomes

    Great post man ! Greetings from Brazil :)

  • http://www.linkinpark.com/profile/3sjr0fqa5q6me tdelphi

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

  • http://www.laser-infotech.com web design and development nepal

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

  • http://www.azharkamar.com Azhar Kamar

    Awesome UI designs optimized for browser compatibility. Nice!

  • http://www.cybermount.com/ chris george

    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.

  • http://carrero.es David Carrero Fdez-Baillo

    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/

  • http://www.illusionmagez.com Illusion 3D

    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.

  • http://www.webdesign-dallas.us/ Leo Brown

    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…..

  • http://crab-tree.com dan

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

  • http://www.lk-webdesigns.co.uk LKenneth

    These websites look fantastic great inspiration here!

  • http://www.alltechnetworks.com/ Sumit Khaneja

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

  • http://blog.indigolinestudio.com/ Daveido

    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? :)

  • http://esvelte.com Web Design Sheffield

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