Le Responsive Web Design (RWD) est une technique qui vise à concevoir des sites internet qui s'adaptent automatiquement aux dispositifs utilisés.
L’affichage des pages est ainsi conçu pour que leur taille s'adapte à celle des écrans sur lesquels elles sont visualisées.
En matière de conception de sites web, différentes techniques doivent aujourd'hui être prises en compte, à la fois pour améliorer l'expérience utilisateur mais aussi pour optimiser le référencement.
Le responsive design fait ainsi partie des nouvelles exigences des standards du web.
Rendu possible grâce à l’arrivée des Media Queries de CSS3, le Responsive Web Design permet de concevoir des sites dotés :
- D’un code HTML unique, quel que soit le terminal utilisé ( smartphone, tablette, PC, etc.) ;
- De contenus, notamment visuels, dont la résolution s'adapte automatiquement aux dispositifs utilisés ;
- D’un système de grilles fluides permettant aux contenus de la page de s’adapter à la taille de l’écran ;
- Du CSS3 Media Queries qui se charge de gérer les feuilles de style.
Grâce au Responsive Web Design, l’interface du site web est parfaitement lisible et utilisable sur tout type d’appareil. Le contenu, qu’il s'agisse du texte ou des visuels, s'agrandit ou se rétrécit automatiquement selon le terminal utilisé.
Le RWD permet également de cacher un contenu pour qu’il soit par exemple uniquement visible sur PC mais pas sur mobile.
Cette technique de conception de sites web s’appuie sur les valeurs de point de rupture/point d’arrêt ou breakpoints. Celles-ci sont utilisées pour définir les gabarits des pages et les intervalles associées sur chaque type de dispositif (PC, tablette, TV ou smartphone).
Le Responsive Web Design présente de nombreux avantages.
A la différence de l’adaptive design, le webdesigner n’a besoin de développer qu’un seul code HTML pour que son site s’affiche correctement sur toutes les tailles d’écran. C’est d’ailleurs pour cette raison que la majorité des frameworks, comme Bootstrap, sont pensés pour créer des sites avec un design responsive.
Pour l’utilisateur, le RWD est également une véritable avancée en matière d’ergonomie et de fluidité. Le site qu’il souhaite consulter s'affiche correctement sur PC, tablette ou mobile et les différentes fonctionnalités s'adaptent également.
En matière de référencement naturel (SEO), le Responsive Web Design est également essentiel. Il permet en effet de répondre aux exigences des moteurs de recherche et notamment de Google.
Avec la tendance du Mobile First, Google tend en effet à favoriser le positionnement des sites optimisés pour les mobiles.
