Responsive design all started with this article by Ethan Marcotte. Some people see it as a trend. But it is more than just a trend. It is a new design solution — it helps to resolve the design problems associated with the different resolutions and devices (desktop, laptop, tablet, and mobile). I’m going to share a list of responsive sites that I feel are nicely done. I’ve categorized the list into two categories: Adaptive and Fluid & Responsive.

Adaptive Design

The following sites are examples of adaptive design. The design adapts based on the viewport width.

iA

Information Architects is one of my favorite minimal sites. It is simply beautiful. I admire the fact that such a beautiful design only uses two colors (black and red) with just web safe fonts, no texture images, no fancy Javascript effects or custom fonts. Transforming the navigation list menus into dropdown menus on smaller formats is very smart because it conserves a lot of space in the header.

screenshot

Head London

Although the Head London site is not fluid, but it did a pretty good job on the responsive layouts. The layout is consistently put together on each viewport layout. Most responsive sites use max-width to create fluid images (refer to my Responsive Design tutorial), but the images on Head is masked at full size.

screenshot

Food Sense

Pay attention to see how the Food Sense site responds. It flows from detailed 2-column layout with sidebar to 1-column layout. As the design gets smaller, it gets more minimal. The slider has 2 line of navigation text at the bottom on the large format, it then changes from two lines of text to one line, the text then disappears on the small format. The navigation menu has icons on the large formats. The menu icons disppear on the smaller formats.

screenshot

Fork CMS

Go to the Fork CMS site, resize your browser window. Notice the parallax scrolling effect on the water waves? That is fun. However, I don’t agree on hiding the feature icons as it goes smaller because readers with small viewport will lose some of those information.

screenshot

London and Partners

Design wise, I’m not a big fan of this site, London and Partners. But the responsive layouts are very well planned – from a large format 4-column layout to a small 1-column layout. Most responsive sites hide certain content as it goes smaller, but this site keeps it all. It shows that even content-rich site can be responsive.

screenshot

Fluid & Responsive

Now let’s take a look at the fluid and responsive sites. The following sites not only respond base on the viewport width, but the layouts and its content are fluid/elastic.

Bitfoundry

What caught my attention with Bitfoundry is the intro text. First I thought the resizable ribbon was a background image using background-size property, but it turned out that is an <img> tag with z-index applied. This is a nice trick to make resizable background image because CCS3 background-size is not cross browser yet.

screenshot

Ethan Marcotte

Ethan Marcotte, being the founder of responsive design and author of Responsive Web Design book, his site of course is responsive. Instead of using max-width to make the images responsive, Ethan uses some CSS tricks to clip the images at original size.

screenshot

Paul Robert Lloyd

On Paul Robert Lloyd‘s site, not only the layout is responsive, but the font size is also responsive. On larger viewport, the font size is slightly bigger which provides more comfortable reading on large monitors. This is a good usability touch.

screenshot

10K Apart

If you have a large display, maximize your browser’s window and check out 10K Apart. Then resize your browser’s window and watch the header images scrolls in opposite direction.

screenshot

Forefathers Group

The Forefathers Group has great attention to details and it flows nicely across all viewport sizes. The overall design is very graphical. However, on the small version, it seems a lot of graphic elements were removed. It would be nice to preserve some of the graphic elements using background-size property.

screenshot

Colbow Design

Unlike the Forefathers Group site shown above, Colbow Design preserves all the graphic details on all viewport layouts. Colbow Design creatively uses tiled background images (header image, city illustration and footer image) to deliver a consistent appearance throughout all resolutions.

screenshot

CSS Tricks

Beside of responsive design, CSS Tricks adds some transition effects to make the flow more interesting. Resize your browser window and watch the elements transit from one point to another.

screenshot

Electric Pulp

I like how Electric Pulp responds from a 3-column layout to 2-column and then a single column. However, the resizable header image doesn’t work that well on smaller versions. The text becomes illegible.

screenshot

Further Reading

102 Comments

Rahul
Oct 20, 2011 at 2:14 am

Superb!! Really Inspiring.
But I want to learn how can I implement this in my next project. Is there any tutorial available? Hope you will help.

kalen
Oct 21, 2011 at 1:40 pm

see this site’s archives:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Mikey
Oct 20, 2011 at 4:08 am

What a lovely selection of responsive work! You guys might also like to have a look at http://www.lancaster.ac.uk – one of the first University’s in the UK to have a responsive website.

