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.
The following sites are examples of adaptive design. The design adapts based on the viewport width.
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.
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.
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.
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, 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.
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.
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.
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.
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.
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.