New 
December 2008 Media queries presentation at indieconf
Download the slides for my presentation on CSS3: Using Media Queries to Improve the Web Site Experience for indieconf, as well as get links to related resources on media query techniques, tools, and inspiration.
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
Related Posts:
My recent posts
- Web accessibility presentation and resources
- Download the slides for my presentation on Web Accessibility for the Charlotte User Experience group, as well as get links to related resources on accessibility techniques and tools.
- Essential considerations for crafting quality media queries
- Learn what you need to know to set up media queries that maximize efficiency and robustness for your particular project. There are pros and cons to making your media queries embedded versus external, overlapping versus stacking your media queries, starting with mobile versus desktop styles, and using conditional comments versus JavaScript to add support for IE 8 and earlier versions.
- Videos of screen readers using ARIA, updated
- Recordings of screen readers using web page components that do and do not make use of WAI-ARIA can be a good educational resource for why ARIA is important to accessibility. Here are all the videos of such demos that I’ve found.
- A few links: CSS and accessibility
- A few links to handy articles from 456 Berea Street related to CSS and accessibility: using list-style:none, using display:table, and styling buttons to look like links.
- IE 7 button text redraw bug
- Internet Explorer 7 has a bug where, when it redraws the text of buttons after scrolling them out and then back into the viewport, lines of pixels are missing from the text. I can’t figure out a fix and need some help.