Mikey
Oct 20, 2011 at 4:11 am

Apologies for the shocking misuse of the apostrophe in that last comment. Shame on me!

John
Oct 20, 2011 at 9:55 am

Good stuff Nick. Thanks for sharing.

Alex
Oct 20, 2011 at 10:02 am

Great collection Nick. Thanks for sharing.

Ben Peck
Oct 20, 2011 at 11:02 am

Adaptive design will eventually become a need but at the moment its a forward thinking initiative.

Manuel Martín
Oct 23, 2011 at 10:58 pm

Not really, it’s already a need, a lot potential clients and visitors are starting to use tables for reading and common navigation.

Plus, if you do not start to create you webs thinking on this stuff you’ll suffer, believe me, it hurts… We have to begin to use “width : 70%” instead 700 px in a 1000 px layout… Isn’t that hard when you start to think on mobile first.

James Finley
Oct 20, 2011 at 11:22 am

Be sure to check out Echo Design Group’s adaptive (responsive without fluidity) layout at http://echodesigngroup.com . We also have 3 more sites launching with adaptive layouts in the next month.

Jim
Oct 20, 2011 at 2:42 pm

Great resource, thanks guys!

You should check out my new HTML5 responsive portfolio site at jim-nielsen.com

CSS Collector
Oct 20, 2011 at 3:21 pm

Great collection to get inspiration on webdesign!
Recently I’ve also developed the theme named “Inspiration”, you can take a look at it here: http://bit.ly/niVJik
All the people can buy it only for $15!

Paul
Oct 20, 2011 at 4:22 pm

Thanks for including me in this list Nick, I consider it a great honour!

I just wanted point out one issue regarding the terminology you’ve used. Responsive Web Design (according to Ethan’s definition) is the combination of fluid grids, flexible images and media queries. I’ve heard the term ‘adaptive’ used for sites that don’t utilise all three components; therefore all the above sites are adaptive, but only the second set are responsive.

It’s easy to get hung up on these terms, and frankly I’m undecided how much we need to reinforce the distinction, but I thought it was worth noting all the same.

Thanks again,

Paul

Nick La
Oct 21, 2011 at 10:05 am

Agree with you on the term adaptive. Article edited.

Gonzo the Great
Oct 20, 2011 at 6:28 pm

.. hmmm, a pity that the same sites come back, .. over and over again!

Looks like these are the only responsive webdesigns there are on the intwerwebs? And if so, .. you missed a classic – also frequently featured – example, the site of Simon Collison ..

BTW: Don’t get me wrong, all sites are beautiful and cool! But there are more responsive webdesigns out there (and some übercool examples too!)

Robert
Oct 21, 2011 at 6:13 am

Nice article. Now I got sufficient knowledge about responsive web design. But can you please tell me some ways to implement this on my websites? Thanks.

SarahNavigator
Oct 21, 2011 at 6:18 am

ForeFathers Group has been coming up again and again in conversation online recently for design layout, fluidity, typography, etc. Those guys know what’s up!
On another note, I’m looking forward to seeing how designers will tackle responsiveness for mobile web. Designing from mobile out might be a thoughtful strategy for the future.
Cheers,
Sarah Bauer
Navigator Multimedia

kelta
Oct 21, 2011 at 6:56 am

It seems like they are communicating with us and moving when we move

Tammy
Oct 21, 2011 at 8:05 am

Great list! I’d like to see more examples of content heavy sites built responsively. I’ve recently designed quite a large responsive news type and couldn’t find too many examples for inspiration. I really like the Lancaster uni site posted above. Although not a particularly pretty site http://www.bostonglobe.com/ works well too.

Elaine McVicar
Oct 21, 2011 at 9:05 am

I’m loving responsive design as a solution. Just finished working on a project at Equator – http://www.eqtr.com where we implemented it on a hotel website http://www.macdonaldhotels.co.uk/

kalen
Oct 21, 2011 at 1:38 pm

Ding! Another reason i love this site.

getdatinfo
Oct 21, 2011 at 2:05 pm

http://www.1hunnit.com | #1 Trusted for Webhosting SSL Certificates Reseller and MORE!!

under $2.75 Webhosting (GOOD FOR WORDPRESS!!)

glynn
Oct 23, 2011 at 1:55 pm

