Book Review: Responsive Web Design

Michael J. Ross writes "With more people accessing the Internet using mobile devices than computers, web designers and developers are challenged to make sites that work well on both categories of hardware — or resign themselves to the greater costs and other disadvantages of maintaining two versions of each web site (a mobile-ready version as well as one for much larger screens). Fortunately, recent advances in web technologies are making it easier to build web pages whose contents and their positioning are automatically modified to match the available screen space of the individual user. These techniques are explored in detail in a recent book, Responsive Web Design, written by Ethan Marcotte, a veteran web designer and developer." Keep reading for the rest of Michael's review.

Responsive Web Design
author	Ethan Marcotte
pages	143 pages
publisher	A Book Apart
rating	9/10
reviewer	Michael J. Ross
ISBN	978-0984442577
summary	A pithy tutorial on responsive web design.

This title was published on 7 June 2011, under the ISBN 978-0984442577, by A Book Apart, as the fourth in their series of "brief books for people who make web sites." On the publisher's page, visitors will find brief descriptions of the book and its author, links to purchase the print and e-book versions (or the two combined, at a substantial discount), and three promotional blurbs also used on the back cover of the print version. The e-book package consists of six files: the book in EPUB, MOBI, and PDF formats; an EPUB document on responsive design for video; a letter from Jeffrey Zeldman (the book's publisher), Jason Santa Maria (its designer), and Mandy Brown (its editor); and the previous five files zipped into an archive. This book is also available in French, perhaps reflecting the publisher's greater awareness of internationalization relative to mainstream technical publishing houses.

Readers of the print version will likely be first struck by its diminutive size — just 143 pages. In fact, the book is so slender that only half of the spine title actually fits on the spine. (It's either a bold design statement against conventional publishing practices, or an even bolder typographical error committed inexplicably by a well-regarded design firm.) Flipping through the glossy pages, readers will also notice the judicious use of text color to indicate HTML and CSS code, and highlighted fragments therein. Even more visually impressive are the full-color screen shots and other figures. The book begins with the previously mentioned letter, as well as a short yet delightful foreword by Jeremy Keith; it ends with the author's acknowledgments, suggested resources, references by chapter, and a suspiciously brief index, not much longer than the author bio that follows it.

The bulk of the information is organized into five chapters — the first of which, "Our Responsive Web," presents a high-level rationale for architecting web sites that can be maximally useful on a wide range of devices, with screen sizes ranging from the smallest found on smartphones, up to widescreen TVs attached to web-enabled game consoles. Throughout the book, to illustrate the principles of responsive design, the author utilizes a fictional example web site, "Robot or Not", designed to assist users in identifying robots masquerading as humans (which would have been helpful to the crew of the spaceship Nostromo!). This short chapter is essentially just an introduction.

The author gets down to business in the second chapter, titled "The Flexible Grid," which demonstrates how grid-based layouts can be used to more easily position page elements for greater visual consistency. He goes into detail in showing how such layouts can be made flexible, with font sizes specified in character widths and positioning specified in proportions of containing elements. Experienced designers will probably not encounter any new concepts in this material. These techniques are extended in the subsequent chapter, "Flexible Images," which explains how to use percentages when working with images (both markup and CSS) and other media types — including workarounds for the browser most despised by web designers, Internet Explorer.

Media queries, introduced to the world in CSS2, are now a key technology in responsive design, and are discussed in Chapter 4, which forms the core of the book. The author shows how to use them to cause the browser to apply CSS rules selectively based upon such factors as the width of the browser viewport. All of the narrative is clear, except for the statement on page 66 that the example web site's logo is "scaled down to a nearly microscopic size" in Figure 4.2, when in fact it appears unchanged. Readers may wonder why — after noting that mobile devices do not consistently use "handheld" or "screen" as their media types — the author does not explain why the recommended media queries use "@media screen," and not "@media all" to be more encompassing. Nonetheless, the discussion of media query techniques is instructive. It continues with a look at how to use them in older browsers, using JavaScript libraries, css3-mediaqueries-js and Respond.js. Lastly, the author shows how incorporating some fixed widths into a flexible design may be an optimal approach.

The fifth and final chapter, "Becoming Responsive," discusses real world implications of responsive design. The author counters an interesting contention: web sites on mobile devices should not simply be the desktop content scaled down to a smaller screen, but instead should offer different content, more appropriate for the individual on the go. He then touches on the topic of designing sites first for mobile, rather than the traditional approach of trying to shoehorn a full-size site onto a small screen. The bulk of the chapter is devoted to presenting a workflow employed by the author in creating actual client sites. It concludes with a demonstration of how to add a slideshow using a jQuery plug-in and some custom code, so it abides by the principles of progressive enhancement.

In terms of the physical book, the quality is top-notch, and the full-color images are quite compelling. Sadly, each figure tends to bleed through to the other side of its page, but fortunately not enough to inhibit reading the text on the other side, or appreciating any of the images. The e-books are also quite readable — probably more so compared to the electronic versions of other programming books, given the smaller line lengths.

In terms of the narrative, Ethan Marcotte has a somewhat goofy writing style, replete with nerdy side comments and jokes, which some readers may regard as padding, particularly in those sections where they are quite numerous. The same may be said for the hyperbole in some spots, such as "Marvelous. Wonderful. Stupendous, even." (page 33). On the other hand, many readers may enjoy the lighthearted style, especially those jokes that work well. More importantly, the explanations are generally comprehensible and thorough. I was able to find only one erratum ("or a maybe an animation," on page 119), and the only grammatical error was the frequent use of the term "that" to refer to people, instead of "who." Otherwise, there were no glitches in the writing, and most techies will find this book a fairly quick read.

From a higher-level perspective, one sometimes hears an objection raised against web design/development books such as this one — namely: all of the book's information is freely available in articles, blog posts, forums, IRC channels, and other resources for programmers. So why purchase a static book whose author probably started writing it months if not years in the past? Such technical information is scattered among numerous websites, thereby forcing us to spend time searching around, and in many cases skipping over redundant material. Also, the advice tends to vary in quality, and hence we must distinguish what information is out of date or simply invalid. Likely every experienced developer has been tempted by an article titled such that it sounded as though it would contain the exact solution to the problem at hand — only to discover that the title was quite misleading, or the people contributing to the comments were equally befuddled (and frustrated). Technical books geared toward the working professional can obviate these problems, because they bring together most of the information known by the industry, into a cohesive whole, that is then vetted by technical reviewers and editors. In the case of this monograph, Ethan Marcotte's well-regarded seminal article, in conjunction with the other most popular articles on responsive web design, would still not be a sufficient substitute for this resource.

For web designers and developers alike, Ethan Marcotte's book is a neatly-crafted and authoritative single-source tutorial on how to build responsive web sites that will likely prove robust on a wide range of platforms.

Michael J. Ross is a freelance web developer and writer.

You can purchase Responsive Web Design from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.

Simple Solution to Faster Web Pages

[Lawrence_Bird]

1- do not serve ads from remote servers
2- do not associate with external sites like facebook, etc
3- do not use web bugs, beacons or other trackers

Those three things probably account for 99.9% of the sloth in today's internet

Re:Simple Solution to Faster Web Pages

[Reigo Reinmets]

Having a separate subdomain for images, video and content can actually improve speed when those subdomains are cookie-less and properly cached. Although having one subdomain like that would be preferred. Also, many developers are using Google(or others) CDN for javascript frameworks and popular API's to improve loading speed(You are very likely to already have the Google CDN JQuery in your browsers cache) and reduce bandwidth usage.