20 Amazing Examples of Using Media Queries for Responsive Web Design

by on 12th May 2011 with 26 Comments

screenshot

Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs.

To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to present experiences specifically catered to different visitors.


#

What Are Media Queries?

CSS3 has brought about a ton of fancy visual effects such as shadows and animations, but what about practical improvements? Is there anything about CSS3 that actually improves the way you can build websites from a usability standpoint?

The answer is a resounding “yes” and is due largely to the inclusion of media queries. Media queries are incredibly useful because they solve a huge problem that arose quite suddenly in web design: the need to design for vastly different screen sizes.

User screen sizes have always differed but for the most part this difference was limited to a few inches and you could bet on a huge majority of your audience fitting within parameters that were fairly easy to design around. These days though you have some users on a 27″ Apple cinema display and others on a 3.5″ smartphone.

That’s a huge difference and there are plenty of stops along the way. The ever-growing number of devices that are web friendly make it increasingly difficult for designers to present one static solution that caters to everyone’s needs.

This need has given birth to the idea of responsive web design, which goes far beyond fluid page widths and actually dramatically changes the layout of a page as the size of the browser window or device screen size changes. Media queries are one of the most powerful tools for meeting this goal because they allow the designer to set special CSS according to certain pre-established rules.

Owltastic: An Excellent Example of Responsive Web Design

The information above is a bit abstract, so let’s see how this works in the real world by looking at an example from the talented designer and developer Meagan Fisher. Here’s what her site looks like in my 13″ MacBook’s browser window at full screen.

screenshot

Now, if I adjust that window size, a lot starts to happen. Columns adjust their width, the layout shifts to be more vertical and non-essential items disappear completely. Here is a screenshot with two more page widths, check out how much the design adapts to different situations.

screenshot

Notice that we started with a three column layout, which then morphed into a two column layout and finally landed on a single column layout with my browser window as small as it would go. This is more than just one designer showing off to others, this represents a seriously impressive attempt to make the site not only usable, but specifically optimized to the broad range of devices that are likely to see it.

How It Works

This may seem like it’s going to be a ton of extra work, and I’d be lying if I said that it’s a painless process, but the good news is that CSS and media queries do a lot of the heavy lifting for you. Let’s jump into Owltastic’s code a little to see how this all works.

For starters, you’re going to see a lot of expert use of floats and percentages used for sizing. Notice in the snippet below Meagan used percentages for both the width of the element and the margin. She’s also meticulous about telling you where these percentages come from in the form of a comment with some quick math.

.navigation li { float: left; display: block; width: 16.24%; /* 105/645 */ margin-right: 4.7%; /* 30.315/645 */ }

This definitely makes layout a little trickier, but it sets a good foundation for flexible page widths even before she gets to the media queries. However, the properties shown above are, for the most part, what you see being manipulated further within the media queries.

@media screen and (max-width: 800px) { .aside p { font-size: .75em; } .aside .section { background: none; padding: 0; margin-bottom: 2em; } .section .latest-shot { background: url(../img/bg-light.jpg); } .aside h1 { text-align: left; } .hentry h1 { font-size: 1.75em; } .hentry .meta p { float: none; margin: 0 0 5px 0; } .hentry .meta .bullet { display: none; } }

Here we can see that Meagan has targeted a maximum screen width of 800px and then defined a series of styles that apply directly to devices meeting that specification. From here, floats, margins, padding, display and even images are tweaked for optimum layout at that size.

A total of five different media queries are setup for different circumstances: max-width: 960px, 800px, 640px, 540px and 480px. Each of these is quite thorough in outlining specific behaviors for that screen size. Here is the section for max-width: 480px.

@media screen and (max-width: 480px) { .logo { margin-top: 30px; } .container { padding: 15px; } .navigation { margin: 0 0 15px 0; } .navigation li { width: auto; margin-bottom: 10px; margin-right: 3%; } .navigation li a { border-right: none; padding: 0; display: block; } .navigation li a em { display: none; } .hentry .floated-image { width: 100%; } }

One interesting trick here that you should pay special attention to is the use of fluid images. By setting the width of an image to 100%, it will fit into the width of its container and resize as the browser window changes. Ethan Marcotte explains this technique in-depth on his site Unstoppable Robot Ninja. Be sure to resize your browser window on his site and watch the header images respond.

More Live Examples

