Recommendations for creating websites that are optimized for smartphones

Level of training webmaster: any

People increasingly prefer to use smartphones, and more and more sites optimize their content for viewing on these devices. Since we last talked about website design for mobile platforms, we have managed to significantly improve support for their content. So, back in December 2011, Google robot for mobile sites was launched, which processes just such content.
Today we want to give you recommendations on how to create and optimize websites so that they are equally well displayed on both a regular computer and a smartphone.

Site Development Tips

Below are brief recommendations, more information can be found here . As we recently reported , this site is now available in Russian.
In the case of sites designed for smartphones, Google supports three different configurations:
1. Sites with responsive web design. This implies that the same URLs are opened on different devices. The HTML code does not change, and the adaptation of the page to a specific platform is provided by CSS. Google recommends using this configuration.
2. Sites that on all platforms use the same set of URLs, but at the same time, conventional computers and mobile devices are dynamically provided with different HTML and CSS code.
3. Content for various devices is placed on separate sites.

Responsive Web Design

This technology uses CSS3 media queries. All devices are provided with the same HTML page code, but its display is modified by different CSS styles selected using media queries. Read more about responsive design in the post “Adaptive design based on media queries” and in our recommendations .
Here are some of the advantages of responsive design:

• All devices open the same URL, which is easier to use, link to them and share them. In addition, it's easier for us to index your content.
• Google can detect your content more quickly because it doesn’t need to crawl pages with various Googlebot robots to find and index all content.

Separate HTML code for various devices

Since in many situations the use of responsive design is not possible, websites may contain HTML code that is designed for specific devices and is located on the same URL (dynamic display) or on different (for example, www.example.com and m.example.com) .
If you are using a dynamic display, it is highly recommended to use the Vary HTTP header. This solution allows us to use caching servers, and our algorithms take into account that the content changes depending on the client applications that request the page. In addition, you can tell us that a Google robot for mobile sites must be used for crawling. Read more about it here .
There are several ways to implement a separate site configuration for mobile devices. We recommend that you indicate to Google algorithms using comments that your pages for a regular computer and a mobile device are equivalent. In other words, the new comments describe the relationship between the two versions of content, which should be treated as the same, but for different platforms.
With these comments, we will find content for smartphones, and our algorithms recognize the content structure - and the site will look better in search results.
')

Conclusion

This entry is only a summary of our recommendations for creating websites optimized for smartphones . Check out the full version and select the appropriate configuration for your web resource. As usual, if you have additional questions, you can ask them on our Webmaster Help Forum .