In early 2010, Google announced it was adopting a “mobile first” strategy. While Google did not coin the phrase “mobile first”, they were the first major technology company to publicly adopt a mobile-first strategy.
What is “mobile first”? Why should I care?
Mobile-first strategy is an approach to innovation that maintains digital technology should be designed for smaller devices, then scaled up. Because mobile designs are more difficult than desktop, the mobile-first approach makes it easier to adapt responsive mobile designs to larger screens and devices.
To demonstrate why mobile first makes sense, a few factoids:
- In the world today, more people access the internet via smartphones than desktops.
- Apple sold more iPads in 2012 than the leading manufacturer of PC’s (Hewlett Packard), sold PC’s. Today, iPads are selling better than ever.
- Everyone you know has a smartphone, and most of them also have a tablet.
- Everyone you know spends much more time with their phone than they do their desktop:
Clearly, there has been a sea change, and phones and tablets now account for more traffic than desktops. So the real question is, in the face of all these statistics, why would anyone still consider a desktop-first approach?
Desktop First – A Superficial Approach to Design
Until recently, desktop was king, and mobile specific strategies, if they existed at all, took a backseat to the primary marketing strategy — i.e., websites are developed for desktop users. Mobile “sites” have historically been scaled down, shrunken versions of the desktop site, sometimes with content stripped out to make it more compact, more consumable, more palatable. The mobile site was a re-factoring of the desktop version, and developers and strategists spent a disproportionate amount of their efforts on the desktop.
But that’s a superficial approach since phones and tablets have some very fundamental differences. Yes, they are smaller, very true. But there is more to it than just size. Phones are primarily communication devices. Phones can make voice calls and send text messages. Phones have GPS. Phones have accelerometers. Phones do not have keyboards or mice. And … the hardware profiles of all phones are significantly less than desktops.
In many ways, phones of today are more like desktops of 10 years ago. They can’t process as much code as quickly as desktops. Trying to shove a really nice desktop based website at a mobile device, risks disappointing the user with poor performance. Looks great, but it’s slow, and who likes “slow”?
Mobile First – User Experience is Priority
So a mobile first strategy essentially encourages developers to appeal to the user experience of mobile visitors first. Provide a user with a poor user experience and how likely are they to come back? Thanks to Google, we actually know the answer to that question. According to Google’s Mobile Playbook, 57% of people said they wouldn’t recommend a company that had a poorly designed mobile site.
That shouldn’t be a surprise. Mobile users just have less patience. They want what they want, and they want it now.
Mobile First with Responsive Design
Instead of targeting desktop as the primary concern, we should be developing for mobile devices first, and the desktop experience should take the back seat. This applies to mobile friendly websites. as well as responsive designs.
In regards to the code of a responsive website, many websites are currently developed with the desktop version being the default layout. This means that the website loads images at their largest sizes and includes all functionality that desktop websites are capable of producing.
Media queries are then used to identify the resolution of the screen, and the website dynamically adapts its layout, content, and functionality to fit the device. In cases where the screen is detected as being a mobile phone, the large images must be resized and content that is optimized for desktop viewing may be reduced or stripped out entirely. This process of adapting the website to a mobile device is hardware intensive, and mobile sites are often somewhat slow to load given a mobile phones limited processing abilities.
A mobile first strategy suggests that the default design should me the mobile variant, making the desktop layout a secondary option. This increases page load speed on mobile phones because the website is not loading large images that it must resize. As a consequence, it can also make the desktop version slightly slower to load. But with mobile phone usage soon to exceed desktop usage, this consequence may be a necessary evil.