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

Mobile viewports

Dealing with IE 6-8 support

Fluid/liquid layout

Media query inspiration

Did you like this?

6 Responses to “Responsive web design presentation at STC Summit”

  1. Avinash

    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.

  2. Christian P

    Really nice list of resources…. and the torture of every web developer can but be “Dealing with IE 6-8 support” AAAAARRRRRGGGGGGG!!!!!

    I wish they would just go away!


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>