While most marketing industry professionals design and publish sites from the comfort of their desktop and a nice large display, the majority of visitors to your website may be arriving (or could be arriving) from mobile devices. Not taking the time to ensure that your websites and landing pages are mobile-friendly can leave a huge gap in your inbound marketing efforts, largely from mobile search engines. And if you’re an e-commerce site, there’s no doubt it’s having a direct impact on your conversion rates.
Google Search Is Mobile-First, You Should Be As Well
58.16% of global web traffic originated from mobile devices. Google holds 93.68% of the mobile search engine market share and mobile devices take up 63% of organic search visits.What Percentage of Search is Mobile
Google does not provide specific thresholds for each element that determines whether a site passes or not in terms of mobile-friendliness. However, there are certain guidelines and best practices that website owners can follow to ensure that their site is optimized for mobile devices and meets Google’s mobile-friendly standards. Here are some general guidelines for each element:
- Responsive design: The site should use responsive design techniques to ensure that it adapts to different screen sizes and resolutions. This means that the site should not have fixed-width elements or rely on horizontal scrolling to display content.
- Mobile-friendly navigation: On a desktop computer, navigation menus are typically displayed across the top or left side of the screen, allowing users to easily access different sections of the site. However, on a mobile device, the screen size is much smaller, making it challenging to display a large menu in the same way. To make navigation easy for mobile users, mobile-friendly navigation typically includes some or all of the following design features:
- Hamburger menu: A hamburger menu is a small icon consisting of three horizontal lines that, when clicked or tapped, expands into a full menu. This design saves space on the screen and makes it easy for users to access the menu.
- Dropdown menus: Dropdown menus are commonly used in mobile-friendly navigation to display submenus or additional options. When a user taps on a menu item, a dropdown menu appears with the available options.
- Sticky navigation: Sticky navigation keeps the navigation menu visible on the screen, even as the user scrolls down the page. This makes it easy for users to access the menu at any time without having to scroll back up to the top of the page.
- Simplified menu structure: Mobile-friendly navigation menus typically have a simplified structure with fewer options than desktop menus. This makes it easier for users to find what they’re looking for and reduces clutter on the screen.
- Font size: The text on the site should be large enough to read on a mobile device without requiring zooming. Google recommends a font size of at least 16 pixels for body text.
- Content layout: The content should be organized in a way that is easy to read on a mobile device, with sufficient spacing between different elements. This includes using legible fonts, avoiding large blocks of text, and breaking up content into smaller sections.
- Touch-friendly buttons and links: Buttons and links on the site should be large enough and spaced out enough to be easily clicked with a finger. Google recommends a minimum size of 48 pixels for touch targets.
- Page load speed: The site should load quickly on a mobile device, as slow loading speeds can negatively impact the user experience. Google recommends a load time of under three seconds for mobile sites.
- Compatibility with mobile devices: The site should be designed to work well on different types of mobile devices and mobile operating systems. This includes using standards-compliant code, avoiding Flash, and testing the site on different devices and platforms.
It’s important to note that meeting these guidelines does not guarantee that a site will be deemed 100% mobile-friendly by Google. The Mobile-Friendly Test provides an assessment of whether a site meets Google’s mobile-friendliness standards and offers suggestions for improvement.
Mobile Behavior Isn’t Just About Screen Size
It’s important to understand the differences in behavior between mobile and desktop users in order to design a website that is optimized for each platform and provides a positive user experience. Here are some key differences in behavior between mobile and desktop users:
- Screen size: Mobile devices have smaller screens, which can make it more challenging to read and navigate content. As a result, mobile users tend to prefer simpler, more concise content that is easy to read on smaller screens.
- Touch vs. click: Desktop users typically use a mouse or trackpad to navigate a site, while mobile users use their fingers to tap and swipe. This can affect the design of the site, particularly in terms of button and link size, placement, and spacing.
- Browsing context: Mobile users are often browsing on the go, in short bursts of activity, while desktop users may be more likely to spend longer periods of time on a site. This can influence the type of content that is most effective for each platform, with mobile content focused on quick access to key information.
- Search behavior: Mobile users are more likely to conduct voice searches and use search engines to find local businesses and services. This means that mobile-friendly SEO strategies may need to focus on local search optimization, voice search, and featured snippets.
- Conversion rates: Mobile users may have lower conversion rates than desktop users, as the smaller screen size and on-the-go browsing can make it more difficult to complete complex forms and transactions. This means that mobile sites may need to focus on simplifying the conversion process and reducing the number of steps required.
While you can’t use a mobile-friendly analysis to incorporate your mobile users’ behavior and intent, you can use these to ensure your site is at least optimized for mobile viewing.
Mobile-Friendly Means Speed
It’s important to remember, while mobile bandwidth continues to improve, it’s still not as fast as most desktops. With a majority of visitors coming through a mobile device to your site, speed is a critical factor. It’s also not surprising that ranking factors for mobile searches are significantly impacted by your site’s page speed.
- Time to first byte (TTFB): This measures how quickly the server responds to a request and starts sending back data. A fast TTFB is important for mobile users, who may have slower internet connections.
- Image optimization: Images can significantly impact page load times on mobile devices. PageSpeed Insights checks whether images are properly compressed and scaled for mobile devices.
- Above-the-fold content: Above-the-fold content refers to the content that is visible without scrolling down the page. PageSpeed Insights checks whether the above-the-fold content is prioritized and loaded quickly, to provide a faster and smoother user experience.
- Mobile usability: PageSpeed Insights also checks for mobile usability issues, such as touch elements being too close together or font sizes being too small to read on mobile devices.
- Server response time: This measures how quickly the server responds to requests, including requests for assets like images and CSS files. A slow server response time can significantly impact page load times for mobile users.
Mobile-friendly testing tools do an in-depth job of providing details on your site’s speed performance since it plays such a major role.
Mobile-Friendly Testing Tools
One note on this… while I’m using these tools consistently for our clients’ designs, I’ve found it virtually impossible to correct every issue. That said, my clients are performing incredibly well in mobile search and conversions. I use these platforms to optimize as well as we can for mobile users, but that doesn’t mean our clients’ sites are scoring perfectly (or even near perfectly) on any test.
My recommendations for testing on mobile devices are four-fold:
- Page Speed – measuring the speed and performance of your site.
- Mobile Browser – browser-testing across mobile devices to ensure your elements aren’t overlapping and are properly spaced and sized for interaction with finger-to-screen activity.
- Mobile SEO – observe and track how well your site is ranking on mobile search engines as well as competitor analysis to understand what you need to do to rank better.
- User Behavior – monitoring your analytics and even deploying session recording software to monitor how mobile users are interacting with your site.
Here’s a list of mobile-friendly testing tools available:
- Lamdatest – Perform live interactive cross-browser testing of your public or locally hosted websites and web apps on 3000+ real mobile and desktop browsers running on real operating systems. You can choose from a wide range of Windows and Mac operating systems, along with all legacy and latest browsers. Also, test your website or web app on the latest mobile browsers with Android and iOS mobile operating systems.
- Google Mobile-Friendly Test – a free tool provided by Google that allows website owners to test whether their site meets Google’s mobile-friendly standards. The tool analyzes a website and provides feedback on how mobile-friendly it is, as well as suggestions for improvement. For page speed issues, you can also utilize Google’s Page Speed Insights.
- Bing Mobile-Friendly Test – a very simple and free tool provided by Microsft that allows website owners to quickly test their mobile user interface (UI) to ensure that it’s optimized for mobile viewing and interaction.
- Sitechecker – we’ve written about Sitechecker’s incredible auditing capabilities already. Every audit comes with a mobile-friendly list of issues. As well, you can track your ranking over time on keywords for mobile searches you’re trying to optimize for.
- Microsoft Clarity – a free, easy-to-use tool that captures how real people actually use your site. Clarity enables you to segment mobile users out so that you. can see heatmaps and observe user sessions to identify issues with your mobile user interaction.