Adding mobile-first solutions to your eCommerce

Care to share?

In this article, we will sum up the reasons why presence on mobile is a MUST for any eCommerce, what the mobile-first approach is and what you should care about when taking this approach.

Mobile devices have taken over the world of commerce, and no wonder. Worldwide, more people own a mobile phone than a toothbrush. Those handy devices accompany over ⅔ of the world’s inhabitants every single day and enrich their shopping experience. Adjusting to users’ needs and leveraging the mobile-first approach is a must for all retailers that wish to stay in the game.

Why is mobile commerce so important?

We passed the tipping point in 2014. Since then, the gap between the number of mobile and desktop users globally has been increasing. Today over 80% of shoppers use mobile phones in the decision process. They browse or use mobile apps to compare prices, look up product reviews or find store locations.

Many of them use only mobile devices. In the U.S. alone over 25% of mobile web users are mobile-only and the numbers are even higher in China, Mexico, Indonesia, India.

Divante

Comparison of mobile, tablet and desktop use through the day (source)

The average consumer spends more than 5 hours on their mobile phone daily. Although mobile devices are used primarily for browsing, communication, and entertainment, 51% of customers say that they use mobile devices to discover new brands and products. These are customers ready for mobile shopping and closing the deal. According to Google, over 40% of online transactions are now done on mobile.

The key point is that building a positive user experience and a mobile-first approach is the best way to build consistent solutions.

What is the mobile-first approach?

Mobile-first is the approach of designing web solutions with mobile devices as the base. This means designing primarily for over 4.57 billion mobile web users worldwide whose first-choice device is the mobile phone.

Designing for mobile devices is more demanding than for desktop but it’s excellent for further development. Differences such as small screen size and bandwidth, a rotation sensor, poor network coverage, just to name few, force designers to build smart and simple solutions. Although more time-consuming, it is also profitable. Web pages that work well on mobile devices translate better to all devices and are readable to all users.

Divante

In that sense, an online store designed with a mobile-first approach will work excellently on mobiles, tablets, laptops and desktop. Whichever device the customer chooses, he will meet a consistent store design across different touch points and an engaging user experience.

Social media and search are mobile-first

There are over 3 billion social media users worldwide and most of them (~90%) access their chosen platforms via mobile devices. That’s almost half of the globe’s inhabitants.

Mobile users expect fast and seamless interactions. They are taught to swipe in search of engaging content. Those users are also keen to share interesting content and express their emotions with a quick tap on the screen. Social media, like Twitter, Instagram, Facebook and WeChat, have already shifted and serve mobile-first experiences to users. The effect? Social media apps and mobile homepages are 40% more engaging than desktop ones, and users are also 20% more likely to click-through.

This is really important information for eCommerce because apart from information, communication and entertainment purposes, social media is also a significant source of customers. Fashion brands generate over 70% of traffic with Instagram. Social ads are another important source of traffic and since many online stores are not mobile-first, social marketplaces (e.g. on Facebook or WeChat) help to drive revenue.

With the growing number of mobile users, whose activity is already responsible for 52.2% of all worldwide online traffic, providers of search engines have also adjusted. Today, browsers promote mobile-friendly content both on mobile and desktop devices.

Eric Schmidt of Google exhorted businesses to take a ‘Mobile First’ approach to designing web experiences.”

World giants encourage businesses to focus on mobile. New standards, like progressive web apps, are supported by Apple, Google and Microsoft. A major change has also been mobile-first indexing – implemented by Google in 2018. Mobile-first indexing prioritizes mobile content along with page speed and uses it as an important ranking factor.

That is why the mobile-first approach is also a content-first approach, and thus user-focused. With that in mind, content created for mobile devices must be prioritized ruthlessly and adjusted to users’ needs. Users accustomed to the advantages of mobile devices expect online stores to be personal, content-rich, fast and to provide a smooth experience.

Mobile-first solutions for eCommerce

With all the reasons mentioned above it is obvious that reaching mobile-users is a must for all online sellers, not only for the most engaged brands.

Of course, mobile solutions have been available on the market for some time now. The most common are native apps and responsive web pages. But mobile technologies evolve dynamically and today we can also use the advantages of new solutions such as progressive web apps. Let’s have a look at the most popular options:

Mobile apps for eCommerce

Big brands make great use of these. Just take a look at Nike, which uses mobile apps combined with augmented reality and location tracking to engage core users in truly unique competitions and turns it into a shopping experience.

