Not long ago, designers optimized their websites for a single page width, and worried about supporting only two or three PC web browsers. How should web designers respond to today's world where mobile web devices are proliferating in dozens of different resolutions? In the fourth book from the A Book Apart collection, Ethan Marcotte outlines the Responsive Web Design approach that allows a website to embrace users' needs on any size display, all with the same underlying HTML.
Responsive web design involves implementing three components in a site's CSS files. Flexible grid layouts use percentage widths to maintain a page's proportions over small changes in resolution (like all the slightly different mobile screens out there). Next, fluid images scale to the containing layout. Finally, media queries rearrange page layouts on a macro level for classes of Internet devices such as phones, tablets, and PCs.
Together these techniques can make the web accessible and usable on almost any Internet device available. Examples of websites that have gone responsive include ThinkVitamin and the Boston Globe. However, the approach is not for everyone. Advertising-supported websites, for example, often are contractually prohibited from resizing or moving ad placements.
What sets this short book apart from a CSS manual is the author's empathy for traditional web designers grappling with the mobile web's ascendancy. Marcotte shows why mobile content should be different, and how to delight mobile users without coding an app or a separate mobile site. If you're a web designer or developer this book will have you thinking "mobile first!" on your next project.
Book website: http://www.abookapart.com/products/responsive-web-design
Summary article: http://www.alistapart.com/articles/responsive-web-design/
Sample responsive website (pictured): http://responsivewebdesign.com/robot/