How mobile-friendly is your website? Most people surf the web using mobile devices, so optimizing your website for mobile viewers is essential.
From ensuring site usability, optimizing site speed, and ensuring that your content is readable, Google Search Central provides these tips and more to help make sure your website is mobile-friendly.
Tip #1 Keep the Mobile and Desktop Version of Your Website in Sync
The easiest way to keep your website’s mobile and desktop versions in sync is to use responsive design, which shows your website in the appropriate format on mobile and desktop devices. In this case, there is only one version of your website; therefore, there are no issues syncing mobile and desktop versions.
However, some website developers prefer to have a separate domain for the mobile version of their website, such as m.domainname.com. Users who land on the wrong domain name are redirected to the other site. In this case, there are two versions of the website, and it is important to keep the mobile and desktop sites in sync. The issue with maintaining two websites is that it can sometimes result in content, functionality, or performance lagging on either of the sites, which can become an issue for users visiting from different devices.
If you maintain two versions of your website, you may find automated tools helpful in checking that the two sites behave similarly. One automated tool, Puppeteer, provides an API to control a headless instance of Chrome, making it great for automated tests. Another solution could be to consolidate the two websites using responsive web design, as mentioned above, which uses techniques such as CSS media queries to change page layout based on the width of the display area. This solution can make it easier to deliver consistent experiences on all devices.
Tip #2 Design for Mobile Indexing
Another tip is to ensure that when you design your mobile site, Google can index it. Since most users use the web on their mobile phones, Google crawls sites looking for content to index using a mobile device user agent in the HTTP headers.
Tip #3 Optimize Your Site Speed
Site speed is a more significant concern for mobile devices since they are lower powered with lower network performance. However, other problems with speed can occur on a site, such as web fonts taking a while to download. If a web font takes a bit to download, content may be displayed first with a default font and then replaced with the web font when it becomes available, causing a content layout shift as the page re-flows due to the font change. In the worst-case scenario, rendering could be blocked entirely until the web font is loaded.
One tool that can help optimize site speed is the PageSpeed Insights tool. It provides several performance-related reports and includes both lab data and field data. In addition, the PageSpeed Insight Report typically provides advice on resolving the identified issues.
Tip #4 Ensure Content is Readable
Since screens on mobile devices are smaller, it is important to ensure pages from your website are readable so that content does not spill off the sides of the screen. It is also essential to ensure that text is large enough to read, that users can zoom in on content if they want a closer look, and that button icons are large enough to be recognized.
Site owners can use tools like Chrome Developer Tools to pick a mobile device to emulate your desktop browser, helping to see how your website will appear on different devices.
Tip #5 Ensure Site Usability
It is vital to make sure that your site does not suffer from common mobile usability issues, such as:
- Navigation structures.
- Menus are too hard to use on small devices.
- Buttons are too small.
- Placing buttons in non-accessible areas on the site.
- Relying too heavily on keyboard input.
Site owners can find usability issues by conducting a usability analysis of your site. Watching a new user find a product and complete a purchase on your website can be eye-opening, as what is obvious to you may not be evident to a first-time visitor.
Also, when conducting a usability analysis, check the experience of refining search results on the website. Entering text can be complicated on a mobile device, so for convenience and ease of usability, ensure you do not require a re-entry of text.
Aside from manual inspections, there are tools available to help find issues. One benefit of tools is that they can be integrated into the website’s build and release process. For example, site owners can use the mobile-friendly test tool simply by entering the URL of a page on your site, and it will analyze for common issues such as font size being too small or obsolete plug-ins.
Usability issues can be solved by reworking your website’s HTML and CSS and testing to ensure the problem is fixed.
Tip #6 Simplify User Experiences
Common areas for improvement in simplifying user experiences include forms for collecting payment and shipping details during checkout. In addition, carousels are a popular way to pack more information into limited-screen real estate.
Progressive Web Applications, or PWA, can also deliver users a more prosperous, app-like experience on your website. However, detecting user flow problems usually requires manual usability analysis. Tools can help spot well-known issues but cannot always be relied on to find all usability issues.
One way to simplify user experience is to ensure that your site correctly supports autofill for payment and shipping details. If a website maintains a customer database with passwords, make sure form fields are correctly marked so that browsers can remember passwords for users. You can also use a third-party identity provider, such as Google, to help users store passwords. Passwords must be treated with special care to ensure their security.
It is important to note that each site that manages its own passwords database increases the risk of password theft, making other sites vulnerable as many users use the same password across sites.
Tip #7 Personalization Matters on Mobile
Because mobile devices have smaller screens and are personal devices, users on mobile devices typically have a greater expectation of personalization when surfing the web. Therefore, it is essential to make sure what is displayed is relevant to the user on mobile devices.
One way to determine if your site could benefit from personalization is to perform a site audit, such as shopper interviews, which is a great way to gain insight into what your users expect.
Personalizing your website could 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. A more advanced personalization tool uses AI-driven recommendation engines based on user actions on the site.
Using cookies is a common way to remember users from a previous visit without knowing their whole identity. However, the website may offer a more personalized visit if users create an account, log on, and accept the terms and conditions to collect details about the shopper.
Tip #8 Leverage Mobile Specific Capabilities
It is beneficial to check if your website can handle more advanced input methods provided by mobile devices, such as touch screens, cameras, geopositioning location services, and voice input. These advanced methods allow new and engaging ways for customers to interact with your website.
Some examples of advanced interactive methods can include:
- Pinch and Swipe Method to zoom in and browse through images on your pages.
- Using location services to show users products in stores nearest to them.
- Supporting voice input to reduce the need for typing.
- Providing users an augmented reality experience, for example, to visualize pieces of furniture in their home before purchase.
- Performing image searches for products based on samples captured with a camera.
Most, but not all, advanced applications are now supported by mobile web browsers. However, it is essential to note that if a feature is not in all browsers, JavaScript can detect if the feature is available or not, and JavaScript will react appropriately.