Cloud Four Blog

Technical notes, War stories and anecdotes

Responsive Web Design Book Review

Ethan Marcotte’s new book on Responsive Web Design is both not what I had hoped for and more than I had dared to imagine.

First, let’s get my disappointment out of the way.

As I explained in a previous post, I’m struggling with a chapter on Mobile First Responsive Web Design for our upcoming book. I had secretly hoped that Ethan’s book would contain a never-seen-before blueprint on how to tackle Mobile First Responsive Web Design.

Alas, it doesn’t contain a secret decoder ring. And if I’m honest with myself, I knew it wouldn’t.

Ethan and I have talked multiple times about how much thought and work is going into the Boston Globe project. Responsive Web Design, particularly the mobile first variety, is still very young.

So it was unfair of me to expect Ethan’s book to magically make the tough stuff we’re all working on solving suddenly go away. It’s a testament to Ethan that I even thought he might be able to pull it off.

What the book did do is something I hadn’t dared to imagine: the book transcends the topic it covers.

I don’t know how else to describe it. From the first two paragraphs, Ethan paints a picture of how the world we’re living in is changing:

As i begin writing this book, I realize I can’t guarantee you’ll read these words on a printed page, holding a tiny paperback in your hands. Maybe you’re sitting at your desk with an electronic copy of the book up on your screen. Perhaps you’re on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you don’t even see these words as I do: maybe your computer is simply reading this book aloud.

Ultimately, I know so little about you. I don’t know how you’re reading this. I can’t.

With these words he sets a tone that continues throughout the book. A tone that is both reassuring and at the same time inspiring.

Now don’t get me wrong, it isn’t all inspiration and theory. Ethan does a great job of diving into how to build Responsive Web Designs. He walks you through the process, letting you see where you will run into problems, and providing suggestions for solutions.

Images from inside Ethan’s Responsive Web Design book

He anticipates problems that I wouldn’t have thought to include. For example, the fact that flexible images develop artifacts on Internet Explorer 7 and below.

At first, this IE artifact bug seems like a divergence from the main topic, but I quickly came to appreciate the fact that when someone completes this short book, that they will have all the tools they need to start building Responsive Web Designs.

Ethan ties the two threads—the inspiring view of the where the web is headed and the technical details of Responsive Web Design—together In the final chapter entitled “Becoming Responsive” where he covers mobile context, picking breakpoints, and responsive workflows.

It is in this chapter that you realize what he’s truly accomplished. He’s written a book ostensibly about making the web respond to its environment, but what he’s really done is transform you into a more responsive being.

Ethan Marcotte’s new book, Responsive Web Design, went on sale today. Needless to say, I highly recommend it.

Where are the Mobile First Responsive Web Designs?

Lyza and I entitled the second chapter of our forthcoming book “Mobile First Responsive Web Design (RWD)”. Because this is a Head First book, we can’t simply explain the theory of Mobile First RWD. We have to teach our readers how to do it.

For those unfamiliar with the phrase, Mobile First RWD takes the concepts that Ethan Marcotte taught in his A List Apart article on Responsive Web Design and flips the process around to address some of the concerns I raised about media queries.

Instead of starting with a desktop site, you start with the mobile site and then progressively enhance to devices with larger screens. As a bonus, you benefit from the advantages of Mobile First design that Luke Wroblewski espouses.

In practical terms, I think a Mobile First RWD approach requires addressing some of the following challenges:

  • The need to start over and design for the smaller, more limited devices first
  • Ability to replace images with higher resolution images as the size or dpi of the screen increases
  • Ability to test for screen size and capabilities
  • Ability to add more javascript as capabilities and/or screen real estate increases
  • Ability to add more markup as capabilities and/or screen real estate increases
  • Ability to modify the layout as screen real estate increases
  • Decision about how to handle doctype and other markup if you’re going to support older phones that primarily support XHTML-MP

This list was just a starting point for exploration. I wanted to review how other developers are approaching Mobile First RWD in an attempt to find techniques that I might not be aware of and to see how they are thinking about these problems.

So I set out in early April to find examples of Mobile First RWD by reviewing every site listed in the Mediaqueri.es gallery which at the time was just over a hundred sites.

How do you know if something was designed mobile first?

Mobile first design is primarily about the starting point. After a site is complete, how can I tell whether or not the developer started from the mobile and built up to desktop or started from the desktop and whittled down to mobile?

I didn’t want to have to tear apart over a hundred sites in the Mediaqueri.es gallery to find the handful of mobile first sites. I needed some way to narrow the number of sites I cared about to some sort of manageable number.

I believe that mobile first RWD sites will exhibit common behavior as either a direct output of or a byproduct of their mobile first focus:

  • The total size of the markup and assets for mobile web will be significantly smaller than that delivered to desktop web.
  • The total number of http requests for mobile web will be smaller than those delivered to desktop web.

