Here are some common mistakes we see on smartphone-optimized websites and how to avoid them.
Many videos are not playable on smartphone devices. This can be due to requiring software or device capabilities that smartphones do not support or due to licensing constraints. We recommend using HTML5 standard tags to include videos and avoid content in formats, such as Flash, that are not supported by all mobile devices.
Regardless, try your best to offer smartphone users the best experience possible to make sure that the videos are playable on as many devices as possible. Also consider having the transcript of the video available on all devices as that may better serve your smartphone users.
Many sites have dedicated smartphone-optimized pages and redirect smartphone users based on the user-agent. A common error is to redirect a user trying to access a URL on the desktop site to an irrelevant URL on the smartphone site.
Some common examples:
•Your desktop site’s server is configured to redirect smartphone users to the smartphone site’s homepage, regardless of which URL they originally requested, even if the mobile site has the equivalent page to the redirecting desktop page.
•Desktop URLs with dynamically generated content and URL parameters that don’t map well to the equivalent mobile URL. For example, if a user is looking for a train timetable on a specific date on the desktop site and gets redirected to the general timetable search page on the smartphone-optimized site instead of the actual search.
We recommend that you configure the redirection correctly if you do have an equivalent smartphone URL so that users end up on the page they were looking for.
•Redirecting 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.
Some sites serve content to desktop users accessing a URL but show an error page to smartphone users.
To ensure the best user experience:
•If you recognize a user is visiting a desktop page from a mobile device and you have an equivalent smartphone-friendly 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 smartphone-friendly page itself is not an error page.
•If your content is not available in a smartphone-friendly format, serve the desktop page instead. Showing the content the user was looking for is a much better experience than showing an error page.
App download interstitials
Many webmasters promote their site’s apps to their web visitors. There are many implementations to do this, some of which may cause indexing issues of smartphone-optimized content and others that may be too disruptive to the visitor’s usage of the site.
Based on these various considerations, we recommend using a simple banner to promote your app inline with the page’s content. This banner can be implemented using:
•The native browser and operating system support such as Smart App Banners for Safari on iOS6.
•An HTML image, similar to a typical small advert, that links to the correct app store for download.
A common practice when a website serves users on separate smartphone-optimized URLs is to have links to the desktop-optimized version, and likewise a link from the desktop page to the smartphone page. A common error is to have link point to an irrelevant page such as having the smartphone pages link to the desktop site’s homepage.
If you add such links be sure sure that the links point to the correct equivalent page.
Optimizing a page’s loading time on smartphones is particularly important given the characteristics of mobile data networks smartphones are connected to. Here are some starting points:
- Make your mobile pages render in under one second
- Make the mobile web faster
- Optimize for mobile
- Use Google PageSpeed Insights