Examples of flexible layouts with CSS3 media queries

Media queries let you to feed different CSS to users based on their viewport size (among other things), allowing you to create even more flexible layouts than ever before. See visual examples of real sites that use CSS3 media queries to make the layout more adaptable to the variety of screen sizes and devices in use today.

In my CSS3 presentation that I’ve given several times over the past year, the part that seems to impress the audience the most is my demonstrations of media queries. I’m with them. I think media queries are perhaps the most useful and exciting piece of all the great new stuff that’s new to CSS3.

While creating effective, attractive, flexible layouts that adapt to the user’s screen size has always been possible, media queries add another layer on top of flexible layouts to make them even more adaptable to an even wider range of sizes, allowing you to really fine-tune the experience for even more users. Media queries allow you to selectively feed styles based on the characteristics of the user’s display or device, such as how much width is available in the viewport, whether it’s in portrait or landscape mode, or whether it can display color.

My demonstration of media queries is the fictional Little Pea Bakery site, created for my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Here’s how it looks for most users (shown here at 990 pixels wide):

The "default" layout seen by most users.

It’s a liquid (also known as fluid) layout so it can adapt to the user’s screen size, but the design doesn’t look as good and isn’t as readable when the viewport width is very narrow or very wide. I used media queries to solve this problem. Here’s how the page looks over 1200 pixels wide:

The layout for wide screens (over 1200 pixels) adds a third column.

Using a media query and just a few lines of CSS, I was able to easily turn the horizontal navigation bar into a vertical menu in a new third column. This kept the text line lengths from getting too long and making the overall design look too stretched out.

Going in the opposite direction, here’s what happens to the design under 760 pixels wide:

The layout for narrow screens.

We’re back to two columns, as in the “base” layout, but I’ve made changes to keep the content from appearing too squished and the line lengths getting too short. First, I got rid of the two columns in the introductory text. I also moved the three featured product boxes from sitting side-by-side to stacking on top of each other, moving the icon for each one from the top of the product box to the left side.

A third media query improves the design on small mobile screens, seen here at 480 pixels and 320 pixels:

The layout for very small mobile screens uses only one column.

The design is now a single column. The main page heading and introductory text are smaller, as are the product icons.

To see all these changes in action, view the page yourself and resize the browser window. To see how it was done, check out the CSS embedded in the head of the page. You can learn the full details, of course, by reading Chapter 6 of Stunning CSS3.

For more examples of flexible layouts that use media queries to further enhance the site’s adaptability, dubbed “responsive web design” by Ethan Marcotte, see the following sites. Small screenshots don’t do them justice, so be sure to click through to the sites and resize your browser window back and forth to get the full effect.

All of these sites use liquid layouts, but that’s not a requirement for using media queries. It’s also possible to use media queries to essentially create multiple fixed-width layouts that can be switched between on the fly. A few sites that do this are:

Know of any other great uses of media queries in the wild? Please share them in the comments!

Update 1/25/11:

I’ve learned about a few other resources for media queries/responsive layout inspiration:

Also, I’m bookmarking sites that I find to be nice examples of media queries on Delicious.

Related Posts:

December 15, 2010

Categories: Inspiration

Tags: , , , , , ,

43 Comments

You can follow the comments for this post through the comments RSS feed.

1

Tweets that mention zomigi.com » Examples of flexible layouts with CSS3 media queries -- Topsy.com wrote on December 15, 2010, at 4:12 pm:

[...] This post was mentioned on Twitter by Pablo Lara H and Curtis Edwards, priitzzy. priitzzy said: RT @pablolarah: Examples of flexible layouts with CSS3 media queries http://ow.ly/3pNKd @zomigi.com » [...]

2

Thao wrote on December 15, 2010, at 7:08 pm:

I vote Andy Taylor’s CSSgrid (cssgrid.net) to be added Zomigi. It’s most-impressive.

3

Prajapati KV wrote on December 16, 2010, at 1:31 am:

Thanks a lot Zoe. That is a great piece of information.

4

Zoe Gillenwater wrote on December 16, 2010, at 9:05 am:

Yes, cssgrid.net looks cool! This blog post is older than it is, which is why it’s not in the list.

5

Michel wrote on December 25, 2010, at 12:46 pm:

That looks interesting, too:

http://lessframework.com/

Fluid, uses media queries, uses golden ration. :)

6

Andrew Shanley wrote on December 25, 2010, at 4:04 pm:

I have just finished a friend of mines website (http://www.kiranowal.com/) which uses media queries to determine the size of the background photography (he’s a photographer) as well as the number of tweets that appear, among a few other tweaks. It fits on 800×600 up to and over 1920×1080 really well (I think). Let me know what you think or if there’s any ways to improve it!

7

Muditha Jayasinghe wrote on December 26, 2010, at 7:23 am:

This look very nice but if this is only available in CSS3 then it is not ready for sites that need to serve a wide audience.

8

The Blog of Hanas › links for 2010-12-26 wrote on December 26, 2010, at 10:01 am:

[...] Css3 layouts This was written by delicious. Posted on Sunday, December 26, 2010, at 7:00 am. Filed under Uncategorized. Bookmark the permalink. Follow comments here with the RSS feed. Post a comment or leave a trackback. [...]

9

Amazon’s Terrible International Usability and a Proposed Redesign | Web Design Blog | Website tips & advice wrote on December 28, 2010, at 5:51 am:

[...] Update: Smashing Magazine just tweeted a really awesome example of a design using media queries to change the layout at 1200px, 990px, 760px, 480px and 320px. Source. [...]

10

Tim Kadlec wrote on December 30, 2010, at 1:26 pm:

@Muditha – Actually, media queries are supported by Safari 3+, Chrome, Firefox 3.5+, and Opera 7+, as well as mobile browsers like mobile Webkit and Opera mobile. IE (pre 9) is the only holdout. You can easily get around that issue by using an approach like Jeremy Keith recently documented wherein he separates his styles into two CSS files and uses conditional comments to serve the layout up to versions of IE prior to 9.

11

Yoosuf wrote on December 30, 2010, at 3:33 pm:

wow, nice collection, CSS3 and HTML5 rocks

12

Kenneth Nordahl wrote on December 30, 2010, at 10:35 pm:

Ive used media queries on my site to enable 3D transform on browsers that supports that. I use my own fluidCOLUMN system to dynamically change the site width depending on the viewport size.

13

Zoe Gillenwater wrote on January 03, 2011, at 9:22 am:

Right. There’s also a script you can just plug in to make your media queries work in IE 8 and earlier. It’s used in the Little Pea Bakery example shown.

14

Must Read Links for Web Designers and Developers – Volume 2 | Tech King wrote on January 07, 2011, at 10:01 am:

[...] Examples of Flexible Layouts With CSS3 Media Queries [...]

15

Boost Inspiration wrote on January 07, 2011, at 5:17 pm:

Very nice read. Excellent article with perfect examples

16

Responsive Web Design: What It Is and How To Use It - Smashing Magazine wrote on January 13, 2011, at 6:41 pm:

[...] [...]

17

ThemeDigg » Responsive Web Design: What It Is and How To Use It wrote on January 13, 2011, at 11:15 pm:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

18

Responsive Web Design: What It Is and How To Use It | Remake Wordpress Theme wrote on January 14, 2011, at 1:08 am:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

19

zomigi.com » Free samples of Stunning CSS3 wrote on January 14, 2011, at 5:49 pm:

[...] Chapter 6 is titled “Different Screen Size, Different Design” and teaches you how to restyle an entire page layout to work with different screen sizes using media queries and multi-columns. You can see the example site used in chapter 6, as well as other real web sites using responsive layouts, at my blog post “Examples of flexible layouts with CSS3 media queries.” [...]

20

Responsive Web Design: What It Is and How To Use It | Wbcom Designs wrote on January 15, 2011, at 8:00 am:

[...] [...]

21

Web round up #11: The best responsive web design examples and resources | Mayfield Digital Blog wrote on January 15, 2011, at 11:16 am:

[...] it as a living breathing, fully adaptive design with some well placed HTML and CSS amendments.Examples of Flexible Layouts: Web designer and technical author, Zoe Gillenwater, provides a great overview of adaptive web [...]

22

Xavier Caine wrote on January 18, 2011, at 12:42 am:

In Opera, in wide mode, the sidemenu is so and so and showing on load. Only after hover in most cases will they appear and stay shown.

23

Zoe Gillenwater wrote on January 19, 2011, at 8:46 pm:

Yes, this is a bug I mention in my book. I haven’t tested it yet with Opera 11–have you?

24

Responsive Web Design: What It Is and How To Use It | i know idea wrote on January 20, 2011, at 12:17 pm:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

25

werner wrote on January 21, 2011, at 8:06 am:

Opera 11 wide mode 1200px – sidemenu problem
I mentioned the same problem. What i did, was commenting out position:relative in headerDIV
and for the form-searchDIV i changed right: 0; to right: 6%; to get the correct position for form-search to the right.
This did the job for me in opera.Cannot tell you yet whether this affecting ie.
firefox and safari seems to be correct.

css main settings:
#header {
overflow: auto;
/* position: relative; */
margin: 0 0 20px 0;
padding: 20px 0;
}

