Today I spoke at the STC Summit in Chicago (my hometown) on CSS3, Media Queries, and Responsive Design. It’s the latest evolution of the talk I last gave at indieconf last November. 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, from small mobile devices to large TVs.
You can view the slides on SlideShare, or download the slides here:
CSS3, Media Queries, and Responsive Design (PDF, 1.3 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
- “Device-Agnostic Approach To Responsive Web Design” by Theirry Koblentz for Smashing Magazine
- “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
- “Why images appear blurry on mobile devices” by Christopher Cohen
- “Multi-Device Layout Patterns” by Luke Wroblewski
- “Responsive navigation patterns” by Brad Frost
- “Which responsive images solution should you use?” by Chris Coyier
- “RESS Multi-Device Design Resources” by Luke Wroblewski