So I set up Charles proxy and loaded every site on mediaqueri.es and a few others that I knew of in both Mobile and Desktop Safari. I recorded the total size, number of http requests (as resources) and the time to download for each.

My theory was that the sites that showed the biggest jump in size when going from mobile to desktop would be the ones most likely to be using mobile first techniques.

The Results Weren’t Promising

Out of the 106 sites I reviewed, 64 of them had mobile sites that were less than ten percent smaller than the desktop version. Twenty-six of the sites had mobile web sites that were larger than the desktop equivalent.

Mobile is Larger 26, Same Size	4, Less than 10% Savings 40, 11 to 50% Savings 22, 51% to 100% Savings 4, Greater than 100% Savings 10

While the numbers were disappointing, I wasn’t terribly surprised. I sorted the results by the percentage difference in size in order to find the sites that were most likely to have been design as Mobile First RWD.

I just dug into the 22 sites that have the greatest percentage difference between their mobile sites and their desktop site. I made notes on what I found in the a spreadsheet which I’ve shared on Google Docs.

After all of that work, I only found five sites that may be Mobile First RWD:

  • Yiibu.com — Bryan and Stephanie’s site continues to be the gold standard.
  • EthanMarcotte.com — Shocking, huh? :-)
  • Elections.ChicagoTribune.com — Uses the Less framework. Mobile site is about half the size of the desktop version, but still downloads assets that aren’t needed in the mobile view.
  • Calebogden.com — I need to dig into this site more. I think the difference may be a weird issue with gzip on the desktop site.
  • Sleepstreet.be — Appears to be using the Responsive Images javascript library.

Needless to say, I was hoping to have more than five sites to review.

Why are Some Mobile Sites Bigger than their Desktop Counterparts?

The number of mobile sites that were significantly larger than their desktop siblings surprised me. The source for the big differences were:

  • Font usage — Some of the sites were using an old version of Typekit that downloaded SVG fonts on iPhone. These font files made the mobile version much bigger than desktop.
  • Retina images — Sites that were using retina images. In one case, I’m not 100% certain they are retina images because they are routed through tiny src so I can only tell that file size is much bigger for the images on mobile than desktop, but not why. In the other case, both the mobile images and the retina mobile images are getting downloaded for a double hit.
  • HTML5 Audio — HTML5 audio is embedded on the page. The browser is downloading the full mp3 file regardless of whether or not the user presses play. This balloons huffduffer.com from 122k on desktop to 2.9MB in Mobile Safari.
  • HTML5 Video — Mobile Safari starts downloading a portion of the video in order to validate the video will work and to grab a scene from the video to use in the player. Desktop Safari wasn’t doing this.

The lesson here is that if you want to really know what is getting downloaded, you need to test using something like Blaze.io’s mobile test or better yet, use a proxy like I did.

Why so Few Mobile First Responsive Web Designs?

This shouldn’t be a huge surprise. Here are some of the reasons why Mobile First RWD isn’t more widely spread:

  • Mobile First RWD may require a redesign — If you’re moving an existing site to RWD—especially if the existing site has fluid grids—you can with minimal work make it responsive. If you decide to do Mobile First RWD, you’re likely going to have to redesign the site or at minimum refactor your markup.
  • It presents larger technical challenges — What do you do about the img tag and the fact it only has one source? How do you make sure javascript only gets downloaded when needed? How do you modify your content management or processes to make sure images get resized appropriately?
  • Few frameworks support mobile first approach — Only recently have frameworks that take a mobile first approach like 320 and Up and the HTML5 Mobile Boilerplate been released.
  • Javascript libraries are just beginning to evolve — The Filament Group is leading the way here with Responsive Images and Respond.js. Different approaches are being developed like Adapt.js. As more people try to tackle mobile first designs, I expect more libraries to be published.
  • We’re still waiting for equivalent of the ESPN and Wired redesigns — The ESPN and Wired redesigns kickstarted the web standards movement. We all have high hopes that the work Ethan and The Filament Group are doing for the upcoming Boston Globe design will be a shining example for mobile first RWD.
  • The technique is still young — For as much as has been written about RWD, it is hard to remember that the ALA article was only written a year ago. People only started working on mobile first RWD last summer. There is still a lot of work to be done before the techniques are well known.

For us, the results of our research meant that we postponed the chapter on Mobile First RWD until later. Our hope is that by the time we return to the chapter, that there will be more examples to learn from.

What Sites Did I Miss?

Since I did my analysis in April, another 30 sites have been added to the Mediaqueri.es Gallery. Eventually I’ll take a closer look at them as well.

In the meantime, do you know of a site that qualifies as a Mobile First Responsive Web Design? Did you help develop it? Does it tackle some of the tough problems like img tag src and progressively enhancing based on screen size?

If so, I’d love to know about it. Sooner or later we’re going to have to get back to writing that chapter on Mobile First Responsive Web Design, and we could use as many examples to draw from as possible.