First of all.. great round up! I’m currently writing a dissertation on responsive design. i was just wondering with the Bitfoundry if anyone knows which image slider they are using as most available ones I’ve come across use background images rather than actual img tags. If anyone could point me in the right direction I’d be grateful… Cheers!

Glynn

Steven
Oct 23, 2011 at 6:30 pm

alert(‘loled’)

wptidbits
Oct 24, 2011 at 12:20 pm

At the time i am writing this comment, development for HTML5 + CSS3 with media queries is already started. Thanks to all eye opening post related to this. Very useful and helpful.

SEO Chicago
Oct 24, 2011 at 4:43 pm

The minimal site threw me for a minute but having the poles helped me as you went on. The subtleties and amount of thought that goes into websites now versus say 5 years ago is astounding. Kudos. Beautiful examples, thank you.

Maneet Puri
Oct 25, 2011 at 2:52 am

Yes, responsive web design is really a solution for accessing a traditional web design in the mobiles or smart phones without any derailment to the page borders. Rather than using media queries, is there any other CSS option to design a responsive website? The adaptive design list is really worth a look!

Mike
Oct 26, 2011 at 12:23 pm

Most of what Marcotte talks about in his book, Responsive Web Design, he talks alot about design with em’s…it is an awesome, quick read…

Peter Ohlsson
Oct 25, 2011 at 9:22 am

Check out our site that also is responsive:

http://www.7an.se/

I´ve made it and feel very satisfied with it!

//Peter, 7an.se Örnsköldsvik, SWEDEN

Translation Services
Oct 25, 2011 at 9:59 am

I like the design of these websites but the user experience was a lacking a bit in some of the websites.

Imobiliárias Piracicaba
Oct 25, 2011 at 10:42 am

really great stuff.

jlaeser
Oct 25, 2011 at 3:22 pm

http://mediaqueri.es/

Syed Balkhi
Oct 25, 2011 at 4:34 pm

Soon we will have a responsive design for WPBeginner as well.

Marius Jokubauskas
Oct 25, 2011 at 5:59 pm

I can’t wait till I finish my website’s responsive design. No more zooming on mobile devices!

Non-profit web sites
Oct 25, 2011 at 10:07 pm

Very interesting,would I be able to do something like that with my design?I wonder how can I do that.

Neil
Oct 26, 2011 at 5:42 am

Some really decent techniques used on some of those websites. I still strive to create fluid, responsive websites, so I’m always after a bit of inspiration.

Sam
Oct 26, 2011 at 5:59 am

Great post. All very inspiring. Thanks for the help.
Sam

neos
Oct 26, 2011 at 7:28 am

woow… Its great!!…
Thank you.!!

Webbyrå Göteborg
Oct 26, 2011 at 8:02 am

Thx for the techniques will check em out tomorrow!

Tina
Oct 26, 2011 at 12:15 pm

It’s surely more than just a trend – I think every designer, who tends to be considered a professional, must understand how a good responsive design should look and be able to create one.

christian
Oct 26, 2011 at 8:25 pm

http://joshuasortino.com/ is a great responsive designed site

Simon
Oct 27, 2011 at 5:29 pm

I’m really loving responsive design especially for a few photography clients I have but something we’ve grappled with (especially for galleries) is setting a ceiling for maximum image size which takes advantage of the biggest and the littlest of screens. Several sized images could be used but is a lot more work for the client updating their own site. Any thoughts?

emailing
Oct 28, 2011 at 8:52 am

It’s cool. I didn’t knew that you can make your web pages adaptive for different browsers. I’ll keep that in mind.

Mariusz Zawistowicz
Oct 28, 2011 at 11:19 am

Really great stuff and very inspiring. Thanks for sharing!

Tedi
Oct 31, 2011 at 1:32 am

Attractive web design :D

万圣节服装
Oct 31, 2011 at 3:22 am

博客做的不错,欢迎回访啊

Jonny
Oct 31, 2011 at 10:29 am

The image link for london and partners brings up a 404 error, the link is wrong.

custom icon design
Nov 1, 2011 at 8:06 am

yeh, good list for the website. well done.

Llewellyn 3.0
Nov 1, 2011 at 12:13 pm

This is Beyond cool, all sites should incorporate this =]

Daniel Jung
Nov 1, 2011 at 7:21 pm

Great! I read your article as a good example of fluid & responsive. Thanks for letting me read a good article.

Patrick
Nov 2, 2011 at 2:55 am

Thanks for sharing, it give me more idea to create adaptive design.

