40 Effective Examples of Responsive Website Layouts

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.

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.

Comments

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

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…

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 .

I disagree, When I look at a mobile site I like to see the same info as on a full site. What designers could do to make the mobile site more accessible is use stats/analytics to see what pages are most viewed and present links/buttons to those pages as priority links, but still have the rest of the pages accessible too.