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?
- 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.