The best way to study responsive web design and media queries is to get a glimpse of them in action. Here’s a brief list containing some sites that I found impressive. With each site, don’t just look at the design, test it by resizing your browser window. Also, dig into the CSS to see how the sites work and think about how you can implement these techniques in your own designs.

A List Apart: Article Example

screenshot

Trent Walton

screenshot

Think Vitamin

screenshot

Deren K.

screenshot

Do Lectures

screenshot

About.com

screenshot

Sasquatch Festival

screenshot

Earth Hour

screenshot

BMX Feed

screenshot

Remo – Powerstroke Pro

screenshot

The Modern Gentlemen

screenshot

Naomi Atkinson

screenshot

Converge SE

screenshot

Sleepstreet

screenshot

Alsacreations

screenshot

A Different Design

screenshot

Yiibu

screenshot

Sweet Hat Club

screenshot

Laufbild Werkstatt

screenshot

Lapse

screenshot

Dmig 5

screenshot

Conclusion

To sum up, the plethora of devices accessing the web these days makes it necessary to create website designs that are adaptable to a lot of different screen sizes and CSS media queries provide an easy way to do exactly that.

To be honest, when I first heard about media queries I rolled my eyes, thinking that it would add simply yet another layer of work to all of the steps that we already have to go through to make our designs pass as usable. However, the more I learn about and experiment with them the more that I’m convinced that this is how web design should be approached in what Steve Jobs calls “a post-PC era”.

Comments & Discussion

26 Comments

  • http://www.betleywhitehorne.com Ric

    Interesting sites. BMX Feed and Luafbild Werkstatt have the wrong image – shows the Owltastic site.

  • Joshua Johnson

    Good catch, we had some issues with the images on the server this morning but they’re all fixed now!

  • http://pollyfolio.com/ Polly

    All great examples. Responsive is the new black :)

  • j

    http://lessframework.com/ is really helpful for building responsive sites.

  • http://www.laufbild-werkstatt.de Michael

    “Luafbild” is wrong: “Laufbild” is right – means Moving Image!
    Thanks for the feature!

  • Sandy

    A really nice break down of media queries and really nice examples. Funny I just ran across Owltastic yesterday for the first time when I was looking for examples of text and box shadows.

  • http://butch-villarama.com Butch V.

    Bookmarking this. I’m definitely using this for every project I do now! Thanks :D

  • http://scottlassiter.com Scott

    This is a great article. Something else we can all bill for in our future web designs!

  • http://stugreenham.com Stu Greenham

    Great list guys! I just launched my own portfolio fully media query packed! Let me know what you think..
    http://stugreenham.com :)

  • Maneesh Prabhalayam

    really enjoyed the article. All examples were nice..

  • Jim

    Excellent article! Another great example of Responsive Design with an HTML5 video carousel that works on most devices:

    http://www.dng.com

  • http://ricardosaavedra.net Ricardo Saavedra

    I think it’s a good solution for tables and deal with different screen size. I wouldn’t recommend to mobile solution. For mobile (cell phones) it’s important to reduce images, and optimize the code.

  • Ryan

    Another nice example of a responsively designed website is the designer/developer job board at http://www.findbacon.com

  • Raja

    Excellent article with best examples…thank you

  • http://www.marijazaric.com Marija Zaric

    Great examples. I made html5 patisserie template with 1140 css grid great for making a responsive design that is optimized to work on any device.
    Link: http://www.marijazaric.com/category/responsive-design-template/

  • http://www.paulund.co.uk Paul

    Great article, one of the nicest I’ve seen is CSS tricks as he using animation with the media queries looks awesome.

  • http://gerardmcgarry.com Gerard McGarry

    I’ve been obsessing about how to cater to mobile users without providing loads of different iterations of the site for specific devices. The Owltastic site is a brilliant example of responsive design, and potentially a great starting point for anyone wanting to learn these techniques.

  • sohel

    Dude this designs are awesome thanks for uploading…. :)

  • responds

    Nice collections!!!

    Is there any fullscreen sites that hare html5 and responsive?

  • Nidhin

    Nice artice.

  • rahul

    awesome

  • rahul

    rahul says:

  • sudipta mondal

    great tutorial, it’s help me to increase my knowledge. thank you.

  • sohel

    teri maki chut gaandu jaa sale bhadve..

  • http://www.priyalondhe.com Priya Londhe

    awesome tutorial. Thanks for sharing… :)

  • kate

    very good, original, inspiring examples, really helpfull, thanks. I’m waiting for continuation and next responsively designed websites.

Subscribe

Membership
About the Author