In the previous post, we discussed the importance of site performance and how to go about improving it. In this post we're going to focus specifically on auditing for Mobile Readiness.

Why?

According to data from Statista, the share of U.S. mobile retail commerce (m-commerce) sales will surpass 50% by 2021.

Source: Statista

For some segments of ecommerce companies, mobile is already the dominant traffic and revenue source. Just take a look at Shopify's number from Black Friday Cyber Monday sales back in 2017:

Source: Shopify

How do you tell if your mobile is underperforming? Some of the signs are:

  • Bounce Rate, Pageviews per Session, or Session Duration are significantly worse on mobile than desktop
  • Customers are signing up as leads or adding to cart, but not completing the purchase
  • Customers are checking out the products on mobile, but converting on desktop

Browser Performance

In addition to ensuring your site has maximum PageSpeed Insights score on mobile, browser-specific performance is also crucial. Depending on the complexity of your website, it may not perform the same way across every major browser. Besides the usual suspects of Safari and Chrome, there are a number of other browsers you should be regularly testing against. Check out an example browser combination below:

The ones to note here are "Safari (in-app)" and "Android Webview" – typically in-app browsers (eg. Facebook). These browsers are typically more restrictive and may create critical usability issues for your site. Things are further complicated with varying device model and OS versions. Pay close attention to all these browsers and make sure you monitor any significant differences in performance.

In addition, it's good practice to conduct regular QA health checks (at least weekly) using a combination of real devices and tools like BrowserStack, CrossBrowserTesting, and Sauce Labs. Identify the top Browser/OS/Device combinations for your site and purchase those devices in real life. Simulation tools don't always catch everything real devices can, especially with Facebook's in-app browser.

Mobile First Design

Mobile design has evolved quite a bit since the days of Responsive Web Design (RWD). Wikipedia defines RWD as "an approach to web design that makes web pages render well on a variety of devices and window or screen sizes." In the "olden" days, designers simply shrunk down the desktop design so the pages can fit on a mobile device. As usage exploded, the concept of "Mobile First Design" began to emerge.

In a nutshell, Mobile First simply means to craft your site with good mobile UX as the primary driver instead of an afterthought. Desktop design can either be an expansion from mobile or 100% standalone. This notion permeates everything from User Experience to technical implementations.

A mobile first approach doesn’t just concentrate on developing for mobile phones, it is also used to develop better usability of sites, develop better use of Web real estate and better reduce the amount unnecessary elements from pages. The user wants to fulfill their reasons for visiting the site or page.
– ZURB.com

If your mobile site is simply a responsive version of your desktop site, it's time to start thinking about doing a complete redesign using the Mobile First approach.

Accelerated Mobile Pages (AMP)

If you're ready to take mobile performance to the next level, take a look at Google's Accelerated Mobile Pages (AMP). It enables nearly instantaneous loading on mobile and gives you a huge leg up in Google search results ranking. While not a guaranteed success, many companies who tried it have seen improvements in both Bounce Rate and Conversion Rate.

Mobile Checkout

No matter how much work you put into your entire funnel, it means nothing without a battle-tested and ironclad checkout experience. Here are some ways to ensuring your checkout is working on mobile. (we'll delve more into the UX aspects in the next post)

Technical Soundness

Some sites try to optimize mobile UX by utilizing native input methods, such as selection picker and numpad. Problem is, certain mobile-native features may not work across all devices/browsers. For instance, triggering the device-native select picker can often work on one device and not work at all on another (eg. iPhone vs. Android). The whole point of checkout is to help the customer fill out a bunch of forms. If the input elements are buggy, customers will abandon and buy elsewhere.

To prevent this from happening, make sure you conduct regular QA sessions on checkout across different devices/browsers combinations. Frontend developers should also understand the importance of testing their code on a variety of devices/browsers before merging their code.

Alternatively, you can just choose a third party battle-tested checkout experience, such as Shopify or Stripe.

Prioritize mobile-native payment methods

Apple, Google, Samsung all offer mobile-native payment options in the forms of Apple Pay, Android Pay, and Samsung Pay. In addition, PayPal, Amazon Pay, and Shopify Pay all have mobile-optimized experiences. Taking advantages of these payment channels can increase consumer trust and offer accelerated checkout experiences.

Offering all of them at once can be overwhelming. Choose your payment methods based on the user's device – only offer the payment method most likely to be applicable for them. For example, you can check for Apple/Android Pay availability via Javascript.

For methods like PayPal and Amazon, A/B test their popularity with your customer base. If very little of your customers use Amazon Pay (or PayPal), it may actually hurt your conversion having that option due to result of clutter.

Recap

In this post, we went over best practices around browser testing, Mobile First Design, and mobile checkout. In the next post, we'll focus on optimizing user experience (UX).