Fun Facts: New mobile device purchase/usage is growing 4x as fast as new people
371,000 Babies are born
500,000 iOS devices are sold
700,000 Android devices are activated
200,000 Nokia devices are used for the first time
143,000 Blackberry smartphones are purchased
1.45M devices vs. 371,000 babies per day
About 25% of websites are viewed exclusively on mobile devices
The Mobile First approach to concepting, designing, and developing responsive websites is a relatively new concept that has received a lot of attention and support lately as the primary approach to handling responsive websites. Since being first introduced by Luke Wroblewski more than four years ago, then radically adopted by Google in 2010, Mobile First has lately been making a strong case for becoming the new norm moving forward. It was one of the main focuses at this years Adobe MAX conference and still gaining momentum as mobile internet usage rapidly increases.
Benefits, Opportunities, and Hurdles
From a design and UX perspective, a Mobile First approach forces us to to focus on what's really important. Graceful degradation, browser to mobile, has us think of these larger-scale, oftentimes much more robust experiences, as a starting point - leaving us with the afterthought, "Okay, so how does this scale down for the mobile users." Many times there are problems with browser functionality that just don't translate well to touch screen devices. With Mobile First, "Smaller screen size force designers to eliminate the irrelevant and unhelpful aspects of their design." It can really even been seen as a creative exercise to order content and graphic elements by importance and relevance before expanding creativity to larger, more robust screens - strategically streamlining only essential content.
From a development perspective, more and more frameworks are coming out or releasing new versions that are embracing the Mobile First approach - emphasizing how 'lightweight' they are starting at the base mobile screen. A problem with Graceful Degradation is that the elements are hidden for smaller screens but often loaded anyways - increasing HTTP requests and load times. Progressive enhancement, Mobile First, loads only the most basic elements and styles first and adds to those as the browser size increases - making mobile sites much more lightweight and letting users 'often have load times reduced by 30% - 40%.' Not the mention that the CSS styling from this approach results in smaller, more maintainable and easier-to-read code.
This approach would also make it easier to incorporate specific assets and styles for high resolution retina-ready screens and devices as well by detecting browsers by whether their pixel aspect ratio is above 1.5 or not. . It would not further weigh down smaller resolutions and at the same time provide retina users a better experience.
While this all sounds well and good on paper, it does come with a few hurdles. It can be a little weird to think of laying out an entire website starting on a 360px wide canvas. Creativity may seem very constrained, especially when having to consider, 'Wait, how do you even do that on a phone.' It's certainly the reverse way we're accustomed to approaching responsive websites, but it's a concept that probably isn't going away any time soon and has potential benefits that seem to outweigh the initial awkwardness of starting small.
If our users are continuing to get their internet content from mobile first, shouldn't that be where we start too? - Damon Carlstrom
Damon Carlstrom has background in Interactive Design, Motion Graphics, and Front-End Development, lately focused on UX/UI Design and RWD (Responsive Web Design).