Virtual Seminar

The How and Why of Responsive Web Design

January 2011 90 minutes

You’ll learn to…

  • Adopt a responsive approach to design
  • Start designing flexible designs
  • Manage different kinds of fixed-width media in a flexible layout
  • Understand what media queries are and how you can use them
  • Adapt your workflow to better accommodate a responsive product
Topics:

The web revels in its ability to defy definition and constraint. These days we design for more devices and browsers than ever before, with viewports getting smaller and larger simultaneously. From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers.

Are your designs ready? How will your designs adapt? You need to think beyond the desktop. Your designs must anticipate and respond to your users’ needs.

Responsive web design is a technique that will help your design scale with the ever-growing array of devices and browsers.

Ethan Marcotte will share ways to combine fluid grids, flexible images, and CSS3 media queries to create more responsive designs. But we’ll also look at ways to determine whether or not a responsive approach is the right one for your project, as well as strategies for creating a more responsive design workflow.

This seminar will show you that a separate “mobile” site isn’t the only option for designing beyond the desktop. Ethan will also give you options, in addition to CSS3 media queries, for building a "mobile"-friendly layout. You’ll see examples from yiibu.com, thinkvitamin.com, hicksdesign.co.uk, and a number of others.

When you apply responsive thinking to the design process, both designers and developers will increase their vocabulary for addressing UI challenges on different devices and viewing contexts.

  • Adopt a responsive approach to design

  • Start designing flexible designs

  • Manage different kinds of fixed-width media in a flexible layout

  • Understand what media queries are and how you can use them

  • Adapt your workflow to better accommodate a responsive product