Building Responsive Layouts presentation at CSS Dev Conf

Download the slides for my presentation on Building Responsive Layouts for the CSS Dev Conference, as well as get links to related resources on fluid layouts, media queries, and other responsive web design techniques, tools, and inspiration.

Today I spoke at CSS Dev Conference on Building Responsive Layouts. (Yes, I’m in Hawaii. Don’t hate me.) It’s an updated version of the talk I gave at Responsive Web Design Summit. I talked about two of the core components of responsive web design: fluid/liquid layouts and media queries. Much of the talk was focused on fluid layout techniques and tips: how to build a basic two- or three-column all-fluid layout, how to create fluid grids with fixed-width margin and padding, how to create a hybrid fixed-fluid layout, and how to calculate nested width, margin, and padding values. I then walked through adding media queries onto the fictional Little Pea Bakery site from my book Stunning CSS3 to demonstrate how to make a layout responsive to a variety of screen sizes and devices. Finally, I covered how to use the viewport meta tag and @viewport CSS rule to make media queries take effect in mobile browsers and how to use conditional comments or JavaScript to work around the lack of support for media queries in IE 8 and earlier.

You can download the slides here, or view them on Slideshare:

Building Responsive Layouts (PDF, 3.6 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.

Responsive web design link hubs

Responsive web design articles, tutorials, and tools

Mobile viewports

Dealing with IE 6-8 support

Fluid/liquid layout

Responsive web design inspiration and design patterns

Did you like this?

6 Responses to “Building Responsive Layouts presentation at CSS Dev Conf”

  1. Rob

    **sigh**
    Does nobody ever check their links or downloads to make sure they work before they publish them anymore?

    Reply
    • Zoe Gillenwater

      Rob, I was on really horrible, awful, hotel wi-fi at the time—hence the problem to begin with, and my inability to both check and fix it. As soon as I found out about the problem I fixed it.

      Reply
  2. Ralph Whitbeck

    Thanks for this article. I’ll say I am a little jealous to all those that were accepted as speakers for CSS Dev Conf but that’s not the point of my comment.

    I tried to download your pdf to your presentation and I believe it is corrupt as it won’t load.

    Thanks,
    Ralph

    Reply
  3. ezra heywood

    Hi!

    Responsive layout is new feature of CSS that are widely used for creating layout for different screen such as mobile phones, tablet or desktop. So thanks for sharing

    your knowledge. I have found few other links that have described with good explanation and proper sample. I hope following links helpful for beginners.

    http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

    http://www.mindstick.com/Articles/54a6de62-0aa5-45a7-8a1a-9cc05035950d/default.aspx?Responsive+layout+using+CSS3

    Reply

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=""> <strike> <strong>