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.
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:
- advice for Wordpress
- advice for Joomla !
- advice for Drupal
- advice for Blogger
- advice for Magento
- advice for Prestaphop
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:
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