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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Further Reading
- Mediaqueri.es, a gallery dedicated on responsive sites
- Best Web Gallery - responsive section
- Responsive Design with Media Queries
- Ethan Marcotte's 20 Favorite Responsive Sites
- Smashing Magazine - Responsive Design Tutorials
- Skeleton - Boilerplate for responsive
- 320px and up - the small screen first boilerplate
- Fitvids.js - jQuery plugin for fluid video embeds (similar to Elastic Videos trick by TJK Design)
Wow … ilike how the Food Sense – Site responds …
This is awesome.
I have been wondering how to exactly design a site for a mobile layout.
Thanks alot for the post!
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.
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!
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!
great post, this will help me for mobile design .
Priceless examples of cases to study and draw solutions from.
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.
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
Some really great looking & functional references. Responsive frameworks are a great solution and have helped speed up the development of our mobile sites.
Great post, thank you. I agree with the great idea.
Its great.Thanx for the post.Keep posting
I should win because I love Moo and need my fix! ;))
really nice , the idea is different but acceptable.
Nice post! You can always make good and better designs if you have an inspiration. Keep it up!
goood one
useful and practical post
:)
Yes , really nice and useful ….
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
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.
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?