Responsive Web Design

Ethan Marcotte has recently published a fantastically useful book for web developers, Responsive Web Design, which discusses and demonstrates the idea that if you built a site on a flexible grid with flexible images and specific media queries for different viewports and/or total screen areas, we can serve up a site that will be visually optimized for each device (iPad, Widescreen Monitor, Android, Blackberry).

For example, you specify that the font-size will be 90% for monitor sizes up to 1024 pixels. Any bigger than that and the regular style sheet will be used and the font-size will be whatever we specified there, (e.g. 120%). Oh and all of this without jQuery or javascript at all. (Except for any support for IE6, for which I don’t bother anymore.)

@media screen and (max-width: 1024){ body { font-size:90%;}}


Interest