Responsive Web Design

*** Dec112011

Responsive Web Design, by Ethan Marcotte, sticks to A Book Apart’s formula: cover the essentials in a quick-to-read, friendly, and well-designed little book. After reading it, you will understand the key ingredients of responsive web design (a term the author himself coined). However, the overall approach is muddled, and some of the details seem unsupported.

Whoa, that’s a lot of digits

After a brief introduction to responsive web design in Chapter 1, Chapter 2 explains how to move from a fixed-width, pixel-based layout to a flexible layout based on percentages. The author first introduces the basic formula of target / context = result, which most designers are familiar with if they size their text in ems. So far so good. But when Marcotte applies this formula to creating 11px text in a 24px context (11 / 24 = .4583), he advocates retaining decimals up to 14 places! Now, as someone who as spent hours trimming characters from a CSS file to make it as lightweight as possible, this seems excessive. The author does not justify the extra digits by describing some concrete data or examples where providing .4583em to the browser instead of .45833333333333em causes some rendering issue or inconsistency, but simply says:

…browsers are perfectly adept at rounding off those excess decimal places as they internally convert the values to pixels. So giving them more information, not less, will net you a better result in the end.

This is vague and hard to believe without evidence. (Is a browser going to mistakenly round 10.9992 (24 x .4583) to 10 instead of 11?).

Nonetheless, the method of applying the formula is successfully communicated, and carries on into calculating layout dimensions as well, forming the basis of the flexible grid. Here too, percentages are carried out to a large number of digits, and in this context seems even more ludicrous for a couple of reasons. First, the whole premise is that you don’t know the context width, because it depends on the browser width:

By setting our #page element to a percentage of the browser window, we’ve created a container that will expand and contract as the viewport does.

Secondly, that very percentage was plucked out of thin air:

I’ll confess that I arrived at 90% somewhat arbitrarily, doing a bit of trial and error in the browser window to see what looked best.

That is an entirely acceptable approach, but why then slavishly adhere to translating the original pixel dimensions (the mockup was 960px wide) like so?:

 .blog .main{
	float:left;
	width: 62.8888889%; /* 566px / 900px */
}

The precise pixel dimension of the mockup would only ever occur at one exact browser width, and in this case, because 90% was chosen by sight and not math, it will never occur, because that exact width would be 1066.666666px (960 / 90%). So if we can set the #page width to 90% because we feel like it, let’s make life easy (and really commit to the idea that you need to give up pixel-perfect control) and pick 60% as the width for .blog .main.

Responsive images and media queries

Chapter 3 deals nicely with the challenges of using both background and content images in flexible designs. The author explains how to implement a couple of options such as max-width: 100%, along with their limitations.

Chapter 4 covers media queries, delving in to their evolution before showing how they can be used to target different form factors from phones to tablets to widescreen monitors. For example (from page 86):

@media screen and (max-width: 768px){
	#page {
		margin: 20px;
		width: auto;
	}
}

Mobile first responsive design

Chapter 5, “Becoming Responsive” reads in part as a rebuke of the steps to responsive design we’ve just learned in Chapters 2-4. Instead of starting from a fixed-pixel, desktop-oriented mockup, the author suggests building for mobile first and going up from there. This change in approach isn’t really the author’s fault; it simply demonstrates the perils of writing a book about a field where “best practices” are changing week to week. There are clearly advantages to the mobile-first approach.

  • A focus on content. Placing the most important content and functionality first.
  • A focus on speed. Getting the site as lightweight and fast-loading as possible.
  • It’s easier to add things than to take things away. If you start out with a lot unnecessary marketing language and email signup forms on your website, it will be harder to convince people they shouldn’t be on the mobile version.

Still, here it feels like an afterthought that brings parts of the preceding chapters into question.

Conclusion

Responsive Web Design provides insight into one designer’s approach to responsive web design, and the evolution of that approach from desktop-first to mobile-first. That designer, Ethan Marcotte, actually coined the term “responsive web design” and may have been the first to write about it. However, the most useful nuggets in this book can be gleaned by reading up on media queries and mobile-first design online (including the author’s own article on A List Apart), then experimenting on your own.

Respond to this review

Author(s)Ethan Marcotte
PublisherA Book Aopart
Pages150
Published2011
Category
Tags
Rating***

3 comments so far…Comment

Miguel Frias Oct 08 2012

I already read that book, and its awesome, Ethan know what is talking about. That book, its a really “must read” for designer diggin into mobile/responsive designs and for developers who wants to migrate your site to responsive web design.

mononucleosis Mar 10 2013

It’s difficult to find educated people in this particular topic, however, you sound like you know what you’re talking about!
Thanks

Nora Mar 10 2013

Why thank you, “mononucleosis”, if that is your real name, for your contribution to the discussion. It’s difficult to find engaged readers who leave such thoughtful comments.

And yes, thanks, I do know what I’m talking about.

Comments are closed for this article.