Showcase of Outstanding Responsive Web Designs
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?
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
Sasquatch Festival
Earth Hour
Cognition
Tileables
Philip Meissner
Interim
Ribot
Visua Design
Laufbild Werkstatt
Sweet Hat Club
iamjamoy
Andrew Revitt
Stijlroyal
Sleepstreet
Pelican Fly
eend
Converge SE
iwantedrock
Joni Korpi
Jason Weaver
Cohenspire
Think Vitamin
CalebAcuity
3200 Tigres
Marco Barbosa
Jeremy Madrid
Lapse
Ryan Merrill
Media Queries
Electric Pulp
Tee Gallery
Stephen Caver
Happy Cog Hosting
Splendid
A Different Design
This is Texido
Edge of my Seat
Hardboiled Web Design
St Paul’s School
Robot… or Not?
Handcrafted Pixels
re:play
Sparkbox
SimpleBits
UX London
CSS-Tricks
Does that mean we can expect a responsive design and coding tutorial soon? :)
Good Idea!
I've been studying more about media queries but haven't found any really great tutorials yet…. do it!
Thanks Chris, awesome list. I am looking forward for the tutorial soon.
Yes! Tutorial please :) and thank you!
I expected a tutorial at the end of this :P
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.
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!
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
Thanks a lot for sharing this nice post!You’ve done really excellent job!
Great post Chris.
Good for inspiration.
Thanks chris very helpful
Feel free to add the recently-released http://Abberdein.com.
It's a very excellent example of responsive web design.
Great tips, fantastic examples
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.
Great list as always. I just looking into mobile design specifically iPad so these will be a good source of inspiration. thanks.
waiting for another great tutorial from chris!!!
Most of these are the personal pages of designers and developers. Where are the real world examples?
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
Awesome showcase! Good work as always Chris!
@ Michael Caputo
Check http://cssgrid.net/
@Chris Spooner
Thanks for the inspiration
Thanks so much!
You should give credit where it's due…like thanking Media Queries (http://mediaqueri.es/) for curating the majority of your list for you.
Cool collection……….from were u get this all……
Where's @colly http://colly.com/
Great designs, cool tutorial, very helpful !!!
<a href="http://www.promowebperu.com">diseño web</a>
Awesome and inspiring collection. Thanks!
I can't believe it – this was one I was thinking 6 months before.
Thanks for this, some really inspiring designs.
Just wondering why my comment is still awaiting moderation? is it something I said?
A nice list! Thanks for featuring Tileabl.es too :)
As a beginner to the world of web design it's obvious that I have much to learn.
Many thanks for the inspiration.
Karl
ascasc
Really great list.
Lovely list mate!
Really good list. check out what we do @digitaldesignzmedia.com
Nice one, great list that Sasquach Festival site is brilliant.
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.
Really like them all! 1st one is definitely the best! thanks
Great post man ! Greetings from Brazil :)
Wow A huge nice List they inspired me to create new site.
You have given nice list of website. I got your point .
Awesome UI designs optimized for browser compatibility. Nice!
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.
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/
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.
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 is now a worldwide web design services website
These websites look fantastic great inspiration here!
Great list of designs. Thanks for sharing. For website designing & SEO tips & tricks visit alltechnetworks.com
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? :)
A very great list. I'm looking forward to the tutorial. I'm excited to learn.