Quite frankly, you know that a session for An Event Apart will be awesome when the speaker’s blog is unstoppablerobotninja.com and his Twitter handle is simply @beep. Ethan Marcotte, who strikes me as the web equivalent of a Zen master, spoke to us about “A Dao of Flexibility.” He recently wrote a ground-breaking article for A List Apart, Responsive Web Design, so I suspected this would be a pretty profound session. He did not disappoint.
The session description is as follows:
“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.
Think that sounds a little deep? It is. This session had a very calm, philosophical—dare I say Zen?—feel. Excellent.
Ethan began by pointing out that many of our terms in web design come from print, perhaps nothing more profound than the word canvas. When we speak of designing for a canvas, we begin to set boundaries, limits. However, our real canvas is not the dimensions we set in Photoshop. It is the browser window, with all of its various sizes and quirks.
Instead of seeing the uncertainty of the browser as its greatest weakness, we should see it as its greatest strength. Accept the ebb and flow.
Mobile web access will eclipse desktop web access in 3 to 5 years. Mobile Webkit growth is off the charts compared to previous browsers.
People want an iPhone website. However, at what point do we quarantine off every single device with its own method of accessing the web? Instead, perhaps we should just see websites, with all their potential flexibility.
Ethan is fascinated with responsive architecture. These buildings re-position themselves to be more useful depending on which people occupy that space or other factors. He gave the example of a conference room where the glass walls became opaque after a certain number of people enter the room, for the sake of privacy. Ethan quoted Michael Fox and Miles Kemp, from Interactive Architecture: “A truly interactive system is a multiple-loop system in which one enters into conversation: a continual and constructive information exchange.”
Ethan’s response to this is what he terms responsive web design, which uses a flexible grid with flexible images and incorporates media queries to create a responsive, adaptive layout.
As an example, take a look at the demonstration site Ethan created, robot-or-not.com. For all those out there who worry whether somebody is a robot. Or not.
Ethan then reviewed grid-based design and spoke about a few proponents, including Mark Boulton. In his opinion, most early grid-based sites had one problem: they relied upon a fixed-width. So the questions is, how do we make a fluid grid usable on any device or browser width?
Em-based designs set widths based on typographic sizes. This allows pixel-level control while retaining accessibility and text resizing for IE. (Note: I’m a pretty big fan of em-based designs for that reason, and because they allow you to control line-length for better readability.)
Ethan suggested setting a base font-size of 100%, which is approximately the equivalent of 16px.
(Personally, I find that to be pretty large and typically use 76% to get down to 12px. Another approach is to set a base font-size of 62.5%, which results in 10px. This is smaller than you want for body copy, but it is easy math to change to any other font sizes, with a subsequent reduction in rounding errors. I digress.)
Here’s the key math concept to remember: Target divided by context = result. So let’s say that within the context of a 960 pixel wide div, you thought a column of 192 pixels would do the trick. Dividing 192 pixels by 960 pixels gets you 20%. Thus, instead of setting the width at 192 pixels, or whatever the equivalent would be in ems, you can instead set the width to 20%, which will be flexible as the browser canvas changes.
When determining how to set up your layout, also make sure to keep in mind the golden mean: this is keyed into nearly every aspect of nature. Within a space, if you divide it into two parts, the larger being 61.8% and the other 38.2%, it may well feel extra harmonious due to the usage of the golden mean. For a quick and dirty calculation, you can use two-thirds or three-fifths.
Then, Ethan demonstreated the first real mind-blowing technique. Place an <img> within a <div> of a certain width. Then, within your CSS, target the image, with img { max-width: 100%; }. This ensures images never exceed the width of their containers and forces image resizing live in the browser based on the size of the window. You can see this at work on robot-or-not.com.
If you really want to melt your mind into a puddle, you can use the same max-width: 100% technique with YouTube videos as well, resizing video on the fly.
Unfortunately, max-width won’t work in IE6 and below. However, you can use width: 100% instead. Make sure to use this judiciously, within conditional comments, for example.
Another browser problem is that resizing in IE7 and below can result in “janky” text. Ethan’s solution is a script that uses IE’s AlphaImageLoader() property. You are free to use this fluid images script.
For truly responsive design, however, Ethan believes that simply resizing elements is not enough. Certain layouts won’t work just because they’re smaller. The actual layouts need to change as well.
The question is: how do you target a particular device. Old methods included looking at the header information in a page or media types. More recently, however, the W3C developed media queries as a much better way to target.
Attributes you can target in a media query include:
- height
- width
- device-height
- device-width
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
- scan
- grid
Media queries are key to delivering a responsive web design. Begin by designing for an optimal viewing resolution. Then, view the design in various resolutions and spot check the bugs. This allows you to enhance that default design with alternate layouts that adapt and respond to devices and desktops.
Again, you can see this approach at play by visiting robot-or-not.com. Resize the window to see how the layout shifts at certain breakpoints.
Modern desktop browsers and mobile Webkit all support media queries. OperaMobile can vary. Older versions of Safari, Firefox and IE are problematic. However, you can always use a script, such as the one available at code.google.com/p/css3-mediaqueries-js/ to backport this functionality to older browsers.
Others are starting to use these techniques, including SimpleBits.com and HicksDesign.co.uk.
Responsive web design is about providing different layouts for different contexts, but this goes beyond just changing layouts based on window or device size. Typography can change as well.
As always with browser support problems, JavaScript libraries can help plug holes in older browsers.
Ethan’s challenge to us is to design for this flexibility and to accept the ebb and flow of things.
My take
The idea of varying your layout based on the browser size or device has been around for a while, but this particular method of pretty radical layout rearrangements at certain breakpoints feels pretty groundbreaking to me.
The challenge and concern I’ve always had with flexible layouts has been extreme variations in line length impacting readability. Having just a few words in a line or far more characters than normal can really impact how easy it is to read content. I discussed this with Ethan later, and he pointed out that he had seen some studies indicating this is not as much of a problem as people think, because our brains rely more upon scanning text on the web rather than reading it.
It strikes me that one way to address this particular concern is to combine responsive typography with responsive layouts. Within certain limits, change the font size along with the layout changes in browser size to keep line lengths somewhat reasonable. If done poorly, this could result in even worse readability, of course. I may need to experiment.
Overall, however, I think that the responsive design concept Ethan has articulated is probably one of the best innovations in web design in years, hands-down. Kudos to his brilliance! I almost fear he is an unstoppable robot ninja web designer sent from the future…