Grant Brookes
Nov 2, 2011 at 8:11 am

London & partners still showing a 404< liked the effects on Fork-CMS site.. btw, going away from the topic, has anyone used the Fork-CMS, if yes, what is your review about it?

Studio76
Nov 2, 2011 at 8:19 am

Nice !

Check this also : http://www.catherinechauveliervoixoff.fr

Thanks

Orlando
Nov 2, 2011 at 1:22 pm

I like the Fork CMS site… but… for some reason, the 10K Apart website is very visually appealing to me. It really seems to draw the eye in…

Sagar Ranpise
Nov 3, 2011 at 4:58 am

Hi Nick ,

Awesome Examples!!! I have also created a post on creating responsive html5 page using media queries. I hope you like mine too.

http://www.alldesignstuffs.com/2011/creating-responsive-html5-page-using-media-queries/

Thanks & Regards,
Sagar S. Ranpise

ABCD
Nov 3, 2011 at 6:35 am

test

Aynex
Nov 3, 2011 at 1:23 pm

Redesigning my website…. now!

Rick
Nov 5, 2011 at 3:46 am

I agree that this is more than just a trend, it’s pretty much the future of efficient and cost-effective design, right?

Web design companies
Nov 8, 2011 at 8:49 am

Thank you for sharing this information. Your post helped me to clarify a lot and inspired greatly!

Peter / Stockfresh
Nov 9, 2011 at 6:59 am

Thanks for the roundup, the Food Sense site is especially great! Sooner or later everyone has to familiarize themselves with these techniques.

ilcho bogdanovski
Nov 10, 2011 at 2:23 am

Its a nice roundup. For any of you who love photoshop i have found another site with some cool tutorials and articles. the site is http://www.prodezen.com

Patrick
Nov 11, 2011 at 4:35 am

This is great reference for those who plan to create mobile design. Mobile user is keep increasing, we have to focus more on it. Good jobs!

Elijah Clark
Nov 12, 2011 at 2:20 pm

I think simple is better. i dont know why, but i like th simplicity of the first white design.

Motivational Images
Nov 14, 2011 at 7:42 am

Thanks a lot for sharing. Fork CMS site is great one!

Adrian
Nov 14, 2011 at 3:23 pm

Some great inspiration here. Fluid layouts seem the hot topic atm!

Adrian
Nov 14, 2011 at 3:24 pm

PS- Web Designer Wall should be on the list too! ;)

Joerg
Nov 15, 2011 at 9:17 am

Wow … ilike how the Food Sense – Site responds …

Ryan Davis
Nov 15, 2011 at 10:06 pm

This is awesome.
I have been wondering how to exactly design a site for a mobile layout.
Thanks alot for the post!

Mike
Nov 16, 2011 at 8:23 am

This inspires me to create a fluid design for our own site. I also look forward to working some of these neat ideas into some of our client sites as well.

ranna azam
Nov 16, 2011 at 8:29 am

both the lists are worth watching, all the things mentioned on this page are very inspiring. this information will be a great help to all mobile designers.
especially “FOOD SENSE” and “CSS TRICKS” are great!

ranna azam
Nov 16, 2011 at 8:52 am

both the lists are worth watching, all the things mentioned on this page are very inspiring. this information will be a great help to all mobile designers.
especially “FOOD SENSE” and “CSS TRICKS” are great!

findw3
Nov 16, 2011 at 2:43 pm

great post, this will help me for mobile design .

Morgan & Me Creative - Website Design Singapore
Nov 20, 2011 at 11:59 pm

Priceless examples of cases to study and draw solutions from.

Gezi Konya
Nov 21, 2011 at 8:43 am

Is there a source to find such templates online? As technlogy gets smaller and smaller day by day, we need to make smaller alternatives for our websites, think I.

William Derman
Nov 24, 2011 at 6:37 am

I’ve just recently been commisioned to build a responsive website myself. It can be found at http://www.thetigerbrandsfoundation.com

My biggest issue with this was being able to get the site to be able to be responsive on ≤IE8 so some serious javascript workarounds were included, in future I wouldn’t do this as the responsive design is in theory for adapting to mobile devices which don’t use browsers ≤IE8

I love your selection of sites would appreciate any comments on this design. I do feel that I will be building all sites as responsive sites.

Love it!

Cheers,
Will

Thomas
Nov 24, 2011 at 1:34 pm

