Why Mobile First?
Odds are none of the people reading this have learned anything new up to this point. The $200+ phones in the pockets of everyone you know are all the indication you need that the web has broken out of its computer shaped box.
However, the fact that mobile web access is popular does almost nothing to convince me that I need to pursue a strategy that actually puts
mobile first. The flip side of 25% of mobile users being mobile-only is that 75% of them aren’t! Obviously, the desktop is still an important medium, not to be forgotten or pushed to the back burner quite yet. So why are we even considering taking the mobile first route?
One of the major catalysts for the rise of mobile first web design was the announcement from Eric Schmidt in 2010 that Google was going to be taking this approach from now on, going so far as to say “I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” (source). Why this drastic change in approach?
Graceful Degradation vs. Progressive Enhancement
These are some major buzz words from a few years ago that can still lend a lot of insight into the notion of mobile first web design and why it’s an important concept to consider.
Graceful degradation arose out of a need to have a design function on as many browsers and platforms as possible. Designers and developers wanted to take advantage of new technology without excluding users with setups that didn’t have support. The general conclusion was to create and serve up the best experience possible, and then account for each possible degradation and ensure that despite any shortcomings, the site would remain functional.
In terms of mobile web design, this meant that a full, standard website would scale back and gradually remove content and features as the viewport became smaller and the system simpler (no Flash support, etc.).
Out of this trend arose a powerful new idea: progressive enhancement. In this version of the tale, you put your best foot forward on the mobile platform, providing the users with minimal screen real estate, processing power and third party plugins an amazing experience that both looks great and functions perfectly. As the need arises, the site can gradually be “enhanced” and even completely rethought for larger platforms with fewer constraints.
Why Progressive Enhancement Wins
At a glance, these two methodologies seem roughly equivalent. Who cares where you begin the design process as long as it gets done, right?
The reality of the situation is a little more complex though. When you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Does this happen with every project? Perhaps not, but the story is likely far more common than you’d like to believe.
If we examine the progressive enhancement workflow, the result tends to be a different story. Here we’re starting with a project that is both super lean and quite impressive. You’ve taken all of that starting energy and put it into creating a product that looks and functions well despite the many restraints that you faced.
More importantly, you’ve already gone through the problem of trimming down the content to its most vital elements. Now when it’s time to bring this design to the desktop, instead of facing the decision of what to cut and how to water down your product, you instead get to decide how to make it even more robust!
(article excerpt from Joshua Johnson)