40 Inspiring Responsive Websites

40 Inspiring Responsive Websites

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.

Comments

  1. / Reply

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

      • Rory Macrae,
      • October 1, 2011
      / Reply

      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!

      1. / Reply

        Thank you for the comment Rory. Good point regarding Chrome. There’s always something to fix, right?

      • chary,
      • October 18, 2011
      / Reply

      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

  2. / Reply

    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

  3. / Reply

    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.

      • Rory Macrae,
      • October 1, 2011
      / Reply

      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.

    • Paul,
    • October 1, 2011
    / Reply

    Love the way CSS tricks do responsive web design.

    1. / Reply

      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.

    • Rory Macrae,
    • October 1, 2011
    / Reply

    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/

  4. / Reply

    *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!

      • Rory Macrae,
      • October 5, 2011
      / Reply

      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!

      1. / Reply

        Thanks Rory, much appreciated :)

  5. / Reply

    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.

    • Tim,
    • October 6, 2011
    / Reply

    Love Matt Hamm Website.. Btw cool collection..

  6. / Reply

    Thanks for showing my Visua site! Although I don’t think it belongs up there with the others, they’re much better, mind blowing!

  7. / Reply

    This is a great set of examples. Was all getting creative blocked for awhile, this one got our brains working again. Thanks Rory.

  8. / Reply

    Really awesome design and got a new idea from it for my next month project.

    Cheers.

  9. / Reply

    Nice roundup.

    I particularly like the Simon Collison example. Many of the examples have that similar design element I really like at the moment.

    • Whirl3d,
    • June 24, 2012
    / Reply

    I appreciate your collection and the time and thought that went into producing this list. My only concern is that I could purchase the template for at least 3/4 of these websites. In fact, many of them are either simple WordPress themes or non-wp-enabled ripoffs.

    Perhaps I am missing something and you intended to underscore the notion that good designs get duplicated and become the templates for the next wave of websites. If that is the case, then yes these _were_ inspiring, I can see. So much so that nearly every website out there looks like some variation of the same thing. This site notwithstanding.

    Still, good is good and I won’t argue that these sites aren’t good. I just wonder if they are very inspiring as the title suggests.

    Regardless, I appreciate the effort you put into it and can’t help but ask myself, “self, what have you done that is any better? Nothing? Well then stfu.” Best wishes, Whirl3d

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c