Today I spoke at the online conference Responsive Web Design Summit 2012 on Building Responsive Layouts. 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 fix media query issues in iOS and IE 8 and earlier.
You can view the slides on SlideShare, or download the slides here:
Building Responsive Layouts (PDF, 2.4 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
- 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