Embracing Mobile First Design

Think of the last time you made an online purchase.

What device did you use to research the product? How did you browse the ecommerce store? And where were you when you clicked the button to finalize the purchase?

Chances are that you were on a mobile device. In fact, 79 percent of consumers with smartphones use their phone at some point in the purchase process. With an expected 1.75 billion smartphone users in 2014—a 24 percent increase from 2013—it’s time for online businesses and retailers to put an emphasis on mobile development rather than treating it as an afterthought.

The End of the “Web First” Era

Eric Schmidt, former CEO of Google, first saw this trend taking shape at the beginning of 2010. Schmidt addressed the Mobile World Congress by saying, “Mobile first in everything. Mobile first in terms of applications. Mobile first in terms of the way people use things. And it means … that we have a role now to inform, to educate through all these devices.”

The changing of the guard—from web-first to mobile-first—happened two years later when Pinterest released its Android and iPad apps. For the first time since its launch in 2009, Pinterest saw traffic from their mobile apps eclipse web traffic. In an AllThingsD article, Pinterest co-founder Evan Sharp noted, “As far as I know, we’re the last startup to become high-profile on the web.” This was a watershed moment for consumer behavior online, signaling that mobile was now the king of the hill.

Graceful Degradation vs. Progressive Enhancement

For many of us, especially those of us who date back to the desktop-only days of the web, it’s only natural that development considerations begin with a larger screen. The mobile experience is typically thought about at the last minute and often pieced together with some UX duct tape and a sprinkle of responsive design. Too late in the game to be properly integrated, the original design is hurriedly refactored to work on smaller tablet and smartphone screens.

This process of working from large screen formats to the small screen has been called graceful degradation. As Joshua Johnson explains on Design Shack, “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.).” But this often results in a subpar, diluted mobile version that is a shadow of the desktop experience. Here the mobile site comes last, not only in the design process but also in the pecking order of perceived value.

Progressive enhancement puts mobile first, starting the design process with the smallest form factor. “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, [creating] an amazing experience that both looks great and functions perfectly,” Johnson says. “As the need arises, the site can gradually be ‘enhanced’ and even completely rethought for larger platforms with fewer constraints.” While it may seem like there is not that much of a difference between the two options, beginning with the mobile design can add real value to your customer engagement.

Uniquely Mobile

A “mobile first” approach to development extends well beyond what is displayed on the screen. Companies need to consider the total environment and how their users are interacting with the app. Given the portable nature of smartphones and tablets, people are apt to use them as a distraction while they are waiting. Consequently, latency and/or slow app loading times can cause aggravation.

Luke Wroblewski, CEO and co-founder of Input Factory Inc., acknowledges this frustration and provides a solution to make help make mobile appear more snappy. “While designers can’t speed up the network, they can provide users with the sense that response times are faster than they actually are.” One way of doing this is by immediately showing the user the result of their action—a star turning yellow when the Favorite button is pressed or a comment posted to a photo upon hitting Submit—even if the request is still being processed on the backend server. “In this case, the perception of being fast beats the mobile-network reality of being slow.”

Ergonomics and the Thumb Zone

Another consideration in mobile first design is ergonomics. Considering that the primary input mechanism is the human thumb, designers should be concerned with how people use this digit and evolutionary advantage. Steven Hoober, author of the O’Reilly book Designing Mobile Interfaces, coined the term “Thumb Zone.” This concept describes positions on the screen for your thumb that feel natural, and positions that feel like a stretch or just plain hurt.

Scott Hurff, a product designer and blogger, wrote about physical pain your thumb feels when using Paper, Facebook’s newest content browsing app. While it may be easy for a company to overlook, causing users to make repeated motions that are physically uncomfortable can lead to app abandonment. “Even though we’re each pushing to innovate in the nascent mobile app world, we’ve still got to remember that natural, comfortable gestures don’t change,” Hurff says.

Time to Make the Shift

Similar to how sitcoms, sports and commercials modified programming for the new widescreen televisions, online companies must change focus from web-only to mobile-first design. There is great momentum in the adoption of smartphones and tablets. Having a piecemeal, poorly thought out mobile experience is no longer an option. Online businesses will be hard pressed to last if they don’t begin putting mobile first.


Please enter your comment!
Please enter your name here