An Event Apart: A Dao of Flexibility

by November 3, 2010

In his A Dao of Flexibility talk at An Event Apart in San Diego, CA Ethan Marcotte walked through a number of techniques for creating context-sensitive Web designs that work across multiple devices and screen resolutions effectively. Here's my notes from his presentation:

  • The more tightly you try to control something the more you ultimately begin to loose control. There is a tension between how we’ve tried to develop for the Web and how the Web should be.
  • Most terms used to describe Web design stem from the world of print. The most important concept may be the canvas. It creates a boundary of where your design can go.
  • Instead of seeing the uncertainty of the browser as its greatest weakness, we should see it as a greatest strength. We should embrace the medium and accept the ebb and flow of things.
  • The number of ways/devices that allow us to connect to content online is unprecedented. Mobile Web access is going to eclipse desktop Web access in 3 to 5 years. The iPhone and iPod Touch have outpaced the adoption AOL and Netscape dramatically.
  • Are we going to develop a quarantined Website for every device or will we develop a flexible system that works appropriately for several experiences?

Responsive Design

  • Responsive architecture tries to challenge the permanence of physical spaces. Buildings, walls, and physical elements can adjust over time. This is a continual and constructive information exchange. The space and the occupants should both inform each other. How can a space redefine itself to meet the needs of the people that occupy it?
  • Responsive Web design tries to build on these principles through three basic components: a flexible grid (and flexible images) that incorporates media queries to create responsive, adaptive designs.
  • The flexible grid: uses proportional healing to adapt. Designers argued that a rational design grid framework would help layout and readers. The problem was all these grids were fixed-width.
  • How do we take something designed in an image editor and allow it to grow and breathe within the browser window?
  • Steps in converting a layout: identify different kinds of elements (headline, article, etc.); define a simple mark-up structure based on these elements; set basic presentation styles for the content; apply more detailed styles to these core elements.
  • By default most browsers ship with 16pixels set as default font size. Set fonts to 100% in a default style sheet so that you can scale your content from this baseline.
  • Every single element in a grid can be specified proportionally. “Target divided by context equals result” can help you set ratios for the elements of your site. Use ems for font sizing. To get the em size that you want instead of pixels, you divide the target size by the context font size. This will give you the new em value to use. Don't worry about decimals, you can drop those right in.
  • We’ve been focused on pixel-based sizing but ratios are more flexible across the multiple devices designers need to support.
  • Instead of setting widths in pixels, set them in proportions.
  • You can set images to work in a flexible context by using: img {max-width: 100%} This means the image will never exceed the size of its containing element (in modern browsers). This rule extends well to other forms of media as well like videos.
  • Max-width is not supported in IE6 and lower. There are a couple of ways to deal with this. One uses a separate IE6 style sheet to set images and videos to width: 100%. This is a bit dangerous so tread carefully.
  • Internet Explorer’s proprietary CSS filters can help make resized images look good in IE7. AlphaImageLoader clears up artifacting. There is no way to fix the artifacting issue in FireFox 2.

    • Media Queries

    • No design, flexible or fixed scales well beyond the context in which it was designed. Issues especially start to show up when you change form factors (mobile, TV). How do our designs respond to different devices and resolutions?
    • CSS2 defined media types to load in different style sheets appropriate for a context. This specification was not really embraced.
    • Media queries are like media types on steroids. These query for media parameters and serve up different CSS. You can detect colors, orientation, aspect ratios, and more. Most mobile and modern browsers support media queries. Older browsers like IE 8 and below do not support media queries. CSS3-medaqueries.js script can provide support in older browsers.
    • Media queries allow you to design for optimal viewing resolutions. Enhance the default design with alternate layouts that adapt and respond to devices.
    • Multiple media queries can inherit from one another. When you have a max-width rule for 320px and 640px, the smaller one will render the 640 rules as well because both are under 640px.
    • You can see Ethan’s flexible designs at Robot or Not
    • Consider your reference resolution: what best supports your design? Today you might want to start from mobile first (optimized for smaller screens) and use media queries to enhance layouts. Do you have shared goals between your viewing contexts (mobile, desktop, TV)? If so... responsive design might be the right solution for you.
    • The use case for fixed width designs is running its course. Design for the flexibility inherent in the medium.