2013-09

Building Mobile-Friendly Websites

by Gyorgy Bolla
 | 
20 September 2013

According to Google’s Mobile Search Moments research, the majority (77%) of mobile searches occur at home or at work, and only 17% on the go. The same research revealed that on average, each mobile search triggers nearly 2 follow-up actions that could be a store visit, a phone call, word of mouth mention or some kind of research. The vast majority (81%) of mobile searches are driven by speed and convenience, which clearly reflects how important site speed, navigation and mobile user experience (UX) are.

Google segments mobile phones into two categories. Feature phones with browsers that can’t render normal desktop webpages and smartphones with browsers that are capable of rendering normal webpages. The search engine has user agents for both categories.

Google’s mobile recommendations

  • Google recommends responsive web design, which serves the same HTML for all devices and uses CSS to decide the screen specific rendering.
  • If responsive web design is not the best option for a particular website, then the second best option (for Google) is to serve different HTML for desktop and mobile browsers. The different HTML files can be on the same URL or on different ones, because Googlebot can handle both setups appropriately if the webmaster follows Google’s recommendations.
  • None of these techniques has a special advantage or preference as long as the URLs are accessible to both Googlebot and Googlebot-mobile.

What is responsive design?

The server sends the same HTML code to all devices and CSS is used to alter the rendering of the page in each browser. The screenshots below show a responsive website in a desktop browser (left) and a mobile browser (right). The content is the same but the design changes according to the browser window size.

Why responsive web design is good.

Using a single URL per page makes it easier to link to and share across Social media sites. Having only one URL also means the page is indexed only once and eliminates any canonicalization issues.

Another advantage of responsive design is that no redirection is needed to serve device optimised views. This greatly reduces loading time on mobile connections. User agent based redirections are error-prone and require careful configuration.

Two other advantages of serving a single URL are:

a) Save on valuable website hosting resources

b) Search engine robots only need to crawl the page once as opposed to multiple times with separate mobile URLs.

Both of which can make a significant reduction on resources.

Possible errors with responsive design

Page load time is crucial for an enhanced user experience; therefore, responsive site developers need to ensure that any large background images, videos, ads and other features are optimised for mobile data connections.

If mobile pages show completely different content from their desktop counterpart, then using separate mobile URLs is probably a better solution as hiding content has a negative impact on search engine optimisation.

Google also warns that webmasters should not block the crawling of page assets such as CSS, JavaScript and images.

Dynamic serving

On a single URL a server responds with different HTML and CSS, although this is dependent on the user agent requesting the page. This is because it isn’t immediately apparent in this setup that the site serves different HTMLs for mobile browsers, Google recommends using the vary HTTP header.

Separate mobile URLs

A common solution is using the m.example.com for mobile pages. Google recommends separate mobile URLs when mobile content is different from the desktop version.In order to avoid duplicate content issues, it is recommended to add rel=“alternate” to the desktop pages and point to the mobile URLs. This indicates the location of the mobile URL to the search engine robots. For mobile pages, use the canonical tag and point to the desktop URL.

Common mistakes with mobile-friendly websites

  • Sometimes videos are unplayable on mobile devices.
  • Faulty redirects loading mobile pages for desktop browsers.
  • Screen size redirections serving the desktop pages for mobiles with high resolution screens.
  • Showing a smartphone 404 page for mobiles when mobile content is not available, instead of serving the desktop pages.
  • Google recommends using simple banners instead of pop-ups to promote apps.

Summary

A recent study from Adobe found that 45% of businesses don’t have a mobile-optimised website or mobile app and only 21% have both. It’s important to recognise that there is no ultimate solution that works for every website and mobile optimisation needs to be fully researched. The most important factor is to provide a great user experience for all device visits and ensure content is optimised for search engine robots to crawl efficiently.

Find out more about Salmat's eCommerce offering here or call us on 1300 725 628.

Sources:



50 search marketing tips

Page 1 of 2
  < 1 - 2  > 
About the author
Gyorgy Bolla
SEO Operations Manager – Salmat Digital

Gyorgy is the SEO Operations Manager at Salmat, with many years of experience across search engine optimisation and digital marketing. He specialises in SEO strategies in competitive markets, with a special focus on content marketing, social, conversion optimisation, web analytics and inbound marketing. Gyorgy has experience with Australian and international enterprise level clients and local search marketing with small & medium businesses.