Responsive Design: Optimize your site for mobile devices

Usage of mobile devices forms a significant source of web traffic and, just like for computers, it is necessary to optimize your site so that it works best on mobile devices. Here are some basic ideas (and techniques) to understand everything a little more clearly.

Search engines classify websites optimized for mobile media into three categories:

• Sites using responsive web design. The structure of URLs and HTMLs remains the same for all media (mobile or not) and only the CSS varies to adapt to the resolution of the screen used. This is the configuration recommended by Google.
• Sites that use the same URL’s structure but whose HTML and CSS vary according to the media used.
• Sites that use specific URLs based on the media used.

In this article, we will see how to implement each of these three configurations.

Responsive web design

Responsive web design is a configuration where the server always sends the same HTML code for all devices and where CSS changes the appearance of the page based on the size of the screen used. Search engines automatically detect this configuration and the user can thereby consult the pages in an optimal manner. To give you an example, here is the kind of CSS specification you can use:

@media only screen and (max-width: 640px) {...}

The maximum width of 640 pixels is only an example, not an obligation. However, try to define a reasonable width compared to the sizes of smartphone screens used most frequently. Each technical configuration has its advantages and disadvantages, so you can set up the one that works best for your site. Generally, if your configuration works on Google Chrome or Apple Mobile Safari, it will be compatible with most search engine algorithms.

Why use responsive web design?

Here are the three main reasons why search engines encourage you to use responsive web design:

• By assigning the content of a web page to a single URL, you will facilitate its interaction with your visitors, and also facilitate the sharing and the creation of links that refer to your content. In addition, this will help the search engines to index your content correctly.
• Not redirecting (depending on the device used) reduces the page loading time, which is considered to be one of the major components in regards to quality of user experience.
• You save time and resources both for your website and for the search engine robots that analyze your links (the so-called “crawlers”). The pages optimized for responsive web design need to be analyzed only once by the robots (unlike other non-optimized pages) to recover your content. This optimization will allow robots to better index your content and display your updates faster.

Please note: Make sure you do not prevent robots from analyzing all the components of your pages (CSS, JavaScript, images) that use robots.txt or other extensions. The fact that robots have easy access to these external files will allow them to automatically detect your optimized configuration in responsive web design and therefore display your content appropriately.

Using the same URL structure but a different HTML

This configuration will allow the server to respond to user requests with different HTML (and CSS) code while keeping the same URL. In this configuration, the fact that the site changes the HTML code for mobile users is not immediately visible. Indeed, the content of the mobile site is then “hidden”, so it is recommended that the server sends a signal to the robot of the search engine so that it comes to analyze the page and discovers the mobile content. This trick is implemented using the “HTTP Vary” header.

HTTP vary header

The HTTP Vary header is important for the following two reasons:

• It tells the cache servers used by the access providers that they must analyze the media used by the user when deciding whether to display the page using the information contained in the cache or not. Without the HTTP Vary header, the cache used for mobile devices can be mistakenly used for another device or vice versa.
• It helps search engine robots analyze your mobile-optimized content more quickly.

The HTTP Vary header is therefore part of the server response in relation to a given query, for example:

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)

 HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

This means that the content of the response will vary depending on which user agent is requesting to view the page. If your server already uses the HTTP Vary header, you can add “user agents” to the list that has already been used.

Using specific URLs for different devices used

In this configuration, each “desktop” URL has a “mobile” version optimized for displaying content. For example, we will have an imaginary page whose URL structure would be www.pagedemonsitetropcool.com for users of a computer and m.pagedemonsitetropcool.com for users of mobile devices. Search engines do not favour this particular URL format as long as both are accessible by robots.

Annotations for desktop and mobile URLs

To help search engine crawlers understand the configuration of your site, it is recommended to use the following annotations:

• For desktop-optimized pages, add a special link rel = “alternate” tag pointing to the corresponding “mobile” URL. This will help the search engine robot find the location of the mobile page corresponding to your content.
• For “mobile” optimized pages, add a rel = “canonical” tag link pointing to the corresponding desktop URL.

There are two methods for setting up these annotations: Directly in the HTML of the pages or in the site map. For example, suppose that the desktop URL is http://example.com/page-1 and that its corresponding mobile URL is http://m.example.com/page-1, the annotation would be:

For the “desktop” page,

<link rel=”alternate» media= ”only screen and (max-width: 640px) ” href= http://m.example.com/page-1”>

For the “mobile” page

<link rel=”canonical” href=http://www.example.com/page-1>

Annotations for your website map

Here is the line of coding you must include for optimized pages for computers:

&ltxml version=”1.0″ encoding=”UTF-8″?>

<urlset

  >

<url>

<loc>http://www.example.com/page-1/</loc>

<xhtml:link

    rel=”alternate”

    media=”only screen and (max-width: 640px)”

    href=”http://m.example.com/page-1″ />

</url>

</urlset>

The rel = “canonical” tag of the mobile URL will have to be added to the HTML code of the mobile page.

These annotations help search engine robots discover your content and understand the relationship between your “desktop” pages and your “mobile” pages. When you use different URL’s to give access to the same content in different formats, the annotations explain to the search engine algorithms that these two URLs have the same content and should therefore be considered as one entity and not two.

If both URL’s are processed separately, they will both appear in the search results and their position may be lower.

Do not hesitate to contact us at 514 572 7758 or via our contact form if you wish to speak with an expert who will answer all your questions.

Maxence Pezzetta

Cofondateur et Spécialiste Web Marketing et acquisition de clients Diplômé d’une double Maîtrise en Marketing et Communication, Max cumule plus de 10 ans d’expérience en Marketing digital. Ancien employé de Microsoft, sa mission est de « mettre le Web à la portée de tous » pour aider les entreprises à améliorer leur présence en ligne.