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

1 3 4 5
  1. Maartje
    Jan 19, 2012 @ 4:32 am

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

    Reply

  2. Web Design Malaysia
    Jan 20, 2012 @ 10:28 pm

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

    Reply

  3. 熠熠
    Feb 19, 2012 @ 8:15 pm

    非常感谢您的指导。

    Reply

    • fafa
      May 28, 2012 @ 3:01 am

      what?

      Reply

      • cescleo
        Jun 4, 2012 @ 8:25 pm

        say thanks for u

        Reply

  4. penny aka jeroxie
    Mar 23, 2012 @ 6:05 am

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

    thanks!

    Reply

  5. magazin
    Apr 30, 2012 @ 12:56 pm

    This does look like a great theme.hh

    Reply

  6. Matt F
    May 23, 2012 @ 8:22 am

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

    Reply

  7. ellen
    Jun 9, 2012 @ 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

    Reply

  8. Robert
    Jul 2, 2012 @ 11:07 am

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

    Reply

  9. igneta
    Jul 6, 2012 @ 3:35 am

    Thanks. Perfect example.

    Reply

  10. Inspire
    Jul 13, 2012 @ 6:55 pm

    This is great, nice example

    Reply

  11. Attitude Design | Graphic Design Portfolio
    Jul 18, 2012 @ 7:40 am

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

    Reply

  12. Ibiza yates
    Jul 29, 2012 @ 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

    Reply

  13. Afzal
    May 27, 2013 @ 11:59 am

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

    Reply

1 3 4 5

Leave a Reply