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 Responsive Websites
Harpeth Valley Animal Hospital
More Hazards More Heroes
Naomi Atkinson Design
New Adventures in Web Design 2012
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!
Responsive Design is indeed more than a trend. It's most likely going to become a standard in Web Design because of the many viewports available. Would I dare adding my site to this list? http://www.madfrogdesigns.com/.
Love it! Percentage based widths and media queries is definitely the way to go for a truly adaptive design.
I like how you've dispensed with the navigation bar on the smaller version. Fitting a horizontal navigation bar into a mobile sized page is always going to be a difficult design challenge. It is typically very easy to scroll (or flick) a page down with a touch device however, so getting rid of the bar entirely seems like a wise choice for a one-page site.
Oh, I think there could be an issue with the contact box at smaller sizes in Chrome (not FF though)... other than that awesome work!
Thank you for the comment Rory. Good point regarding Chrome. There's always something to fix, right?
Hey Julian,
Your site also good one but little cluttered.... may be for using transparent bg....
anyways nice effort and i love frog smoking!!!
-chary
Great list of examples! Enjoyed going through them and viewing them on my phone as well as on the screen to compare how they displayed on the different devices.
I agree with your final thoughts, this is definitely becoming a way in which we design and develop websites and i do feel that it is a move in the right direction. But not only develop sites that are view-able across various devices, but to do so in a way that will try and cater for the many devices still to come and thus be "future friendly". A great resource for those who are interested in learning more about responsive web design techniques and practices is http://futurefriend.ly
Have you seen http://www.mediaqueri.es ? It's a galley for web sites using media queries, half of which are responsive design. It's curated by Eivind Uggedal. Or followed any of the discussion since the Boston Globe relaunched their site? The work Ethan Marcotte, Scott Jehl & the Filament Group put together for http://www.bostonglobe.com raises the bar for responsive web design and responsive images.
Mediaqueri.es is a great resource! The Boston Globe site came out a few days after I put together this collection but it is clearly one of the best examples of responsive design yet. It must have been a big challenge to work with a site with such a large amount of content but the final design is so elegant and usable at all sizes. They've dealt with issues such as scaling the navigation and images really thoughtfully.
Love the way CSS tricks do responsive web design.
I absolutely agree, CSS Tricks is at the top of my list of favourite sites. Sadly I often resize the window just to watch it all float around.
Bravo. Thanks for sharing these beauties.
Five more great examples I've seen in the past few days:
http://meltmedia.com/
http://www.taechogroup.com/
http://preeticakes.co.uk/
http://gridchin.com/
http://www.bakkenbaeck.com/
*Cough* *Shameless plug* http://weare2ndfloor.com/ *Cough*
That aside - I really think Responsive Web Design can enhance a users experience if done right, top quality examples Rory!
Wow that's awesome, definitely added to my 'inspiration' tagged delicious bookmarks! Love Merriweather font, and the script font looks great with it. It's all about the minimal design!
Thanks Rory, much appreciated :)
Wow !! Really cool examples of responsive web designs. Thanks for sharing. Personally "Stephen Caver" is the favorite one as it just not only responsive web design but also has the awesome use of the typography in its design.
Love Matt Hamm Website.. Btw cool collection..
Thanks for showing my Visua site! Although I don't think it belongs up there with the others, they're much better, mind blowing!
This is a great set of examples. Was all getting creative blocked for awhile, this one got our brains working again. Thanks Rory.
Really awesome design and got a new idea from it for my next month project.
Cheers.
Nice roundup.
I particularly like the Simon Collison example. Many of the examples have that similar design element I really like at the moment.