Google Talks About How to Make Your E-commerce Website Mobile-friendly

ALAN KENT: 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 because 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 less 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.

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 in 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 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.

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 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 number three is to optimize 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. I’ve included a link in the description so you can check out those episodes for more information. 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 shift as the page re-flows due to the font change. Potentially worse, rendering may be blocked completely until the font is loaded. PageSpeed Insights is a useful tool for analyzing web pages. It provides a number of performance related reports. PageSpeed Insights is particularly useful as it includes both lab data, from artificial tests of performance on your site, and field data based on real user experiences on your site. Most issues identified by the PageSpeed 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 properly. 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 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 small and 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 recognizable. To test for these issues, you can obviously try your website on your own phone as well as asking 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 have identified any problems is typically a matter of reworking your website’s HTML and CSS markup.

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 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 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 in 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’ll analyze for common issues such as, this site uses an obsolete plugin, such as Flash, the viewport property is not defined in a meta tag, and the font size is 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, then testing to ensure the problem has been fixed.

Tip number six is to understand and simplify user experiences on your site. Example common areas for improvement include forms for collecting payment and shipping details in the checkout flow, and carousels is a popular way to pack more information into limited screen real estate. 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 and 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 advance in carousels can look flashy, but often result in poorer user experience. Progressive web apps and potentially related single page apps, or SPAs, is a large field and beyond the scope of this video. Check out web.dev for great articles on PWAs.

Tip number seven is personalization matters on mobile devices. Users on mobile devices generally have a greater expectation of personalization. This is influenced by multiple factors, including mobile devices are typically not shared and so are inherently personal, and smaller screens means it’s more important to make what is displayed relevant to the user. An effective way to determine if your site could benefit from personalization is to perform a site audit. For example, shopper interviews are a great way to gain deeper insights into the expectations of your users. Personalization 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. Personalization can also be advanced using AI-driven recommendation engines based on user actions on the site. There are many great personalization and recommendation products on the market today, including from Google. Personalization often benefits from remembering users. 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 personalized visit if the user creates an account and logs on, accepting any terms and conditions to collect and hold details about the shopper.

The last tip is to review if your site can leverage more advanced input methods provided by mobile devices, such as touch screens, 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 an augmented reality experience so they can better visualize 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 surfaces 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. 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.