Introduction
ALAN KENT: (0:00) How mobile-friendly is your e-commerce website? And does it really matter? Hi, I’m Alan Kent, a developer advocate at Google. In this episode, I will talk about the importance of making sure your e-commerce website is mobile-friendly. The most obvious reason to worry about mobile friendliness is that more than half of Google’s search traffic comes from users on mobile devices. That is traffic we are potentially going to send to your site. Designing great experiences on mobile devices can be challenging due to the limited physical screen real estate compared to desktops and laptops. But guess what? Simpler mobile website designs often also perform well on larger screens. Simpler pages can help shoppers focus on their shopping journey with fewer distractions. Mobile friendliness is clearly important to users. And Google wants to direct users to sites that best meet their needs. For this reason, Google has published numerous articles on how best to create mobile-friendly websites. Check out Google Search Central and web.dev in particular, for great in-depth articles. So let’s dig in, starting with some technical tips and then moving on to user experience tips.
Tip #1. Keep mobile and desktop sites in sync
(1:29) Some sites prefer to have a separate domain name for mobile traffic so they can present a simplified user experience to mobile users. If a user lands on the wrong domain name, they are redirected over to the other site. The first tip in such cases is to keep the two sites in sync. There’s nothing inherently wrong with maintaining two websites. But it can result in content, functionality, or performance lagging on one of the two sites. Content and functionality differences can be particularly jarring to shoppers when they visit from different devices. If you choose to maintain two sites, you may find automated tools such as Puppeteer useful to check that the two sites behave similarly. Puppeteer provides an API to control a headless instance of Chrome, which makes it great for automating tests as part of your build process. With discipline, you can keep two sites in sync. Just make sure you always allocate a sufficient budget to cover the work on both sites. A better solution, however, may be to consolidate the two sites using responsive web design. Responsive web design uses techniques such as CSS media queries to change page layout based on the width of the display area. This can make it easier to deliver consistent experiences across all devices and potentially lower total development costs.
Tip #2 Design for mobile indexing
(3:01) The second tip is to make sure you design your mobile site for indexing by Google. Because most users issuing searches are on mobile devices, Google crawls sites looking for content to index using a mobile device user agent in the HTTP headers. If you are new to search engine crawling and indexing of websites, check out our how search works page on Google Search Central. Examples of problems that can occur when indexing mobile pages include mobile sites may omit information important for indexing from pages in order to reduce the page size. While this may reduce the number of bytes to download, improving load performance marginally, it may result in your pages not appearing in search results as often, not a good side effect. User experiences such as infinite scroll and load more buttons are often popular on mobile devices. They can, however, cause crawling problems as the full-page content is not loaded by default. This can lead to Google not finding all of your content to index. To detect problems with Google indexing your mobile site, check out Google Search Console. Google Search Console provides rich insights into what Google has indexed on your site, including reports of problems found. For more information, check out Daniel’s wonderful series of videos on getting the most out of Google Search Console. To help Google find all of your pages, consider using a sitemap file or providing Google Merchant Center with a feed of all your product pages. These provide alternative paths for Google to discover pages on your website rather than relying on crawling alone.
Tip #3 Optimise your site speed
(4:51) Tip number three is to optimise your site for site speed. Site speed is generally a greater concern for mobile devices, as they are often lower powered with lower network performance. In previous episodes, I covered improving image and JavaScript performance on your site. But there are other problems that can occur, such as when using web fonts. If a web font takes a while to download, content may be displayed first with a default font, which is then replaced with the web font when available. This can cause content layout shifts as the page reflows due to the font change. Potentially worse, rendering may be blocked completely until the font is loaded. Page speed insights are a useful tool for analysing web pages. It provides a number of performance-related reports. Page speed insights is particularly useful as it includes both lab data from artificial tests it performs on your site and field data based on real user experiences on your site. Most issues identified by the page speed insights report include advice on how to resolve the issues. For web fonts, review your site to see if you can reduce the number of fonts you use. Also, try to reference the most important fonts early on a page so they are loaded promptly. Check out Katie’s web.dev article on web fonts for more detailed advice. The final advice regarding site speed is if you cannot make it fast make it meaningful. For example, if submitting an order takes some time to complete, and there’s nothing you can do about it, show the customer special offers or upcoming events while they wait.
Tip #4 Ensure content is readable
(6:49) Tip number four is less of a technical issue and more of a usability consideration. It is to make sure pages from your site are readable on smaller mobile device screens. This includes making sure content does not spill off the sides of the screen, making sure text is large enough to read comfortably, making sure users can zoom in on content if they want a closer look, and making sure button icons are large enough to be easily recognisable. To test for these issues, you can obviously try your website on your own phone, as well as ask some friends with different brands of phone to try it too. But during development, you can also use tools like Chrome Developer Tools to pick a mobile device to emulate with your desktop browser. This can make it easier to test how your site will appear on a range of devices. If you like automating tests, again, Puppeteer may be useful. Fixing your site once you’ve identified any problems is typically a matter of reworking your website’s HTML and CSS markup.
Tip #5 Ensure site usability
(8:03) In addition to readability, make sure your site does not suffer from common mobile usability issues. Examples include navigation structures, such as menus, being too hard to use on a small device, buttons being too small to tap easily, buttons being placed in a way not friendly to single-handed use, and relying too heavily on keyboard input to navigate your site. Many usability issues are best found by conducting a usability analysis of your site. It can be eye-opening to watch a new user try to find a product and complete a purchase on your site. What is obvious to you is not always obvious to a first-time visitor. And don’t forget to check the experience of refining on-site search results. Entering text is generally harder on a mobile device. So make sure you don’t require a re-entry of text to refine a search. In addition to manual inspections, tools can be used to find some issues. Tools have the benefits that you can integrate them into your website’s build and release process. For example, check out the mobile-friendly test tool. Simply enter the URL of a page on your site. And it will analyse for common issues such as the site using an obsolete plugin, such as Flash, the viewport property is not defined in a meta tag, and the font size being too small to read comfortably. Google Search Console also has a mobile usability report for pages Google has indexed on your site. Look for mobile usability in the sidebar menu. Usability issues are, again, generally solved by reworking the HTML and CSS on your website and then testing to ensure the problem has been fixed.
Tip #6 Simplify user experiences
(9:51) Tip number six is to understand and simplify user experiences on your site. Examples of common areas for improvement include forms for collecting payment and shipping details in the checkout flow. And carousels are a popular way to pack more information into limited-screen real estate. The use of techniques such as progressive web apps, or PWA for short, can also deliver users richer app-like experiences on your website. Detecting problems in your user flows generally requires manual usability analysis. Tools can help spot well-known issues. But they cannot be relied on to find all usability issues. When using forms, ensure your site correctly supports autofill for payment and shipping details. To learn more, check out great content on forms from Sam Dutton on web.dev. If a site maintains a customer database with passwords, make sure form fields are marked correctly so browsers can offer to remember passwords for users. Passwords, compared to standard autocomplete and autofill fields, must be treated with special care to ensure their security. Better yet, consider using a third-party identity provider such as Google so shoppers are not required to remember yet another password. Each site that manages its own database of passwords increases the risk of password theft, which can in turn, make other sites vulnerable as many users reuse passwords across sites. If you use carousels on your site, check out Katie’s great advice on web.dev. Practices such as auto-advancing carousels can look flashy but often result in a poorer user experience. Progressive web apps and potentially related single-page apps, or SPAs, are a large field and beyond the scope of this video. Check out web.dev for great articles on PWAs.
Tip #7 Personalisation Matters on Mobile
(12:01) Tip number seven is personalisation matters on mobile devices. Users on mobile devices generally have a greater expectation of personalisation. This is influenced by multiple factors, including mobile devices are typically not shared and so are inherently personal. And smaller screens mean it’s more important to make what is displayed relevant to the user. An effective way to determine if your site could benefit from personalisation is to perform a site audit. For example, shopper interviews are a great way to gain deeper insights into the expectations of your users. Personalisation comes in many forms. It can be as simple as displaying products on the home page that the user viewed on their last visit or showing hand-curated offers based on the user’s profile. Personalisation can also be advanced using AI-driven recommendation engines based on user actions on the site. There are many great personalisation and recommendation products on the market today, including from Google. Personalisation often benefits from remembering users. The use of cookies is a common way to remember a user’s tastes from a previous visit without knowing their full identity. Alternatively, a site may offer a more personalised visit if the user creates an account and logs on, accepting any terms and conditions to collect and hold details about the shopper.
Tip #8 Leverage mobile-specific capabilities
(13:37) The last tip is to review if your site can leverage more advanced input methods provided by mobile devices such as touchscreens, cameras, geopositioning location services, and voice input. They can offer new and engaging ways for customers to interact with your website. Examples of advanced interactions include using pinch and swipe gestures to zoom and browse through product images on your product page, using location services to show the user products in the nearest physical store first, supporting voice input to reduce the need to type on a mobile keyboard, providing the user with an augmented reality experience so they can better visualise what a piece of furniture looks like in their own home before purchase, and performing image searches for products based on sample material patterns captured with a camera using services such as Google’s Vision API. Many but not all native app features are now supported by mobile web browsers. Check out Google’s Project Fugu for a list of such advanced capabilities to see what is possible. You can also use sites like caniuse.com to see how widely a specific feature is supported across browsers before using the feature on your own site. Note that if a feature is not in all browsers, JavaScript can typically detect if the feature is available or not and react appropriately. That means it is not necessary for all browsers to support a feature for you to take advantage of it on your own site.
Wrap up
(15:15) Thanks for watching this episode on making your website mobile-friendly. To be notified of new content as it becomes available, please subscribe. Until next time.
Sign up for eCommerce Essentials today!
