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)
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.
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.
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!
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…
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
I like the design of these websites but the user experience was a lacking a bit in some of the websites.
really great stuff.
http://mediaqueri.es/
Soon we will have a responsive design for WPBeginner as well.
I can’t wait till I finish my website’s responsive design. No more zooming on mobile devices!
Very interesting,would I be able to do something like that with my design?I wonder how can I do that.
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.
Great post. All very inspiring. Thanks for the help.
Sam
woow… Its great!!…
Thank you.!!
Thx for the techniques will check em out tomorrow!
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.
http://joshuasortino.com/ is a great responsive designed site
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?
It’s cool. I didn’t knew that you can make your web pages adaptive for different browsers. I’ll keep that in mind.
Really great stuff and very inspiring. Thanks for sharing!
Attractive web design :D