A few stats about mobile ecommerce

• According to Shopify, mobile traffic now accounts for 50% of visits, and about 35% of purchases.
• During the 2018 holiday season, about a third of online purchases came from smartphone users. On Black Friday, with 6.2 billion in online revenue, 40% of sales came via a mobile device. During Cyber Monday (7.9 billion), 54% of visitors and 30% of purchases came from mobile devices.
• 80% of shoppers used a mobile phone inside of a physical store to either look up product reviews or compare prices.
• According to BigCommerce, mobile ecommerce sales are expected to account for 54% of total ecommerce sales by 2021.
• According to Google from 2018 data, if people have a negative experience on mobile, they’re 62% less likely to purchase from your store in the future. And based on 2017 data, a one second delay in mobile load times can lower  mobile conversions by up to 20%.

 

Best practices for mobile

Below are some of the best practices I already talked about which are specifically for mobile:

• Consolidate your mobile header (see #1 and #16)
• Test a link bar (see #2)
• Add a sticky CTA bar (see #7)
• Make your menu items big enough (see #8)
• Simplify your menu (see #9)
• Make the burger menu easy to close (see #15)
• Avoid full-page popups that interrupt the shopping experience (see #25)
• Choose readable font sizes (see #31)
• Add zooming capability to product galleries (see #49)
• Add a sticky Add to Cart bar or button in the Product page (see #68)
• Simplify breadcrumbs (see #101)

 

Optimize your forms for mobile

• In the checkout form, use field labels instead of placeholder text (see #121)
• Make fields full-width so that they’re easy for both righties and lefties
• Make fields tall enough (about 44 px)
• Implement an Address Finder (see #123) to auto-complete the address and not force them to type it all
• Show the appropriate keyboard based on the field type (see #117)
• Ask for the minimal amount of information (see #115)

 

Shopify’s advice

This Shopify article is a good starting point to think about your mobile or mobile-responsive site.

 

Mobile testing

Older devices are typically smaller, and thus the experience for those users is different. It’s important to make sure that your store works properly on all devices, from the smallest to the biggest screens.

The easiest way to test out your store is by using the Chrome browser “Inspect” tool, or Safari’s “Responsive Design” tool. This allows you to choose which device you want to see the site on.

However, that Chrome Inspect tool isn’t entirely accurate, and you might still want to test on real devices, if you have any. If you have an established brand, it might be worth the investment to have one of each popular smartphone from the past few years to be able to easily test on each of them.

There are also mobile testing services as an alternative to buying those devices yourself.

 

A separate experience

Another option, instead of doing a mobile responsive experience, is to have a completely separate sub-website for mobile.