Monday, 26 December 2011

Review: Responsive Web Design - Ethan Marcotte

Responsive Web Design - Ethan Marcotte, book cover"When Ethan Marcotte coined the term “responsive web design” he conjured up something special. The technologies existed already: fluid grids, flexible images, and media queries. But Ethan united these techniques under a single banner, and in so doing changed the way we think about web design." (Foreword, Jeremy Keith)

Anyone who's had anything to do with putting a web site together knows just how breakable the whole design thing is; browsers never present an identical layout and every web designer meets their Waterloo in Internet Explorer in it's many non-standards compliant versions. Add the variety of devices in wide-screen, narrow-screen and mobile, determined to break your pages all over again... One designer, Ethan Marcotte, rides to the rescue with this book.
"The web designers canvas is the browser window..." says Marcotte. All the terminology is inherited from print, but unlike a paper page, the web browser can dynamically resize every element on the page: "once they’re published online, our designs are immediately at the mercy of the people who view them - to their font settings, to the color of their display, to the shape and size of their browser window."

Where web design goes wrong is in the next stage: "So in the face of all that uncertainty, that flexibility, we begin by establishing constraints: we set our type in pixels, or create fixed-width layouts that assume a minimum screen resolution."

Which as any practitioner knows, is a route to failure.

"But web designers, facing a changing landscape of new devices and contexts, are now forced to overcome the constraints we’ve imposed on the web’s innate flexibility. We need to let go."

This is Marcotte's manifesto.

"We can embrace the flexibility inherent to the web, without surrendering the control we require as designers."

So what does it take to create a responsive design? Marcotte breaks it down into three core ingredients:
  1. A flexible, grid-based layout,
  2. Flexible images and media, and
  3. Media queries, a module from the CSS3 specification.
Using these, he says, "we’ll have created a design that can adapt to the constraints of the browser window or device that renders it, creating a design that almost responds to the user’s needs."

I question the use of italics; the design almost responds?

Anyway, throughout the book, Marcotte illustrates his methods using an example website. The foundation of his method is a flexible grid layout plus flexible typography, for which he clearly sets out the basic math for the proper use of percentages over pixels to give perfectly proportioned results. There follows flexible columns, flexible padding and margins, flexible images, maximum widths and work rounds for older browsers. And Windows (quote: "windows hates us").

Acknowledging the research and techniques of those pioneer designers before translating them into responsive design solutions, Marcotte does an excellent job of communicating each of his solutions, moving on to tackle narrow tablet screens, e-readers and wide screens.

The most advanced solutions are reserved to solve the failings of media types, which the the W3C attacked using CSS3; the result is media queries, which Marcotte manages to explain in terms even I understood; "written as part of an @media declaration, (it) enables us to put queries directly inside a stylesheet." There's also a brief look at the use of JQuery and JavaScript.

In his conclusion, Marcotte emphasizes good practices for designing-in audience requirements for sites on various platforms - mobile first - using iterative, collaborative design and testing.

This is going to be the Bible for web-designers seeking the holy grail of liquid layout for some time. All the examples are supplemented by extensive acknowledgements and references for those needing more. You do need an appreciation of web page design and coding, layouts, style sheets and the chequered performance of various web browsers. We're not saying you can design the perfect page straight out of the book, but it just got a whole lot easier. RC  

'Ethan Marcotte is a web designer & developer who cares deeply about beautiful design, elegant code, and the intersection of the two. Over the years, Ethan has enjoyed working with such clients as the Sundance Film Festival, Stanford University, New York Magazine, and The Today Show. He swears profusely on Twitter, and would like to be an unstoppable robot ninja when he grows up. Beep.


Responsive Web Design is available from A Book Apart
  • Paperback $18.00 + shipping
  • ebook $9.00
  • Paperback & ebook bundle $23.00 + shipping
  • ISBN: 978-0-9844425-7-7
  • Paperback: 143 pages