Books, Software, Technology

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

About Robin Catling

Robin Catling gained degrees in both arts and technology which led to a diverse portfolio of employment. A freelance systems analyst, project manager and business change manager for the likes of American Express, British Airways and IBM, he moved on to web design, journalism and technical authoring. He has also worked in film and television, both behind and in front of the camera, including productions by Steven Spielberg, Martin Scorcese, Ron Howard and Ridley Scott. A qualified three-weapon coach, he runs West Devon Swords teaching sports fencing to all age groups, and in recent years qualified with the British Federation of Historical Swordplay to teach medieval and renaissance combat in the Historical Western Martial Arts.


9 thoughts on “Review: Responsive Web Design – Ethan Marcotte

  1. A round of applause for your post.Thanks Again.

    Posted by Tanberg | Mar 10, 2012, 3:00 pm
  2. Great article post.Thanks Again.

    Posted by Laverette | Mar 10, 2012, 4:29 pm
  3. I am so grateful for your blog. Really Great.

    Posted by Schaich | Mar 10, 2012, 4:46 pm
  4. I really enjoy the blog article. Fantastic.

    Posted by Groom | Mar 15, 2012, 11:18 pm
  5. Hello. Nice job. I did not expect this. This is an impressive story. Thanks!

    Posted by Daisy | May 26, 2012, 2:20 am
  6. Thanks a lot, I never heard of MArcotte before, will check out his work.

    Posted by Gittens | May 26, 2012, 7:51 am
  7. Looks like really good book. Lot of CSS material now so old hat, need something up to date. Worth looking into. I will bookmark your site.

    Posted by Luehring | May 26, 2012, 9:10 am
  8. Lovely website! Will be back later to read some more.

    Posted by Matterson | May 26, 2012, 10:30 am
  9. Keep working ,great job!

    Posted by Quelette | May 27, 2012, 9:49 am

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Twitter Updates

Follow us on Twitter @EverythingExpre

Find Us on Facebook

Enter your email address to follow this blog and receive notifications of new posts by email.



BBC World News

BBC World News
Opens the BBC World News page.
%d bloggers like this: