Slashdot Mirror
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.
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.
Starting with Web Pages That Suck and learning there before doing anything.
Amazed how many pages get it wrong - from Facebook to Ebay - there are fundamental navigation design flaws which vex users. There's some sort of disease, which has been epidemic for years on the web, steering wide of the Keep It Simple Stupid philosophy of design. Keep in direct, simple and above all light weight.
A feeling of having made the same mistake before: Deja Foobar
I thought the whole idea of HTML was that content and presentation would be separated so you wouldn't have to care whether the end-user was viewing the page on an SGI workstation in Spielbergian 3D or an Etch-a-sketch?
Of course that was before the 'web designers' came along and suddenly 'this page is best viewed at 1280x1024' was plastered across the web.
Starting with Web Pages That Suck
If only the architects of the Ubuntu operating system would read that web site. Then they'd understand what the global menu in Unity does wrong compared to the global menu in, say, Mac OS X. In Unity, the frontmost window's title covers up the menu bar until the mouse enters the menu bar. WPTS calls this behavior mystery meat navigation
I seem to remember that was what the initial release of HTML did. And as I recall it did it quite well. It displayed structured data to fit the display device.
Undetectable Steganography? Yep, there's an app fo
You know. Using XSL stylesheets to generate (and render) the HTML in the browser and only transfer XML to the browser and requests from the browser to the httpd.
But then there are the retards from Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=98168 (Bug filed in 2001)
Well... one can dream.. about responsiveness...
I thought the whole idea of HTML was that content and presentation would be separated
On a device with a high-definition screen, such as a PC, Internet-enabled television, or full-size tablet, a news site might want to show both the headline, a photo thumbnail, and the first sentence of each article. But on a device with a smaller screen, such as a PDA or mobile phone, it might want to show only the headline. CSS can only hide boxes; it can't keep the boxes from being downloaded in the first place. Furthermore, the devices with small screens often have Internet connections that cost more per bit than the devices with big screens. So you usually want to redirect small-screen users to a low-detail HTML document and large-screen users to a high-detail HTML document.
I come to Slashdot for shill reviews for Packt Publishing and their books on 3 year old versions of Drupal. Slashdot I am disappoint.
Would a 1 1/2 year old book by RuPaul make you feel better?
If what you describe is really a problem, then the only sensible thing to do is to use two completely separate web sites. You have one targeting mobile devices, and one targeting more capable devices.
WHY THE FUCK DO WEB DESIGNERS FEEL THE NEED TO TARGET EVERY POSSIBLE DEVICE WITH A SINGLE WEB PAGE OR SITE?
It sure as fuck isn't a "cost saving" measure, because these web designers will spend far more time fucking around with CSS to make the pages render everywhere than they will spend if they just make two separate implementations.
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
If what you describe is really a problem, then the only sensible thing to do is to use two completely separate web sites. You have one targeting mobile devices, and one targeting more capable devices.
Which is sort of what I meant by "redirect small-screen users to a low-detail HTML document". Viewing the front page of a site on a PDA or cell phone would redirect to /m/; doing so on a PC or TV would redirect to /home/.
It's "markup" for surrounding content. There was no separation intended there.
You're probably thinking of XML and XSLT and/or CSS.
It's called CSS and those of us who paid attention have been using it for years.
it is not hard to make a webpage that looks good on a pc AND a mobile device with CSS.
Keeping that while the idiot client wants you to put in more blinking and scrolling crap is another matter..
Do not look at laser with remaining good eye.
Yes, the mechanism for designing pages that are usable on devices large and small, bandwidth constrained or not, is CSS. But, to the best of my knowledge, there ain't no way to know which tags or class of tag will best render in browser X without a large dose of either browser or capability detection. So, merely replying "CSS" is only giving half of the answer.
Luke, help me take this mask off
And if they want to include a picture, then they can use CSS to apply it rather than use the <img> tag
Since when can a CSS background-image be scaled?
The best practice is to write pages that flow naturally to the screen width.
True, but there's still a reason to put something like max-width: 30em on a body text element, and it's the same reason newspapers are printed in columns instead of with lines of text across the whole width of a half-broadsheet. Without it, the eye has trouble finding the start of the next line of text, and the reader may end up repeating or skipping a line.
The problem with having the mindset of separate versions of the website (to quote the summary: a mobile-ready version as well as one for much larger screens) is that it can miss out on the screen sizes in between (eg. netbooks).
Then make your "full size PC" page scale as small as netbooks, but not necessarily smaller. A lot of web sites already employ grids roughly 900px to 960px wide, which fits into a netbook's screen as well as a browser window that has been Snapped to the left or right half of a 1080p monitor. But it's a lot harder to make a web site that presents the same amount of information on a 3.5" screen without having the scrolling column so tall that nobody can find anything.
So you cant make the php or asp code also see what the browser is and adjust?
One can, but to take cache behavior into account, one needs to put the PHP or ASP code that generates the low- and high-detail documents at different URLs and then do "Location: /home/" or "Location: /m/" depending on the detected user agent. Each document in /home/ or /m/ would link to the corresponding document in the other space in case the script misdetects the user agent. Otherwise, if you put the home and mobile documents at the same URL, a caching proxy might deliver the document suitable for the device that the previous user was using instead of the document suitable for the present user's device.
The link goes to amazon for someone selling it as a collectible above what seems to be the list price. Maybe Slashdot reads purchased them all. Reviewing a book that cannot be purchased seems a bit silly.
And since when does the latest version of the web browser bundled with the most common PC operating system support CSS3? The most common PC operating system is still the ten-year-old Windows XP, and the latest IE for that is IE 8. As of July 2001, IE 6 through 8 had a 44.7% total usage share according to Net Applications.
As technology improves the screen sizes of handhelds will get bigger, most probably by unfolding --one such unit is already available. Also, if their pixel resolution improves, then that is another way for them to emulate a larger screen. So, this is really a short-term problem, provided that web-page designers don't design for wide-screen monitors. Good old 800x600 or 1024x768 is probably fine.
Especially when mobile devices / their browsers try to camouflage as desktop browsers by a) not using the handheld stylesheet, b) using some arbitrarily large screen dimensions in CSS media queries. Nowdays you have to be very careful with a viewport meta-tag (yes, it's HTML!) in order to get mobile devices to even use your mobile stylesheet...
"I love my job, but I hate talking to people like you" (Freddie Mercury)
sure responsive is a neat trick, but it won't redraw the context of the data being accessed. People browsing from a phone to a "responsive" still don't get easy access to, say.. a phone number, for example - something very useful to the context of a phone.
It's exclusively available from A Book Apart.
not sure your point....