Breaking Dev: Real World Responsive Design

by Luke Wroblewski April 21, 2011

At the Breaking Development Conference in Dallas TX, Stephen Hay talked about the realities of designing for different device experiences and the potential role of media queries and responsive design in his presentation “Real World Responsive Design”. Here’s my notes from his talk:

The Role of Responsive Design

  • Ethan Marcotte’s responsive Web design techniques have been misunderstood by people who think media queries will magically transform their Web site into mobile site.
  • Responsive Web Design is a combination of fluid grids that change based on size of a viewport and media queries (essentially feature detection to determine available screen capabilities).
  • Are media queries a silver bullet or fool’s gold? Neither. There are a lot of considerations that determine if they can work on mobile like screen size, resolution, pixel density, @media support, performance.
  • Design is thinking about content and how to put it together. You need to focus on the whole. Layout does not equal design.
  • It’s important to not only think about layout. Layout is one component of design. It’s not everything.
  • Responsive design is a good first step: making things work across screens. Perhaps it is better labeled “adaptive layout”. Media Queries are a tool not a silver bullet.
  • We need a clearer picture of what we mean by context and design. Are we just discussing layout? Or broader circumstances of design?
  • Context should be broken down into all the little things it needs. Don’t read minds. Test things out. Ask people –do usability testing. Get actual information to support your decisions.
  • Let’s turn adaptive layout into real responsive design. There’s more involved than just the visual elements.

Real World Solutions

  • Mobile First: is structured content first. This is your baseline. Without even caring what it looks like. Don’t forget about progressive enhancement now that we are focused on mobile. It can work.
  • Embrace uncertainty. The times of trying control every pixel are over. Use fluid grids not several fixed grids. Allow things to expand & contract to your environment. With fluid grids you only need 2-3 media queries. Fluid grids mean less media queries.
  • SVG doesn’t work everywhere but it would be great for solving image problems with logos, icons, etc. Even with SVG, though photos are still a bit of a problem

In the Future

  • We may have server-side solutions for device features.
  • With CSS3 template layout module you can define different display structures for elements on a page. You can draw out your entire Website.
  • CSS3 Flexible Box Layout Module (flex box): box-orient in Webkit allows you to set DIVs to display in a box with a specific orientation: horizontal or vertical. This is implemented but recently the spec was re-written. You can use the current implementation now but it may change.
  • The order you have elements in source doesn’t matter for flex box –you can change it around. Using groups you can adjust order, width, flexibility, etc. based on devices.
  • CSS3 Grid layout: works like table layouts. You just have to change templates code to change entire layout. Spec came out recently.