Avon J. Murphy
Introduction
Today’s technical communicators must make their content easy to access on not only desktop and laptop computers but also mobile phones, tablets, and other devices with varying screen sizes. The major technical solution to the usability problems introduced by this new reality is responsive Web design (RWD), through which content reflows in response to screen size; presence or lack of a keyboard, buttons, and swipable screen; and other factors. RWD has definitely arrived since its popularization by Ethan Marcotte’s Responsive Web Design (A Book Apart, 2011), as seen in large Web sites designed for responsiveness (including many U.S. government sites), its serving as the core of college Web design programs, and in STC presentations on RWD. Lynda.com, the prime source of training videos for designers, has released 19 RWD courses in 12 months. Fortunately, we also have some useful books; the four discussed in this article range from strategic overview to cookbook. All have sample code available.
Implementing Responsive Design: Building Sites for an Anywhere, Everywhere Web
Tim Kadlec expands Marcotte’s revolutionary insights to give us principles to consider when we plan and build sites. Using screenshots, selective code snippets, and technical literature, Kadlec takes us through careful analyses, reminding us not to seek solutions that will be perfect for all sites.
The strongest chapters are early ones, focusing on fluid layouts, media queries (CSS queries that check for the conditions of such features as width and height), and responsive media (such as images, video, and Web fonts). Extremely valuable and interesting are the comparisons of the merits and drawbacks of alternative ways to do things. For example, is it best to size fonts using pixels, ems, percentages, or rems?
Also useful are the later chapters on planning, workflow, responsive content, Responsive Design and Server-Side (RESS) components, and responsive experiences. However, here the prose gets a bit longish, and repetition creeps in.
Read this book to understand the context that should inform your choices. While other authors, for example, might devote several pages to the step-by-step use of a particular framework (a library of modules and packages), Kadlec cautions us not to overuse frameworks, sets them in the context of style guides (known also as design guidelines), and provides several pages on creating our own style guides.
Responsive Design Workflow
As his title suggests, Stephen Hay is strong on overall process. This visual designer distrusts cookie-cutter approaches and mere button pushing. He recommends a workflow that combines visual sensibility “with content strategy, interaction design, usability, and reality” (p. 11).
He outlines what works for him: inventory your content, create uncomplicated wireframes, design in structured text, develop a reference design for your use of such components as layout and typography on different screen sizes, graph your breakpoints (where your layout changes in response to changed screen width or other conditions), sketch your ideas into a set of thumbnails, create a Web-based design mockup, present your design to your client through screenshots and then interactive mockups, and create your style guide.
Hay wisely recommends starting with your basic content and working out to the more complex. This means not starting with complicated wireframes, and perhaps starting with your mobile screens rather than your more content- and feature-laden desktop screens.
The book does three related things especially well. First, Hay details full instructions for sketching your ideas, recommending that you sketch on various devices to sharpen your feel for size and spacing. Second, he offers brilliant pages on using your sketching acumen to graph major and minor breakpoints (he is the guru in this area). Third, he espouses good project documentation (partially automated with Dexy software), which includes your style guide with its sketches, screenshots, syntax-highlighted code, and more.
HTML5 and CSS3 Responsive Web Design Cookbook
Benjamin LaGrone provides expert hands-on recipes (short tutorials) for doing several dozen RWD tasks. Want to add shadows to your fonts? That’s here. Need to create a virtual machine using VirtualBox? That’s here, too. Combining the table of contents and the well-written index, you can easily find recipes for particular tasks.
The recipe structure is bulletproof: “Getting ready,” “How to do it,” and then “How it works.” LaGrone’s expertise shines especially when he goes into “How it works,” where he often adds alternative actions.
A couple of glaring weaknesses are immediately obvious. First, LaGrone provides little introduction or other context. A chapter simply launches a recipe with no preparation. You learn, for example, how to design for mobile devices before considering the desktop but get no insight into why that’s a good approach. One chapter goes through the details of several frameworks, one after the other, without considering why you’d use a framework for a given project in the first place.
Second, someone seems to have forgotten to proofread. The grammar often mystifies, and the code printed in the book sometimes doesn’t work; the downloadable code, however, works fine.
Even with the weaknesses in the presentation, LaGrone shares must-know information not found in most books on RWD.
Responsive Web Design by Example Beginner’s Guide
Thoriq Firdaus gives you practice on three projects, each described in two chapters. One chapter shows how to construct the site using a popular framework; the next shows how to enhance the site.
You learn how to construct a responsive portfolio page using Skeleton and then how to enhance it with CSS3. You then do a product launch site using Bootstrap and enhance it with CSS3 and LESS (Leaner CSS). Finally, you create a business site using Foundation and enhance it with Sass (Syntactically Awesome Stylesheets). In the course of this learning by doing, you work with various HTML5 elements, customized fonts, CSS selectors and pseudo classes, control styles, stylesheets, and more.
Several times in each chapter, Firdaus sets up a goal, goes into “time for action” (steps to achieve the goal), and then explains “what just happened.” There’s not much prose between code snippets and screenshots—although the author occasionally pauses for notes and tips, usually in gray boxes—so the pace is rapid.
The phrasing and coherence can be ragged, and as in LaGrone’s book, the downloadable code works better than the printed code. But if you want to take three major frameworks for a ride, this book is a good start.
References
Firdaus, Thoriq. (2013). Responsive Web Design by Example Beginner’s Guide. Birmingham, UK: Packt Publishing. [ISBN 978-1-84969-542-8. 320 pages, including index. US$44.99 (softcover).]
Hay, Stephen. (2013). Responsive Design Workflow. Berkeley, CA: New Riders. [ISBN 978-0-321-88786-3. 224 pages, including index. US$39.99 (softcover).]
Kadlec, Tim. (2012). Implementing Responsive Design: Building Sites for an Anywhere, Everywhere Web. Berkeley, CA: New Riders. [ISBN 978-0-321-82168-3. 272 pages, including index. US$39.99 (softcover).]
LaGrone, Benjamin. HTML5 and CSS3 Responsive Web Design Cookbook. (2013). Birmingham, UK: Packt Publishing. [ISBN 978-1-84969-544-2. 188 pages, including index. US$44.99 (softcover).]
About the Author
Avon J. Murphy is a technical editor in western Washington. A retired college professor and government writer, he is an STC Fellow, a contractor, and principal in Murphy Editing and Writing Services, specializing in computer and Web technologies. Avon served as Book Review Editor for Technical Communication for 17 years.
