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.
- Hicksdesign
- UX London
- St. Paul’s School
- CSS-Tricks
- Yiibu
- Sick Designer
- Ethan Marcotte
- SimpleBits
- Science Hack Day
- Salter Cane
- Huffduffer
- Adactio
- mindgarden
- dConstruct 2010
- edgeofmyseat.com
- Daniel T Ott
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:
- Media Queries gallery
- Web round up #11: The best responsive web design examples and resources
- Responsive Web Design: What It Is and How To Use It
Also, I’m bookmarking sites that I find to be nice examples of media queries on Delicious.
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
[...] 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 » [...]
I vote Andy Taylor’s CSSgrid (cssgrid.net) to be added Zomigi. It’s most-impressive.
Yes, cssgrid.net looks cool! This blog post is older than it is, which is why it’s not in the list.
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.
Thanks a lot Zoe. That is a great piece of information.
That looks interesting, too:
http://lessframework.com/
Fluid, uses media queries, uses golden ration.
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!
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.
[...] 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. [...]
[...] 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. [...]
@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.
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.
wow, nice collection, CSS3 and HTML5 rocks
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.
[...] Examples of Flexible Layouts With CSS3 Media Queries [...]
Very nice read. Excellent article with perfect examples
[...] [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] 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.” [...]
[...] [...]
[...] 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 [...]
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.
Yes, this is a bug I mention in my book. I haven’t tested it yet with Opera 11–have you?
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
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.
[...] 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 [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] 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 [...]
Another nice example of a responsively designed website is the designer/developer job board at http://www.findbacon.com
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] examples of??????layouts with css3 media queries??? [...]
[...] [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
Awesome job on this post.
[...] Zomigi [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] “Examples of flexible layouts with CSS3 media queries” by me [...]
nice post!
i cant share this link : https://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries
am i doing it wrong ?
Not sure what you mean about not being able to share this link? Share it where and how?
[...] Zomigi [...]
have done great thanks
[...] More Reading: A LIST APART: RESPONSIVE WEB DESIGN ZOMIGI: EXAMPLES OF FLEXIBLE LAYOUTS WITH CSS3 MEDIA QUERIES [...]
Pretty! This was a really wonderful article. Many thanks for providing these details.
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] “Examples of flexible layouts with CSS3 media queries” by me [...]
[...] “Examples of flexible layouts with CSS3 media queries” by me [...]
[...] is Fool’s Gold, Cloud Four Designing for a Responsive Web with Heuristic Methods, Design Reviver Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater The Big Web Show #9: Responsive Web Design, 5by5 Studios How to Use CSS3 [...]
[...] Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater [...]
[...] “Examples of flexible layouts with CSS3 media queries” by me [...]
[...] a new CSS web page layout technique using media queries seems quite promising in making things easier. It allows developers to create pages that change [...]