As of June 2021, users on mobile phones account for 55.44% of all web traffic worldwide. Even though Google has been shifting to mobile-first indexing for the entire web, many website creators are still taking a “desktop-first” approach to UX and design.
Ensuring that your site is providing an enjoyable experience for your mobile visitors is a crucial SEO factor, so let’s review some commonly overlooked best practices for optimizing web content for mobile devices.
Size Content Correctly for the Viewport
Using the <meta name="viewport"> tag gives responsive sites the ability to serve the same page at the same URL to devices of all sizes. The viewport meta tag detects the visible window (viewport) size of each browser requesting it, and delivers the requested content in a matching size.
Here’s how a page looks with the viewport meta tag on a mobile device screen vs the same page without:
Without viewport meta tag
With viewport meta tag
The viewport element should be used with a content attribute that sets the width of the page delivered to match the width of the device. Since there are a wide variety of devices on the market today that vary in screen size, it’s best to set the content attribute to width=device-width. This will automatically size the page to fit the screen width of the user’s device.
You can also set the initial zoom level within the content attribute of the “viewport” meta tag to prevent the page from shifting in size when the browser first loads the page. To do this, add the initial-scale=1 directive to the content attribute.
In most cases, the optimal “viewport” meta tag will read:
<meta name="viewport" content="width=device-width, initial-scale=1">Control Image Width with CSS
A lot of sites use the meta viewport tag, but some may still have elements that size incorrectly. One common culprit here is using fixed widths rather than relative widths on images, especially big “hero” style images.
A fixed image width uses a static number to define the exact width of an image.
<img src="/wp-content/uploads/2019/10/Team-Zoom-Photo.jpg" width="385>This often causes issues since there are a variety of screen sizes that may be used to view your site. If you set a fixed width, it may be too small or too large depending on the user’s device.
The solution in most cases is to set the image’s width property to a percentage. Doing so will create a responsive image that instructs the browser to render its width in proportion to its parent element (its containing block).
To fix the code example above using inline CSS to set the image width, simply replace the static number assigned to the width property with a percentage.
<img src="/wp-content/uploads/2019/10/Team-Zoom-Photo.jpg" width="75%">Serve Images in Next-Generation Formats
Choosing the right formats for your images is another important consideration. When it comes to page speed, which is a critical component of Google’s most recent Core Update, bulky images are the most common cause for a frustratingly slow website.
The best way to gauge the impact of your image files on your site’s performance is to generate a Lighthouse report. Lighthouse can identify images that are being served in older, clunkier formats, so you can swap them out with lighter, faster-loading resources.
JPEG and PNG are two very popular image formats used across the web;, however, these file types are known for slowing a site’s page load time.
Google has recognized WebP as a better alternative, as this new format offers superior compression and quality characteristics. By converting your JPEG and PNG images to WebP, you can shave off 25-34% of the file size for each image. If your site serves lots of images in older formats, encoding your images in WebP format can be a significant improvement to mobile performance, allowing your pages to load faster and consume less of your mobile visitors’ cellular data.
Here are some examples of file sizes for images being served in JPEG versus WebP formats:
One thing to note is that while most browsers support WebP image formats, there are still some that do not. That being the case, you’ll need to serve a fallback image in a legacy format for users whose browsers do not support WebP. You can find several techniques for detecting browser support for WebP from the Google Developers site.
Display Text In Legible Font Sizes
Web pages are often styled with font sizes that are legible on desktop, but too small for mobile. Any page copy with a font size below 12px is considered illegible on mobile devices (and even 12px is pretty small — it should be treated as the bare minimum). Common sources of too-small text are often eyebrow navigations (a second navigation menu above the main navigation), footer elements, and image captions.
A quick way to find pages on your website that have font sizes too small to easily read on mobile is to run a report using Lighthouse, which flags pages on which 60% or more of the text has a font size smaller than 12px.
You can also audit font sizes manually by selecting Inspect Element (Firefox), Inspect (Chrome), or F12 Developer Tools (Edge).
Size Tap Targets Appropriately
Another important element of a page’s mobile usability is making sure that the page’s tap targets are large enough to be easily tapped, and far enough apart to be tapped with precision. Tap targets are elements on the screen that respond to user input (such as links or buttons). Failure to properly size tap targets can create an extremely frustrating experience for users as they will struggle to navigate the site on mobile devices, tapping on the wrong links or having to zoom in on the page to get their tap to register at all. Tap targets should be 48px by 48px or larger, and should have at least 8px of space between them.
Finding inappropriately-sized tap targets is another useful feature of a Lighthouse audit. Lighthouse reports identify pages with tap targets that are too small or too close together.
Many sites that have tap targets adequately sized and spaced overall will still run into trouble with text-heavy content pieces like blog posts. If you have a blog post with e.g. a single-spaced, bulleted list of links, those will often be too close together for a user to accurately tap on a mobile device. You can use CSS to change the line spacing of ul and ol elements on mobile devices (or overall) and update your editorial policy to look out to ensure lists are properly spaced.
Tip: If you have a tap target that is less than 48px by 48px, but you don’t want it to appear to be any larger, try increasing the padding property.
