Building Responsive Layouts presentation at Responsive Web Design Summit
Download the slides for my presentation on Building Responsive Layouts for the Responsive Web Design Summit 2012, as well as get links to related resources on fluid layouts, media queries, and other responsive web design techniques, tools, and inspiration.
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
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
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
- 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
- “Multi-Device Layout Patterns” by Luke Wroblewski
- “Responsive navigation patterns” by Brad Frost
- “Complex navigation patterns for responsive design” by Brad Frost
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
This was a very cool presentation from Zoe during the #rwdsummit.
[...] Building Responsive Layouts presentation at Responsive Web Design On August 28, 2012 / Web Design Fort Lauderdale / Leave a [...]
Hi….
I want to know about adaptive images in responsive and also my responsive web template text will be broken and struggling….help me..
Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsivetools. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.
“zomigi.com ? Building Responsive Layouts presentation at Responsive Web Design Summit” was
indeed a truly pleasant post, . I hope you keep creating and
I’ll try to keep on viewing! Thanks a lot ,Corazon
[...] Building Responsive Layouts presentation at Responsive Web Design Summit [...]