In the previous post, we discussed the importance of site performance and how to go about improving it. For this one, we’re focusing on Mobile Readiness.
So much goes into the optimization of your site for desktop, but too often we forget about the importance of mobile. Here’s the thing, the mobile future is already here. A perfect mobile UX is key to staying competitive.
Mobile isn’t just the future of commerce, it’s the present.
According to data from Statista, the share of U.S. mobile retail commerce (m-commerce) sales will surpass 50% by 2021.
For many segments of ecommerce companies, mobile is already the dominant traffic and revenue source. Here are Shopify's number from Black Friday Cyber Monday sales back in 2017:
How do you tell if your mobile is underperforming?
Some of the signs are:
- Bounce Rate, Pageviews per Session, or Session Duration are noticeably 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 Basics
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:
Let’s look at Safari (in-app) and Android Webview. These are in-app browsers (eg. Facebook) that are usually more restrictive. This can create critical usability issues for your site. Further complicating matters is that these browsers also vary by device models and OS versions. Paying close attention to all these browsers and making note of any significant differences in performance is key to solving the mobile performance problem.
Regular QA Health Checks is Key
It's good practice to conduct regular QA health checks (at least weekly) using browser simulation tools like BrowserStack, CrossBrowserTesting, and Sauce Labs. Think you’re done? You’re not. Just like everything else, actual devices is where your most important learning happens.
Identify the top Browser/OS/Device combinations for your site and purchase those devices. 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), which is traditionally defined 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 mobile devices. 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.
The Mobile First approach doesn’t just lead to better UX for mobile phones, What else can it do for you?
- Improve usability.
- Optimize web real estate.
- Trim down unnecessary elements, leaving only what converts.
The result is a leaner, meaner site that will give your users the exact information they need to convert. If your mobile site is simply a responsive version of your desktop version, you’re losing out on a huge potential growth area. Time to start thinking about 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.
A Perfect Mobile Checkout is Everything
No matter how much work you put into your entire funnel, it means nothing without a battle-tested and ironclad checkout experience. It’s why your website exists in the first place. Here are some ways to ensure your checkout perfect on mobile.
Don't build it yourself
Unless you're a huge retailer and need to own your checkout, chances are you're better off with an off-the-shelf checkout solution. Third party checkout solutions are battle tested across many ecomm shops and are obligated to maintain a certain guaranteed uptime. These vendors can also quickly identify and fix bugs, saving you the headache of calling your developers in the middle of the night.
What are the cons? These checkout solution typically takes a cut of your revenue, which can be significant. The key is to understand the cost (vendor cost) with the benefit of eliminating checkout downtime and bugs. From my personal experience, the benefit is much greater.
Checkout can only happen when it’s technically sound
What if you decide to maintain your own checkout? Then technical soundness is paramount.
Some sites try to optimize mobile UX by utilizing native input methods like selection picker and numpad. The problems come when those mobile-native features don’t work across all devices/browsers. For instance, triggering the device-native selection picker can often work on one device and not work on another (eg. iPhone vs. Android). The whole point of checkout is to help the customer fill out 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.
Prioritize mobile-native payment methods
Apple, Google, Samsung all offer mobile-native payment options. In addition, PayPal, Amazon Pay, and Shopify Pay all have mobile-optimized experiences. Taking advantage of these payment channels is an easy way to increase consumer trust and offer an accelerated checkout experience.
The caveat: offering all these payment options at once can be overwhelming. Choose wisely.
For methods like PayPal or Amazon, it can be useful to A/B test their popularity with your customer base. If few of your customers use Amazon Pay (or PayPal) it’s probably harming your conversion rate to clutter up your checkout with those payment options. It may sound like a no-brainer, but only include what works. Keep it simple, keep it intuitive.
Use these best practices for browser testing, Mobile First Design, and mobile checkout to create a mobile experience that leads to conversions.
In the next post, we'll focus on sparking joy in your customer's journey through optimizing their user experience (UX).