Where are the Mobile First Responsive Web Designs?

Originally published on Cloud Four’s web site on June 7, 2011.

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
• 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.

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.