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
