Today I had the pleasure of speaking at indieconf, a conference for independent web developers and designers, right here in my backyard of Raleigh, NC. I talked about the basics of CSS3 media query syntax but focused on the challenges and considerations that go into building a site from scratch with media queries to power the layout. I used the fictional Little Pea Bakery site from my book Stunning CSS3 as a demo for how to adapt the CSS to make better use of the space at different viewport widths. I covered some tips for making your design work on mobile devices and even old versions of IE.
You can view the slides on SlideShare, or download the slides here:
CSS3: Using media queries to improve the web site experience (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.
Media query 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
- “Design for a Target Experience First” by Nathan C. Ford
- The Goldilocks Approach by Front design agency
- “21 top tools for responsive web design” by Denise Jacobs for .net Magazine
- “Responsive Web Design Guidelines and Tutorials” by Smashing Magazine
- “An introduction to meta viewport and @viewport” by Andrea Bovens for Dev.Opera
- “Why images appear blurry on mobile devices” by Christopher Cohen
Dealing with IE 6-8 support
- Respond script by Scott Jehl
- css3-mediaqueries.js script by Wouter van der Graaf
- “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
Media query inspiration
- Mediaqueri.es gallery
- My media query inspiration bookmarks on delicious and Gimmebar
- My liquid layout inspiration bookmarks on delicious and Gimmebar
- “Examples of flexible layouts with CSS3 media queries” by me