40 Inspiring Responsive Websites

by in Inspiration on 30th Sep 2011 · Comments

So this 'responsive web design' lark is proving rather popular isn’t it? Unless you’ve been living in a cave for the last 12 months you’ll know that the trend of building websites that respond to different browser window sizes is one that is showing no signs of abating.

Below is a selection of 40 inspiring websites that use CSS3 media queries to create an adaptive user-experience. Some are new, some are older, all are fantastic. To learn more, here is another tutorial that teaches you how to Create a Responsive Web Design Template.

40 Inspiring Responsive Websites

40 Responsive Websites

40 Horse
40 Horse

Ashley & David
Ashley and David

B3 Studios
B3 Studios

Bloom Health
Bloom Health

Bread & Pepper
Bread and Pepper

CSS Tricks
CSS-Tricks

Clearleft

Clearleft

Columba
Columba

dConstruct 2011

Electric Pulp
Electric Pulp

Find Bacon
Find Bacon

FoodSense
Food Sense

Forefathers Group

Forefathers Group

Fork CMS
ForkCMS

Full Frontal 2011
Full Frontal 2011

Happy Cog Hosting
Happy Cog Hosting

Harpeth Valley Animal Hospital
Harpeth Valley Animal Hospital

Henry Brown
Henry Brown

Hicks Design
Hicks Design

Mark Boulton
Mark Boulton

Matt Hamm
Matt Hamm

More Hazards More Heroes
More Hazards More Heroes

Naomi Atkinson Design
Naomi Atkinson Design

New Adventures in Web Design 2012
New Adventures In Web Design

Ribot
Ribot

Saneef Ansari
Saneef Ansari

Simon Collison
Simon Collison

SimpleBits
Simple Bits

SimpleGrid
Simple Grid

SparkBox
Sparkbox

Stephen Caver
Stephen Caver

Strange Native
Strange Native

Stu Greenham Portfolio
StuGreenham

Sunday Best Websites
Sunday Best Websites

Team Paws
Team PAWS

Thirst Studios
Thirst Studios

Trent Walton
Trent Walton

Visua Design
Visua Design

Warface
Warface

Yoke
Yoke

Final Thoughts

It seems to me that the 'responsive' approach to web-design is more than just another trend. People are now accessing the Internet on a vast range of different devices, from large desktop monitors, to laptops, tablet computers and smart-phones. This isn’t something that is going to change.

It is relatively easy to develop websites that function effectively across a range of different devices just by using CSS media queries and elastic layouts. Sure, it requires a little extra development time and a lot more testing. But we used to spend a lot more time hacking websites to work with the likes of IE6 (we sometimes still do). Web browsers are becoming more consistent but web devices are becoming more varied. The time that we used to spend considering browser compatibility now needs to be spent considering device compatibility. Do you agree?

Do you have any favourite examples from this list? Have you seen any other excellent examples of responsive layouts? Let's hear them!

Rory Macrae is a designer and developer based in the UK. He is trained as a product designer and has worked in various design disciplines but has decided to focus primarily upon his biggest passion; front-end website development. He is also a keen rock climbing and an enthusiastic explorer of new music.