#form-search {
position: absolute;
top: 20px;
/*right: 0; */
right: 6%;
}

and many thanks to zoe for this excellent book and examples.

26

zomigi.com » CSS3 book launch event wrote on January 25, 2011, at 10:39 am:

[...] real site’s loading time and appearance before and after CSS3. I also talk in-depth about the example site from Stunning CSS3 that uses media queries to improve its appearance and usability at different screen [...]

27

Zoe Gillenwater wrote on January 26, 2011, at 3:17 pm:

Oops, strike my previous comment. I wasn’t paying close attention and thought you were commenting on a different, older post on my site! Sorry about that! Yes, cssgrid.net uses media queries itself in addition to providing CSS for you to implement media queries on your own sites, similar to the Less Framework.

28

Responsive Web Design: What It Is and How To Use It | Vietcolor wrote on February 13, 2011, at 3:03 pm:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

29

zomigi.com » There’s already a book on responsive web design. Want to win it? wrote on February 22, 2011, at 9:50 am:

[...] liquid/fluid designs that make use of media queries to adapt to the user’s screen has taken off. I’m ecstatic about this. I’ve been designing and building primarily liquid sites for [...]

30

Ryan Battles wrote on July 01, 2011, at 5:29 pm:

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

31

Responsive Web Design: What It Is and How To Use It | Sejix Technologies Blog wrote on July 12, 2011, at 5:57 am:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

32

???????web??????(responsive web design) | ???????? wrote on July 18, 2011, at 11:57 pm:

[...] examples of??????layouts with css3 media queries??? [...]

33

Responsive Web Design: What It Is and How To Use It - Cosmeen.ro wrote on July 19, 2011, at 2:31 am:

[...] [...]

34

Brave Knowledge » Responsive Web Design: What It Is and How To Use It wrote on September 12, 2011, at 4:51 am:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

35

plumbing lancaster wrote on September 15, 2011, at 11:55 am:

Awesome job on this post.

36

??????? ??? CSS3: ??? Media Queries wrote on September 16, 2011, at 11:38 am:

[...] Zomigi [...]

37

Responsive Web Design: What It Is and How To Use It | Designer Malaysia wrote on October 14, 2011, at 8:57 pm:

[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]

38

zomigi.com » Media queries presentation at indieconf wrote on November 19, 2011, at 12:32 pm:

[...] “Examples of flexible layouts with CSS3 media queries” by me [...]

39

achat hundertwasser wrote on January 09, 2012, at 12:24 am:

nice post!
i cant share this link : https://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries
am i doing it wrong ?

40

Zoe Gillenwater wrote on January 10, 2012, at 11:14 pm:

Not sure what you mean about not being able to share this link? Share it where and how?

41

threadsfaisal wrote on January 24, 2012, at 7:11 am:

have done great thanks

42

Feel Good Thursday | wrote on February 10, 2012, at 4:40 am:

[...] More Reading: A LIST APART: RESPONSIVE WEB DESIGN ZOMIGI: EXAMPLES OF FLEXIBLE LAYOUTS WITH CSS3 MEDIA QUERIES [...]

43

blogspot geek wrote on March 21, 2012, at 9:24 pm:

Pretty! This was a really wonderful article. Many thanks for providing these details.

Leave a Reply

Required fields are marked with an asterisk (*). You may use these tags in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>