With an increasing amount of web devices (mobile, tablets, higher resolution screens), web designers are faced with a challenge: how to respond well to all? Ethan Marcotte's book "Responsive Web Design" provides a potential shift in how we design for the web!
When I started to design for the web some years ago, I loved fixed width designs. But most fixed width pages aren't easily readable on a mobile device. New devices are invented every year and the number of pages accessed through mobile browsers keeps increasing rapidly! So I think this book is a must read for each web designer. The book is well written, with clear examples, and you can probably digest the 141 pages in one or two days.
Ingredients for a responsive design
Print and web are inherently different media, yet up until recently a lot of sites were build as if they were for the print medium. I like the approach Marcotte introduces: one responsive web design instead of different designs for different devices. According to Marcotte the following 3 elements make up for responsive web designs:
- A flexible, grid-based layout,
- Flexible images and media,
- Media queries (CSS3)
Chapters 2,3 and 4 deal with these. The last chapter provides additional info on the responsive design cycle and progressive enhancement.
1. The flexible grid (and fonts)
Before touching the grid design, we should set up the font-size to 100% as a base and use "ems" to size text up or down. What the grid is concerned Marcotte explains how to go from pixels to percentages based on the width values. You can start with pixels and calculate the percentages with the formula "target / context = result", so if a .blog div is 900px (target) and lives in a body of 960px (context), the .blog div should be 900/ 960 = 0.9375 = 93.75%. Then for the divs that live in .blog, .blog is the context so a left column would be 530/900, etc. The same applies for flexible margins (gutters between blocks).
2. Flexible images
A neat trick is to give the img a max-width of 100% to never cross the width of the div it lives in. There are some issues (distorted images) with IE < 7, so you can use AlphaImageLoader to correct this. The author further explains interesting techniques with "overflow: hidden".
3. Media queries
As of CSS2 you could define media types: all, screen, print, handheld, etc. As this was very generic ("handheld" for iphone and older phones), W3C came up with something better in the CSS3 spec: media queries.
Apart from the media type, media queries also detect the physical characteristics of the devices or browsers that render our content. A typical media query is "@media screen and (min-width: 1024px) { .. css rules .. }": this not only requires the screen medium type, but also a viewport of at least 1024px wide, for the CSS rules to be applied.
This is awesome, because now we can target very specific conditions. You can use the min-width and max-width conditions on a variety of features, for example: width, height, aspect-ratio, resolution, grid and more (see page 76-78). And they can be chained together! For example: "@media screen and (min-device-width: 480px) and (orientation: landscape) { ... }"
The most important point is that media queries are useful if you have the groundwork set up well: a liquid layout, flexible fonts and images. The best way is to follow the book step-by-step applying the examples on your own "responsive web design".
Some examples of responsive design
Four sites worth studying (just resize your browser window to see the amazing effect - wow) :
- Ethan Marcotte (book author)
- The book's example site
- Dan Cederholm
- Happy Cog
Mobile first
A good approach these days is to start designing for the smaller mobile canvas and progressively enhance with media queries targeting higher resolutions with "min-width" ("resolution breakpoints"). I probably will experiment with this approach designing future sites (Ethan convinced me!).
What about you? Let me know what experiences you have designing "responsive web designs" ...
