The most common mistakes in smartphone sites according to Google

Google are paying ever more attention to the mobile market and so, developers pay attention when the Big G is making recommendations. Google recently published a [url=https://developers.google.com/webmasters/smartphone-sites/common-mistakes]document[/url] on the main mistakes people make when working on mobile websites for smartphones. If you look through the list you can definitely recognize a cornerstone of Google’s approach: [b]focus on the end user[/b]. Or put another way, “adopt the approach you want but be aware of your audience”.

It’s worth noting here that Google’s advice is for smartphones only. It doesn’t include a strategy to go beyond that, and [url=http://mobiforge.com/designing/blog/global-reach-and-dynamic-page-weight-%E2%80%93-there-a-correlation]is not what Google or many of the top web brands do themselves[/url]. That said, let’s take a look at the advice.

Google is critical of the use of [b]videos [/b]and sees it as an often neglected area on mobile sites where content is often unplayable due to incompatible device capabilities: not surprisingly, it recommends avoiding the use of Flash or any format that is not supported across all devices or adds too much weight to a page.

Google recommends the use of HTML5 standard tags for videos which are supported on modern mobile devices [url=http://mobiforge.com/developing/blog/why-html5-still-presents-some-problems-mobile]except [/url]on outdated operating systems (such as iOS 3.27 and Android 2.3). However, as [url=http://diveintohtml5.info/video.html]DiveintoHTML5 points out[/url] [i]”there is no single combination of containers and codecs that works in all HTML5 browsers. This is not likely to change in the near future. To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once”[/i]. Basically the following is the [b]structure to embed video using HTML5[/b]:

or simply:

Google say it is a user experience sin to publish content that is not available in a smartphone-friendly format and where an error page is shown when smartphone users navigate to it.

Another issue that Google highlights in their evaluation of mistakes in mobile development is page speed where related to page weight. People have [url=http://www.speedawarenessmonth.com/fast-vs-slow-website/]little time to lose[/url] when they surf the Web from their mobile phones and do not want additional costs associated with heavy, slow browsing. This is one of the most common errors that impacts on both end users. For companies, slow experiences impact on visitor numbers as most people will tune out after only 6 seconds wait. Research shows that conversion rates drop by 3.5% if the customers have to wait for more that 3 seconds and 57% of them [url=http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/website-abandonment-happens-after-3-seconds/]leave the site[/url].

At the moment [b]there are a number of ways to reduce page weight and increase the websites’ speed[/b], besides compressing JavaScript and CSS. Reducing the number of HTTP requests, as suggested [url=http://www.speedawarenessmonth.com/15-things-for-making-your-site-faster-for-mobile-users/]here[/url]; controlling how images are cached and optimized (see free compression tools [url=http://www.netmagazine.com/features/best-image-compression-tools]here[/url]); even using a Content Delivery Network are all valid approaches. [url=http://www.websiteoptimization.com/speed/tweak/average-web-page/]This analysis[/url] from WebSiteOptimization is still a good starting point to understand the issues around why page weight is still so important. Elsewhere on MobiForge you can find a good analysis of the importance of page weight [url=http://mobiforge.com/designing/blog/global-reach-and-dynamic-page-weight-%E2%80%93-there-a-correlation]here[/url] and we have also written recently about the [url=http://mobiforge.com/starting/blog/why-responsive-web-design-not-always-best-option-a-mobile-seo-strategy]importance of page weight for SEO[/url].

[b]Faulty redirects[/b] are a major bugbear for Google as they negatively affect mobile user experience. An example of this is where a site may only redirect Android users to the mobile site without detecting iPhone users. Or where a smartphone site URL redirects users to a page on the desktop-optimized site or vice versa. Developers have to be sure they configure redirection correctly and have an equivalent smartphone URL so that users end up on the page they were looking for.

There are different ways to redirect your website to the appropriate mobile version and [url=http://www.stepforth.com/resources/web-marketing-knowledgebase/redirect-mobile-iphone-visitors-mobile-content/#.UWVicFEp5As]Stepforth outlines[/url] the most common ones, assuming you’re not using device detection software which can redirect users to the appropriate experience based on the device they’re using.

Google itself [url=https://developers.google.com/webmasters/smartphone-sites/redirects]recommends[/url] the use of the following annotations for desktop and mobile pages both in the HTML of the pages and in Sitemaps. On desktop pages, Google recommends adding the link [b]rel=”alternate”[/b] tag pointing to the mobile URL while on the mobile page it recommends adding a link [b]rel=”canonical”[/b] tag pointing to the desktop URL. If your site serves content or redirects users depending on the user-agent it’s necessary, according to Google, to [b]include the Vary HTTP header[/b] to serve automatic redirects in this form:

Even in 2013, irrelevant cross-linking between the desktop and Smartphone pages is still a major problem which Google highlights. Google urges that any signposts to access the mobile version or the desktop version points to the appropriate page rather than a non related page.

In summary, to format content correctly for mobile devices you need to test, test and test again [b]on multiple devices using online tools[/b] such as [url=http://mobitest.akamai.com/m/index.cgi]Mobitest by Akamai[/url] or our [url=http://prism.mobiforge.com/]Prism by dotMobi[/url]. Consider the two magic words, optimization and adaptation to make the right decisions based on real user needs and activities exactly like Garrett Goodman [url=http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html]suggests[/url] in The Huffington Post quoting [url=http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques]Ronan’s post[/url].

If you want to take part on the discussion about Google’s post, we suggest going to [url=https://plus.google.com/+PierreFar/posts/JbuyWahoqsT]Pierr Far’s Google Plus page[/url].