Responsive Web design - responsive website

Before developing the subject of mobile compatibility, it is important to note that the term "mobile" refers only to Smartphones (iPhone type Samsung Galaxy ...) and not tablets (iPad, Surface...).

Also note that from a technical point of view there are three possible ways to welcome mobile visitors.

In this article we will discuss all three methods, but we will look specifically at Responsive Web design which was officially recommended by Google for better search engine optimization - SEO.

What is the Responsive Web design – responsive website ?

A responsive website (adaptive, responsive website or website with a RWB design) is a site whose pages automatically adapt to any screen size (Smartphone, tablet, computer screen).

Whatever the nature or screen size of the device used to coming to your site, visitors will have a comfortable reading and navigation.

Why having a responsive website ?

To improve your SEO, Google officially recommanded to have a responsive website. Since the 21 April 2015 update, the responsive websites are highlighted in Google's search results and thus attract more organic traffic.

Google had the following reasons to justify this update:

  • Web traffic from mobile devices is growing.
  • Most people have a mobile phone and fast access to mobile Internet.
  • At the same time, most websites were not optimized for mobile. Mobile devices are often limited by the display size - compared with computers and tablets.
  • Recent studiesshow that mobile users are more likely to return to the sites adapted to mobile

What are the characteristics of a responsive website?

Before talking about the impact of a responsive site SEO (SEO), we should first understand what a responsive website

  • The display window is adjusted to the size of the device used
  • The content automatically fills the display without having to scroll horizontally or to enlarge the page.
  • Font sizes automatically adapt to the screen size.
  • The action buttons or other tactile elements are easily accessible.

Here is a simplified example of a responsive website:

The diagrams below are a simplified version of the display content on an adaptive site. There are obviously elements specific to each site with which it must deal: navigation, multimedia content, search bar….

  • Simplified display on a computer:
  • Simplified display on a tablet :
  • Simplified display on a mobile phone:

Impact of a responsive site on the SEO

In addition to reducing the content creation and maintenance costs associated with running a website and a separate mobile website, the move to a responsive website also provides concrete benefits for Improving Your SEO – mobile SEO.

1. The navigation ease (usability) of a responsive website has an impact on the SEO

The goal of Google is to offer to its users websites that meet their expectations.

Indeed, when users arrive on your site but soon exit it, without reading the proposed content or without visiting other pages on the website, Google detects this behavior and deduces that your site is not relevant to the search query.

If your mobile website has less content or is too different from your website, your visitors may be frustrated and leave your site for a competitor’s website.

You will lose some interesting visitors, your bounce rate will increase and eventually you will lose good rankings in Google search results

Google has officialy announced that the websites which are not compatible with mobiles will drop in rankings.

Not appearing in mobile results could lower your overall traffic, you may lose some of your potential customers which began prospecting on mobile.

3. Mutual backlinks for mobile SEO optimization.

If you have a mobile website and a website that co-exist, the vast majority of backlinks (incoming links) will go on the website. Your mobile site could suffer from a popularity deficit which could impact your mobile SEO .

Developing a responsive website allows you to share all your backlinks, which could improve your mobile SEO.

4. Get ahead on mobile SEO

More than half of the websites are not mobile compatible. Passing on a responsive website before your competitors will give you the chance to reach the first position and keep it thanks to your background.

How to make your site mobile?

There are three distinct ways of adapting your website to mobiles, making it « mobile friendly ».

Google acknowledges and supports these three methods of creating a mobile website but recommends the responsive website.

1. Responsive web design

The Responsive Web Design also known as RWD is a configuration in which your server sends the same HTML to all devices (computers, tablets and mobile). The adaptation of the display according to the pages of the device will be made thanks to CSS.

In order that the Responsive Web Design configuration will be automatically detected by Google, it must obviously allow Googlebot users-agents to crawl your site and all its components (CSS files, JavaScript and images).

This means that the CSS files, JavaScript and images are crawlable in robots.txt

Since April 21st 2015, this method is recommended by Google.

2. Dynamic serving

Dynamic servign is a configuration in which your server serves a different HTML and CSS on the same URL. This difference in the display is defined by the user-agent that needs to access the page.

The User Agent is a signature sent to all browsers (either mobile, tablet or computer). This allows the Web server hosting the website in question to return the appropriate content.

If it’s a user agent for desktop which explores your website, the mobile version will not be shown.

The display is dynamic, user-agents can’t know in advance that the site adapts the HTML code according to their queries.

If you choose this method, Google recommends (to facilitate understanding) to configure the server so that it sends a clear indication to the user-agent of the smartphone so that it effectively explores mobile content.

Use the HTTP header « Vary » to report your change depending on the user agent.

3. Using different URLs for the mobile website.

Under this configuration, each URL of the site (ex: www.mywebsite.com) viewable via a computer has an equivalent URL (m. Mywebsite.com) that displays optimized content for mobile.

How to make my website Mobile Friendly ?

If you have designed your website with a CMS (content management system) and you know what software your website has been designed with, check out the following Google tips:

What are the main errors to avoid ?

To submit your mobile-friendly website and improve the SEO of your website in the mobile search results, here are the mistakes to avoid:

1. JavaScript Files, CSS and images blocked by the robots.txt. file

Make sure the JavaScript files, CSS and images that make up your site are accessible by Google Bot.

If your robots.txt file prevents Googlebot from crawling the JavaScript files, the CSS and images, it will prevent the crawling and indexing of your content in mobile search results.

2.Inaccessible content via mobile devices

Some type of videos or Flash movies can’t be displayed on mobile devices. To ensure full accessibility of contents available on your site, use HTML 5 tags.

3. Incorrect redirects

If you prefer to use separate URLs for the mobile version of your site, make the perfect correspondence between web URLs and mobile URLs.

The webpage A must redirect towards mobile page A.

4. 404 Error generation only on mobiles

If you detect a visitor which accesses a desktop page from a mobile device, if you have the equivalent of a dedicated mobile URL, then automatically redirect the user towards the latter.

Make sure the mobile page offers the contents sought by the visitor.

5. Slow loading on mobile

The loading time is an important criterion for the SEO of a website.

This criterion is especially important on the mobile where users are on the move and do not always have the same connection quality on their mobile than at home.

To verify the page speed of your website : Page Speed