Responsive web design presentation at STC Summit
Download the slides for my presentation on CSS3, Media Queries, and Responsive Web Design for the STC Summit 2012, as well as get links to related resources on media query and responsive web design techniques, tools, and inspiration.
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
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 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
Stunning CSS3: A Project-based Guide to the Latest in CSS
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
[...] is the original post: zomigi.com » Responsive web design presentation at STC Summit Tags: design, download-the-slides, esentation-on-css3, media-query, presentation, responsive, [...]
[...] Responsive Web Design Presentation At STC Summit [...]
hey thanks for the post i like the blog
do you think the responsive web design is here to stay as the standard for mobile web design? I would like to know what you think, also, we have also posted a few responsive web design pdfs that may be of interest: http://www.responsivewebdesignblog.com/2012/08/three-free-responsive-web-design-pdf-books/
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.