Originally published: Sep 11, 2012
This article was originally published June 7, 2011 on Cloud Four’s web site.
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:
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.
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:
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.
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:
Needless to say, I was hoping to have more than five sites to review.
The number of mobile sites that were significantly larger than their desktop siblings surprised me. The source for the big differences were:
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.
This shouldn’t be a huge surprise. Here are some of the reasons why Mobile First RWD isn’t more widely spread:
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.
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.
Jason is presenting our next virtual seminars this Thursday, September 13. Jason will show you how to start practicing mobile-first responsive web design by reordering your CSS, assets, and images. He’ll also show you how to handle retina-display images and which tools to use for mastering mobile first. Learn more about this webinar.
Jason has built a renowned career championing mobile design. He co-founded Cloud Four, a mobile design and development agency, and founded Mobile Portland to educate and support Portland’s mobile community. He also co-authored a book, Head First Mobile Web. Catch him on Twitter @grigs.
How have you changed your designs to consider mobile first? We'd like to hear from you on our UIE Brain Sparks blog.
Read related articles: