Today I spoke at CSS Dev Conference on Building Responsive Layouts. (Yes, I’m in Hawaii. Don’t hate me.) It’s an updated version of the talk I gave at Responsive Web Design Summit. I talked about two of the core components of responsive web design: fluid/liquid layouts and media queries. Much of the talk was focused on fluid layout techniques and tips: how to build a basic two- or three-column all-fluid layout, how to create fluid grids with fixed-width margin and padding, how to create a hybrid fixed-fluid layout, and how to calculate nested width, margin, and padding values. I then walked through adding media queries onto the fictional Little Pea Bakery site from my book Stunning CSS3 to demonstrate how to make a layout responsive to a variety of screen sizes and devices. Finally, I covered how to use the viewport meta tag and @viewport CSS rule to make media queries take effect in mobile browsers and how to use conditional comments or JavaScript to work around the lack of support for media queries in IE 8 and earlier.
You can download the slides here, or view them on Slideshare:
Building Responsive Layouts (PDF, 3.6 mb)
Here are several links to related resources, some of which are in the slides plus many that were not but which I recommend and think you’ll find useful.
Responsive web design link hubs
- This is Responsive by R/GA
- Responsive Resources by Brad Frost
- Responsive WebDesign by gonzodesign for Scoop.it
- Responsive web design interactive infographic by Template Monster
- “50 fantastic tools for responsive web design” by Denise Jacobs and Peter Gasston for .net Magazine
- “Responsive Web Design Guidelines and Tutorials” by Smashing Magazine
Responsive web design articles, tutorials, and tools
- “Essential considerations for crafting quality media queries” by me
- Excerpt of Chapter 6 of Stunning CSS3 on media queries by me
- “Responsive Web Design” by Ethan Marcotte for A List Apart
- “Adaptive layouts with media queries” by Aaron Gustafson for .net Magazine
- “Design for a Target Experience First” by Nathan C. Ford
- The Goldilocks Approach by Front design agency
- “Device-Agnostic Approach To Responsive Web Design” by Theirry Koblentz for Smashing Magazine
- “Why images appear blurry on mobile devices” by Christopher Cohen
- “Which responsive images solution should you use?” by Chris Coyier
- “RESS Multi-Device Design Resources” by Luke Wroblewski
- Gridpak responsive grid generator by Erskine Design
Mobile viewports
- “A pixel is not a pixel” by Peter-Paul Koch (PDF of presentation slides)
- “An introduction to meta viewport and @viewport” by Andrea Bovens for Dev.Opera
- iOS orientation change zoom bug
- “IE10 Snap Mode and Responsive Design” by Tim Kadlec
Dealing with IE 6-8 support
- Respond script for media query support by Scott Jehl
- css3-mediaqueries.js script for media query support by Wouter van der Graaf
- box-sizing polyfill for box-sizing support by Christian Schaefer
- “Windows mobile media queries” by Jeremy Keith
- “Targeting mobile-optimized CSS at Windows Phone 7” by IE Mobile Team
Fluid/liquid layout
- Flexible Web Design: Creating Liquid and Elastic Layouts with CSS book by me
- “70+ essential resources for creating liquid and elastic layouts” by me
- “Pros And Cons Of 6 CSS Layout Patterns: Part 2” by Steven Bradley
- “The Definitive Guide to Using Negative Margins” by John Imbong for Smashing Magazine
- “Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess” by Kyle Weems
- “Responsive Design’s Dirty Little Secret” by John Albin Wilkins
- “Proportional Grids” by Matt Berridge
- Hybrid fluid-fixed demo using display:table by Moople
- “* { box-sizing: border-box } FTW” by Paul Irish
Responsive web design inspiration and design patterns
- Mediaqueri.es gallery
- My media query inspiration bookmarks on Gimmebar and delicious
- My liquid layout inspiration bookmarks on Gimmebar and delicious
- “Examples of flexible layouts with CSS3 media queries” by me
- Responsive Patterns collection by Brad Frost
- “Multi-Device Layout Patterns” by Luke Wroblewski
- “Responsive navigation patterns” by Brad Frost
- “Complex navigation patterns for responsive design” by Brad Frost
**sigh**
Does nobody ever check their links or downloads to make sure they work before they publish them anymore?
Rob, I was on really horrible, awful, hotel wi-fi at the time—hence the problem to begin with, and my inability to both check and fix it. As soon as I found out about the problem I fixed it.
Thanks for this article. I’ll say I am a little jealous to all those that were accepted as speakers for CSS Dev Conf but that’s not the point of my comment.
I tried to download your pdf to your presentation and I believe it is corrupt as it won’t load.
Thanks,
Ralph
The PDF should be fixed now. Sorry about that!
Hi!
Responsive layout is new feature of CSS that are widely used for creating layout for different screen such as mobile phones, tablet or desktop. So thanks for sharing
your knowledge. I have found few other links that have described with good explanation and proper sample. I hope following links helpful for beginners.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://www.mindstick.com/Articles/54a6de62-0aa5-45a7-8a1a-9cc05035950d/default.aspx?Responsive+layout+using+CSS3