Building Responsive Layouts presentation at Responsive Web Design Summit

Download the slides for my presentation on Building Responsive Layouts for the Responsive Web Design Summit 2012, 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 the online conference Responsive Web Design Summit 2012 on Building Responsive Layouts. 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 fix media query issues in iOS and IE 8 and earlier.

You can view the slides on SlideShare, or download the slides here:

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

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?

7 Responses to “Building Responsive Layouts presentation at Responsive Web Design Summit”

  1. ganapathi

    Hi….

    I want to know about adaptive images in responsive and also my responsive web template text will be broken and struggling….help me..

    Reply
  2. 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.

    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>