Suite au coronavirus, nous sommes disponibles et organisés en télétravail, conformément aux directives du gouvernement.

 

Définition du Responsive design

Agence SEO.fr > Définition – Les termes du référencement > Définition du Responsive design

Qu’est-ce que le responsive design ?

Le Responsive Design ou plus précisément le Responsive Web Design (RWD) est une technique de conception d’interface digitale qui fait en sorte que l’affichage d’une quelconque page d’un site s’adapte de façon automatique à la taille de l’écran du terminal qui le lit. Il est différent de l’Adaptative Design bien que les deux concepts aient pour but d’améliorer l’ergonomie mobile du site web.

Le Responsive Design adapte la mise en page d’un site en fonction de la résolution d’écran

Le web design auto adaptatif, c’est l’expression qui explique au mieux cette technologie d’affichage des sites web sur appareil mobile. L’objectif est bien sûr de faciliter la lecture et la navigation de l’internaute quel que soit le type de terminal qu’il utilise.

Avec un smartphone, une tablette, un netbook, une TV connectée ou tout simplement un ordinateur, la page lui apparaîtra complète et ergonomique sans aucune manipulation à faire au niveau du zoom avant/arrière et de la barre de défilement horizontal. Le code du site adapte sa mise en page en fonction de l’écran qui présente ses pages. Il y a un redimensionnement automatique des blocs de contenus textuels et graphiques ainsi qu’une réorganisation de leur disposition.

Cette solution qui peut être résumée par l’expression « Mobile first » est une réponse à la tendance actuelle des internautes à utiliser de plus en plus des appareils mobiles et a été rendue possible grâce aux Media Queries de CSS3. Derrière cette auto adaptation se trouvent un code HTML identique pour les différents types de terminaux, des graphiques ayant des résolutions adaptatives, un système de grilles fluides et bien sûr les CSS3 Media Queries qui gèrent les feuilles de style.

Une règle permet aux webdesigners de gérer facilement la création de ce design. Il s’agit de partir d’un affichage en 320 px puis de monter vers des résolutions de plus en plus grandes.

Le Responsive Web Design a des avantages certains mais aussi un inconvénient majeur quand même

Les avantages du RWB sont importants, du moins tant que le webdesigner s’y prend bien dans sa conception, c’est-à-dire s’il soigne le fond de ses pages, anticipe le comportement des usagers, tient compte des fonctionnalités des différents terminaux tactiles et sait exploiter la tendance des résolutions à s’agrandir. Le simple Drupal V8 tout comme la puissante version 3.8 du CMS WordPress sont à son service pour ce faire.

Pour créer un site qui s’adapte à tous les affichages, il n’aura qu’à développer un seul code HTML. Du côté de l’utilisateur, la positivité de l’expérience sur le plan ergonomique n’est plus à présenter. Néanmoins, la perfection n’existe pas puisque cette aptitude à être adaptif sur les écrans mobiles s’accompagne d’une dégradation de la vitesse d’affichage des pages. La raison en est que le RWB doit charger la totalité du fichier CSS.

Bien que cette dégradation soit minime, elle peut être suffisamment pénalisante pour certaines applications mobiles pour justifier le choix d’une solution autre que le Responsive Design. Il y a quand même une possibilité pour le créateur du site de ne laisser apparaître certains éléments de contenu que sur les résolutions supérieures à celles des smartphones pour contourner ce genre de problème.

Il est à noter aussi que ce temps de chargement des pages n’a qu’un très faible impact sur le positionnement en termes de SEO mais a une grande importance pour le mobinaute.

Image par Free-Photos de https://pixabay.com

Vous souhaitez en apprendre plus ?

Rejoignez nos formations pour devenir un professionnel du SEO !

Nos formations
Vous souhaitez travailler avec cette équipe ? Nous sommes prêts !

Parlez-nous de votre projet