Avoid common mistakes when designing for mobile
This page describes some of the most common mistakes that website owners make when designing for mobile.
- Check and test your robots.txt in Search Console.
- Test your mobile pages with the Mobile-Friendly Test to see if our systems detect your website as compatible for mobile users.
- If you use separate URLs for your mobile pages, make sure to test both the mobile and the desktop URLs, so you can confirm that the redirect is recognized and crawlable.
Some types of videos or content are not playable on mobile devices, such as license-constrained media or experiences that require video players that are not broadly supported on mobile devices. Unplayable content, when featured on a page of any website can be very frustrating for users.
When users visit a page with content not supported on a mobile device, they see an error message. This provides users with a poor mobile experience! Instead of using a proprietary video player or putting content in unsupported formats, we recommend using HTML5 standard tags to include videos or animations.
For animated content, use HTML5 animations that work across all web browsers. Google Web Designer makes it easy to create these animations in HTML5.
- Use HTML5 standards for animations to provide a good experience to all your users.
- Use video-embedding that's playable on all devices.
- Consider having the transcript of the video available. This makes your site accessible to people who use assistive browsing technologies or who have browsers that can't play a proprietary video format.
If you have separate mobile URLs, we recommend that you redirect mobile users on each desktop URL to the appropriate mobile URL. Redirecting to other pages (such as always to the homepage) would be incorrect.
- Your desktop site's server is configured to redirect mobile users to the mobile site's homepage, regardless of which URL they originally requested, even if the mobile site has the equivalent page to the redirecting desktop page.
- Your desktop site's URLs are dynamically generated with URL parameters that don't map well to the equivalent mobile URL. For example, a user who is looking for a train timetable on a specific date on the desktop site may be frustrated if they are redirected to the general timetable search page on the mobile site. We recommend that you configure the redirection correctly if you have an equivalent mobile URL so that users end up on the page they were looking for.
- Your desktop site redirects some mobile devices but not others. For example, a site may redirect only Android users to the mobile site and not redirect iPhone or Windows Phone users.
- Use Search Console. If you're a verified user, we'll send you a message if we detect that any of your site's pages are redirecting smartphone users to the homepage.
- Set up your server so that it redirects smartphone users to the equivalent URL on your smartphone site.
- If a page on your site doesn't have a smartphone equivalent, keep users on the desktop page, rather than redirecting them to the smartphone site's homepage. Doing nothing is better than doing something wrong in this case.
- Try using responsive web design, which serves the same content for desktop and smartphone users.
Some sites serve content to desktop users accessing a URL but show an error page to mobile users.
To ensure the best user experience, if you recognize that a user is visiting a desktop page from a mobile device and you have an equivalent mobile page at a different URL, redirect them to that URL instead of serving a 404 or a soft 404 page. Also make sure that the mobile-friendly page itself isn't an error page.
- Use Search Console. If you're a verified user for the site, you'll get a notification in the message panel.
- If you have a smartphone site on a separate URL, set up your server so that it redirects smartphone users to the equivalent URL on your smartphone site.
- If you use Dynamic serving, ensure that your user agent detection is correctly configured.
- If a page on your site doesn't have a smartphone equivalent, keep users on the desktop page. Showing the content the user was looking for is a much better experience than showing an error page.
- Use responsive web design when possible. This configuration allows you to serve the same content to users, whatever the device they use.
Many websites show interstitials or overlays that partially or completely cover the contents of the page the user is visiting. These interstitials, commonly seen on mobile devices promoting a website's app, mailing list sign-up forms, or advertisements, can make for a bad user experience. In extreme cases, the interstitial is designed to make it very difficult for the user to dismiss it and view the real content of the page. Since screen real-estate on mobile devices is limited, any interstitial negatively impacts the user's experience.
App Download Interstitials
Many site owners promote their business' apps to their mobile website visitors. If not done with care, this can cause indexing issues, and disrupt the visitor's usage of the site.
Use a simple banner to promote your app inline with the page's content. This banner can be implemented using:
- A browser-supported banner such as Smart App Banners for Safari or in-app install experience for Chrome.
- An HTML banner or image, similar to a typical small advertisement, that links to the correct app store for download.
Irrelevant Cross Links
A common practice when a website serves users on separate mobile URLs is to have links to the desktop-optimized version, and likewise a link from the desktop page to the mobile page. A common error is to have links point to an irrelevant page such as having the mobile pages link to the desktop site's homepage.
- Check your links to make sure that they point to the correct equivalent page.
Slow Mobile Pages
It's important to make sure your mobile site loads quickly. Users can become very frustrated if they have to wait a long time to see your content.
Use Google PageSpeed Insights to discover if your page has any issues that can slow your pages down, focusing on the "Speed" sub-section. Try to address the issues marked as "Should Fix."
For more information, see:
Set your viewport correctly
Because visitors to your site use a variety of devices with varying screen sizes, your pages should specify a viewport using the viewport meta tag. This tag tells browsers how to adjust the page's dimension and scaling to suit the device. Here are two common problems:
- Using fixed-width viewports. This makes the page not scale well for all device sizes (and there are a lot).
- Assuming an unrealistically wide minimum viewport, which can force users on smaller devices to scroll horizontally to read the content. This happens when pages use absolute values in CSS declarations, or use images designed to look best at a specific browser width (such as 980px). To fix this error, make sure the pages use relative width and position values for CSS elements, and make sure images can scale as well.
Small font size
Avoid setting the font size too small—generally smaller than 12px—to be legible on a mobile device, forcing those visitors to "pinch to zoom" in order to read. After specifying a viewport for your web pages, set your font sizes to scale properly within the viewport. Read more about font size best practices in Use Legible Font Sizes.
Touch elements too close
Avoid setting touch elements such as buttons and links so close to each other that a mobile user can't easily tap a desired element with their finger without also tapping a neighboring element. To fix these errors, make sure to size and space buttons and navigational links suitably for your mobile visitors. Read more in Size Tap Targets Appropriately.