Webmasters

Building Smartphone-Optimized Websites

Introduction

With increasing smartphone usage, making a website that is friendly to smartphone users has now become a critical part of website management. This document outlines Google's recommendations to webmasters who wish to serve content in optimized formats for both desktop and smartphone users, and notes the common mistakes you want to avoid. We have pages about websites for tablets and feature phones too.

Overview of Google's recommendations

Google supports three different configurations for creating smartphone-optimized websites:

  • Responsive design: serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects. This is Google's recommended configuration.
  • Dynamic serving: serves different HTML for one URL depending on the user-agent. Use the Vary HTTP header to indicate you're doing this.
  • Separate mobile site: redirects users to a different URL depending on the user-agent. Use bidirectional link annotations to indicate the relationship between the two URLs for search engines.

Make sure you aren't blocking resources like JavaScrpt and CSS for search engines, regardless of which configuration you're choosing. For how-to on the technical implementation, visit our details page.

Types of mobile devices

  1. Smartphones: Phones with browsers that are capable of rendering normal desktop pages, at least to some extent. This category includes recent mobile browsers that can render HTML5, and covers a diversity of devices, such as Android-based phones and iPhones.
  2. Feature phones: Phones with browsers without the capability to render normal desktop webpages. This includes browsers for cHTML (iMode), WML, WAP, and the like.

We do not consider tablets as mobile devices because, among other reasons, they tend to have larger screens. Most tablet users expect to see tablet- or desktop-optimized pages when browsing the web. This means that, unless you offer tablet-optimized content, users expect to see your desktop site rather than your smartphone site.

Table of Contents

  • Details page talks about how to implement the different configurations you can use.
  • Common mistakes page lists gotchas that are frequently observed in smartphone optimized websites.
  • Redirects and user-agent detection page includes the tips you should know about when using user-agents to redirect users.
  • JavaScript page notes the different approaches to JavaScript serving in responsive web design.
  • Tablets page is for webmasters wanting to serve content for tablet users.
  • Feature phones page describes how to do it right for both smartphones and feature phones, if you're supporting them.
  • Googlebot user-agents page lists the user-agents we use for crawling mobile optimized websites.
  • Website improvement checklist page offers a list of improvements you can make after you've made your mobile website ready.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.