Some really great looking & functional references. Responsive frameworks are a great solution and have helped speed up the development of our mobile sites.

Web Designer
Nov 29, 2011 at 10:28 pm

Great post, thank you. I agree with the great idea.

way2geeks
Dec 3, 2011 at 5:48 am

Its great.Thanx for the post.Keep posting

şişme bebek
Dec 8, 2011 at 10:24 am

I should win because I love Moo and need my fix! ;))

buy season 11 gladiator
Dec 12, 2011 at 2:31 pm

really nice , the idea is different but acceptable.

Andrew Roberts
Dec 20, 2011 at 8:51 am

Nice post! You can always make good and better designs if you have an inspiration. Keep it up!

Chandru
Dec 26, 2011 at 1:31 pm

goood one

moe net
Dec 27, 2011 at 12:39 am

useful and practical post
:)

July
Dec 27, 2011 at 2:01 am

Yes , really nice and useful ….

Debbs Hosting
Dec 29, 2011 at 5:17 pm

Very interesting. You’re right, when you think about it, “fluid and responsive” should be a primary focus in designing that most of us take for granted. I’ll be bringing this up later with my friends. I mean with all the gadgets with different screen sizes, right? After reading this, i actually tested it on this page. HAH! Fluid and responsive. nice :D

Sylvain
Jan 4, 2012 at 5:30 am

Interesting post.
However I find for a returning visitor some websites are disconcerting because he will search again where is the navigation or some elements of a page if the width of its page is not the same between two visits.
Otherwise I find it interesting to switch between Computer browsing to Mobile browsing without too much big headache.

Kerri
Jan 18, 2012 at 4:16 am

THANK YOU for the insightful Tutorial!! I really like the Food Sense site and was wondering what you used for the slide show. Is that what the jQuery scripts are for? I need to be able to have a slide show resize like yours does. Where did you get it?

Maartje
Jan 19, 2012 at 4:32 am

Great post, thank you!
Love the London and partners example.
Selects the right information and displays it properly.
Very useful insights..

Web Design Malaysia
Jan 20, 2012 at 10:28 pm

Really great collection! Would love to see more of this!

熠熠
Feb 19, 2012 at 8:15 pm

非常感谢您的指导。

fafa
May 28, 2012 at 3:01 am

what?

cescleo
Jun 4, 2012 at 8:25 pm

say thanks for u

penny aka jeroxie
Mar 23, 2012 at 6:05 am

this is great… btw, what is the template that food sense is using. please advise?

thanks!

magazin
Apr 30, 2012 at 12:56 pm

This does look like a great theme.hh

Matt F
May 23, 2012 at 8:22 am

Have you found any examples in the e-commerce space? Any examples of complex applications that use responsive?

ellen
Jun 9, 2012 at 6:20 pm

Thank you for your very timely article. I have just recently begun using WP. Because I had to. The only thing I liked was the responsive design. However, my first time in I sunk and drowned. Crashed my customers site for 24 hours. I would like to avoid that in the future.
So, I ask you, why is this site everyone is so gaga over switching out passwords and logins without asking? Why all the span I hear talk about? What really makes this worth the 24 yours without sleep>
At the risk of sounding naive..I like Homestead. One person to host, software, etc. NO it is not template driver unless so chosen (isn’t WP template driven?)
Thank you kind sir for letting me vent.
Ellen

Robert
Jul 2, 2012 at 11:07 am

Thank you, these examples are nice and people can learn more about responsive web designs with them :) Nice explanation

igneta
Jul 6, 2012 at 3:35 am

Thanks. Perfect example.

Inspire
Jul 13, 2012 at 6:55 pm

This is great, nice example

Attitude Design | Graphic Design Portfolio
Jul 18, 2012 at 7:40 am

Some great examples – particularly like the Information Architects one and their use of drop downs.

Ibiza yates
Jul 29, 2012 at 6:58 pm

So, I ask you, why is this site everyone is so gaga over switching out passwords and logins without asking? Why all the span I hear talk about? What really makes this worth the 24 yours without sleep>
At the risk of sounding naive..I like Homestead. One person to host, software, etc. NO it is not template driver unless so chosen (isn’t WP template driven?)
Thank you kind sir for letting me vent.
Ellen

Afzal
May 27, 2013 at 11:59 am

hey !
That’s quite interesting.
I really liked this post as this has helped me to create my own image styles

Post Comment or Questions

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.