It’s time to replace mobile-friendly with mobile-first

As more early holiday shopping data pours in, 2016 looks poised to be the year of the small-screen sofa shopaholic. While brick-and-mortar traffic slipped on Black Friday, savvy shoppers took advantage of deals on their mobile devices between Grandpa’s toasts and bites of pumpkin pie.

This year’s Black Friday was the first $1 billion mobile shopping day in US history, with mobile accounting for over a third of all online sales, according to Adobe.

Retailers that are “thinking small” are winning the holiday sales season thus far. Recode reported that Fanatics, an online retailer of sports apparel, had over half its Thanksgiving revenue come from mobile devices, capitalizing on the serendipity of fans who needed to have Ezekiel Elliott jerseys after watching the Dallas Cowboys running back trample Washington.

Even with this surge, m-commerce in the United States still lags behind its foreign counterparts. Within the first hour of China’s Singles’ Day in 2015, 73 percent of purchases were made via smartphone, Alibaba told the BBC. This year, Alibaba alone raked in almost $18 billion on Singles’ Day, with mobile accounting for 84 percent of all revenue made during the morning hours of the sale. In just the first two minutes of Singles’ Day, smartphones pulled in close to $1 billion.

Moving beyond mobile-friendly

With the coming supremacy of mobile commerce, the web designer’s mindset has to shift from being mobile-friendly to being mobile-first. With nearly 60 percent of US online retail traffic coming from mobile, it’s now the dominant medium. It must also be the driver of the design aesthetic.

Capitalizing on the massive spike in mobile traffic requires understanding the many disruptions mobile shoppers face. While desktop shopping is often a comfy, one-session endeavor, mobile shoppers are interrupted by FaceTime calls from mom, Ubers arriving and trains burrowing into tunnels. As a result, mobile conversion often occurs over several logins.

These interruptions power the existential threat facing mobile retailers: cart abandonment. Mobile cart abandonment during Thanksgiving weekend was 78.1 percent, compared with 63.8 percent on desktop, meaning $1 billion in mobile sales were realized with only one out of five users actually completing their purchase.

Designers must anticipate barriers to purchase and design subtle features that encourage users to check out and that expedite the purchase process for returning shoppers.

Based on the experiences of dozens of retailers and their mobile sites, the following examples illustrate the kind of mobile-first thinking that removes barriers to purchase:

1. Free Shipping — Overlay or notification promotes conversions in areas where free shipping is available:

2. Save Your Cart — Overlay or notification encourages logins and allows visitors to complete their checkout journey on a different device, optimized to decrease the high checkout abandonment rates seen across the mobile web:

3. Floating Menu — Mobile-web optimized navigation enables easy access to the main sections of the site when on a smartphone:

These are not desktop modules refitted to work with the smaller screen of the mobile web. They are native to mobile and specifically designed to enrich the mobile buyer’s journey.

With razor-thin lines between mobile conversion and abandonment, subtle design improvements can amount to massive revenue uplift for large retailers. As the majority of online shopping now occurs on a five-inch canvas, all design must be mobile-first.