Building mobile friendly websites according to Google

Google’s Zineb Ait Bahajji on the importance of being mobile these days: In 2015 for the first time more users accessed the web on mobile devices than others. Building Mobile Websites according to Google’s Webmaster Guidelines Zineb Ait Bahajji, Webmaster Trend Analyst, Google Switzerland Offering mobile optimized content is paramount in a more and more mobile world with local search behaviour.

According to Think With Google / mobileplanet the main barrier to mobile commerce is the small screen (44%). But also the verification of credit card security is an issue (31%). It’s also hard to type on the small screen (27%) and hard to compare prices and options (21%). Page load times (21%) together with non mobile friendly information (14%) further hamper the mobile experience.

There are 3 configuration options for mobile sites:

• Responsive design
• Dynamic serving
• Separate URLs

The decision on which to use depends on your user’s needs, your internal capabilities and your strategy. Responsive sites are more error proof, while dynamic serving allows for usage of dedicated smartphone features and mobile optimized content. Only data gets delivered that actually serves the requesting device. Google’s algorithms check mobile-friendly sites for

• Primary content not in Flash
• Viewport must be configured (meta-tag)
• Readable font size
• No fixed-width viewport
• Content sized to viewport
• Tab targets clickable (not too close)
• No horizontal scrolling

Once your site complies with these criteria you get a mobile-friendly badge in Google’s search results.

Mistakes to avoid

Avoid blocked content that can’t be crawled by Google’s robots (check your robots.txt file). Even CSS, JavaScript or images files and folders should be accessible, as they define the mobile experience. Avoid faulty redirects, eg. www.example.com/ and its sub-folders should properly redirect to m.example.com and its sub-folders. Avoid unplayable content, e.g. Flash content. Test videos for proper HTML5 video tags. Avoid app interstitials that show up before the mobile site is loading. Instead use banners to promote your mobile app.

Mobile-friendly test tools

Use the Mobile-friendly test: http://g.co/mobilefriendly Use the PageSpeed Insight tool https://developers.google.com/speed/pagespeed/insights/ Check the Mobile Usability Report in your Webmaster Tools account! Google survey on user needs http://bit.ly/1KiFn8o