Such examples are very inspiring, but as we learn more about users’ behavior, we also know that there are serious disadvantages to them. 77% of users abandon freshly downloaded apps if they are not useful and neatly designed. Mobile users researching and comparing eCommerce offers prefer the mobile web to apps. Native apps need to gain users’ trust to earn a spot on their mobile phones.

Native apps also need separate development for different operating systems like Android or iOS. This implies a higher cost of development and maintenance. To download the app, users must enter App Store or Google Play which often is seen as a barrier to entry.

Responsive web design for eCommerce

Online stores often use responsive web design to adjust their desktop content to mobile devices. RWD allows online stores to resize accordingly to any screen size.

It’s a way to provide the user with a mobile page, but on smaller screens it often cuts off some functionalities of the full, desktop version of the web page. Even though small elements are not displayed, they are still loaded in the background. That can slow down your online store. In some cases, users can take this as a poorly-designed mobile site, and 57% of them won’t recommend the business.

Accelerated mobile pages for eCommerce

Another solution to convert your web page into a mobile-friendly one is AMPs. With the use of a set of protocols, they restructure the web page and make it easier to load on mobile devices. In this way, they also increase engagement and the time spent by users. AMPs are dedicated to static content.

AMPs and RWDs represent rather a mobile-friendly approach, not a mobile-first approach.

Progressive web apps for eCommerce

PWAs are a relatively fresh concept in mobile design, but as a new solution, they leverage all the possibilities of standard web technologies. They are seen as the next step in the evolution of RWD and native apps. Combining them with modern JavaScript allows us to create web pages that are much faster and work in offline mode.

Progressive web apps are the first step in the mobile-first approach. They are designed primarily for mobile, so their functionalities and content are aligned with the mobile device’s specifics. PWAs force us to rethink our content strategy and tailor it to mobile users.

What’s more, PWAs combine features of websites and native apps. They can be saved on the mobile screen and work as a native app independently of the operating system. We are still learning how to design PWAs to fully use their potential.

Discover Vue Storefront the best PWA storefront for your eCommerce >

Key aspects of the mobile-first approach

Of all the available solutions (native apps, RWD, AMP, PWA), progressive web apps seem to be the best match for the mobile-first approach and correspond with its most important aspects. Let’s review them:

High performance online stores

Mobile users are impatient. 53% of them will abandon an online store if it loads longer than 3 seconds. The speed of an online store can be checked in a simple speed test.

Progressive web apps are designed to speed up online stores. It avoids all janky scrolling and slow-to-respond interfaces by leveraging modern JavaScript. What’s more, by using headless architecture, PWAs can be added to existing eCommerce platforms.

Availability online, offline, 24/7

As we have already mentioned, nowadays we carry our mobile phones everywhere, hence online stores must be ready to deliver a user experience in an unexpected environment. This includes poor network coverage on a user’s daily commute, or even no connection on a flight.

A web store built as a PWA is saved in the browser cache memory and after the first use is available in all network conditions.

Low memory usage

Users preserve their devices’ memory for more important usage (photos, music), that’s why lighter solutions are preferred. Comparing native apps and progressive web apps leaves no doubts. Let’s look at the example of Twitter. Their iOS app takes over 100 mb, whereas their PWA takes only 0.6 mb. Visually, for the user there is almost no difference:

Divante

Visual comparison of Twitter App and Twitter Lite (PWA). Source

High UX performance

Most shoppers (over 90%) with a superior mobile user experience are likely to return to the online store and shop again.

Progressive Web Apps are dedicated to mobile users, and thus their design allows us to shape a seamless shopping experience and pleasant user experience.

The future of the mobile-first approach

With nearly 5 billion mobile devices across the world, no managers should have doubts that the mobile-first approach is the most important way of developing eCommerce. Great inspirations flow from top brands and social media, but we can also look for them in the Asian markets that lead in mobile technologies and set future trends.

TOP PWA MARKETPLACE - alibaba

Progressive Web Apps are seen as one of the most promising ways to drive business revenue on mobile devices. As the TOP 30 Progressive Web Apps report states: the largest online trading platform, Alibaba saw 76% higher conversion across all browsers after introducing its PWA. Another international marketplace, AliExpress gained 104% more new users.

For those who still have second thoughts, remember what Zuckerberg said, “On mobile we are going to make a lot more money than on desktop”.

Published August 28, 2018