40 Examples of Brilliant Responsive Website Layouts

by CSS, Inspiration, Web Design, Web Inspiration

Responsive web design become a very popular trend in 2011. It’s likely something we’ll see continuing well into 2012 as designers are beginning to support a myriad of mobile devices. Building layouts for the web can be tough, but inspiration is a huge factor.

In this gallery I’ve collected 40+ amazing responsive website layouts. These designs are built to support a set of different resolutions and re-size accordingly. It’s tricky building this functionality in HTML5, even advanced web developers may not understand responsive design trends. But check out some of our examples below and you’ll pick up techniques very quickly. Additionally let us know your thoughts or questions in the post discussion area.

You may also like…
15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →
15 Responsive CSS Frameworks Worth Considering →
10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress →

Fork CMS

Full View:

Mobile View:

SimpleBits

Full View:

Mobile View:

White Lotus Aromatics

Full View:

Mobile View:

1140px CSS Grid

Full View:

Mobile View:

Atlason

Full View:

Mobile View:

10K Apart

Full View:

Mobile View:

Cognition

Full View:

Mobile View:

Reverse Buro

Full View:

Mobile View:

Sunday Best

Full View:

Mobile View:

Dustin Senos

Full View:

Mobile View:

Clear Air Challenge

Full View:

Mobile View:

Owltastic

Full View:

Mobile View:

320 and up

Full View:

Mobile View:

Yaron Schoen

Full View:

Mobile View:

Build Guild

Full View:

Mobile View:

Do Lectures

Full View:

Mobile View:

Trent Walton

Full View:

Mobile View:

Food Sense

Full View:

Mobile View:

Sparkbox

Full View:

Mobile View:

ribot

Full View:

Mobile View:

Sweet Hat Club

Full View:

Mobile View:

A Different Design

Full View:

Mobile View:

Teixido

Full View:

Mobile View:

Sasquatch Music Festival

Full View:

Mobile View:

Electric Pulp

Full View:

Mobile View:

Stephen Caver

Full View:

Mobile View:

Social Marketer’s Summit

Full View:

Mobile View:

Sleepstreet

Full View:

Mobile View:

Porcupine

Full View:

Mobile View:

Interim

Full View:

Mobile View:

Tileables

Full View:

Mobile View:

CalebAcuity

Full View:

Mobile View:

Simon Collison

Full View:

Mobile View:

Spigot Design

Full View:

Mobile View:

Forefathers Group

Full View:

Mobile View:

Deren Keskin

Full View:

Mobile View:

Robot… Or Not?

Full View:

Mobile View:

Arrrcamp Conference

Full View:

Mobile View:

Thirst Studios

Full View:

Mobile View:

Visua Design

Full View:

Mobile View:

Made by Splendid

Full View:

Mobile View:

Five Simple Steps

Full View:

Mobile View:

Ryan O’Rourke

Full View:

Mobile View:

dConstruct 2011

Full View:

Mobile View:

Diablo Media

Full View:

Mobile View:

Asbury Agile Web Conference

Full View:

Mobile View:

You might also like…

15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →
15 Responsive CSS Frameworks Worth Considering →
10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress →

Author: (94 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

  • Guest
  • TimMH

    Cheers SB. a great round up and certainly very interesting. I was at a Digital Strategies conference in London, UK yesterday and every single speaker mentioned design for mobile as the key to future sales growth in our specific Market, if not all market’s.

    I have subsequently started a redesign of our websites to bring them in line with new smartphone and tablet technology. Specifically utilising HTML 5, CSS3 and where appropriate mobile javascript libraries.

    Perfect timing on the inspiration.

    Thanks.

  • Mark

    It’s amazing to me that people seem to be just now realizing there are mobile devices out there.  This should be an article 5 years ago, not today.  Sorry

  • http://cemahcreative.com/ Sara Stollings

    http://cemahcreative.com is another good example of responsive web design :)

  • Ryandeancorke

    Also checkout http://Fitforaframe.com. Pretty fluid

  • http://recktangle.co.uk/ Edward Lewis

    Some really good examples.. and even one featuring a Boston Terrier

    Nice work :) 

  • Darrellk

    Most of these sites miss the point that the mobile experience should be unique and relevant to the mobile user, not just a shrunk down version of the desktop site. Mobile users are looking for specific things when they browse from their mobile device. The UI should include big buttons you can easily hit with your finger, not the same links and menu items that are designed to be clicked on. Having to zoom on a mobile site is also a massive no and most of these would require some zooming to be readable. Just makes me frustrated to think anyone could think these sites are great examples of good mobile design. Sorry…

  • http://twitter.com/tomrogers8095 tomrogers8095

    I think it would be useful if you were to fill us in on what framework these websites are using. Some are obvious, others you would have to dig into the code to see.  

  • http://studiortp.com/ Ryan

    Also check out ticknors.com

  • http://www.webzplus.com.au/ John Robinson

    I’m going to have a ‘go’ at making a fluid design soon, I have a need to visit many of my OWN sites on my iPad and iPhone and it is always frustrating… I can only imagine what it does to my visitors. Thanks for a great article.

  • Sanskar tanmor

    Hi 
    Jake, I personally appreciate the layout tricks, specially the images resizing and hiding at specific browser width.  But, you are missing an example which uses grid based layout having multiple columns with scrollbar .