Définition du RWD
Le responsive design, aussi appelé RWD (abréviation de Responsive Web Design) est une nouvelle façon de concevoir les sites web afin qu’ils puissent être consultés de manière optimale quel que soit le support utilisé.
Avec la mode des tablettes et des smartphones, les habitudes des internautes changent. Les sites Internet doivent donc s’adapter à ces nouveaux supports dont les définitions d’écran sont quasiment toutes différentes.
C’est là tout l’intérêt de la technologie du "responsive web design" qui signifie littéralement "conception web adaptive".
Fonctionnement du RWD
Le principe du responsive design est simple : une seule interface accompagnée d'une URL est prévue pour fonctionner avec une ergonomie adaptée quel que soit le terminal de lecture (ordinateur, tablette ou smartphone).
Cette technologie relativement récente utilise les media queries des feuilles de style. Cette fonction en CSS 3 permet de cibler la largeur, la hauteur ou encore l’orientation d’une page dans une seule et unique feuille de style.
Au final et pour une même adresse web, les pages du site s’adaptent automatiquement au format de lecture utilisé. Sur les plus petits écrans, seuls les contenus les plus intéressants restent affichés sur la page et il n’est plus nécessaire de zoomer pour lire le texte.
Si vous voulez en faire l’expérience, il vous suffit de vous rendre sur un site utilisant cette technologie (par exemple photoreview.fr ci-dessous) et de réduire la taille de la fenêtre avec votre souris. Vous verrez alors, comme par magie, le contenu du site s’adapter à la taille de la fenêtre.
Avantages du RWD
Le responsive design a des avantages évidents pour les internautes, puisqu’il leur assure une lecture et une navigation agréables quel que soit l’appareil utilisé.
Mais cette technologie est aussi avantageuse pour les concepteurs de sites. Elle leur évite de développer des versions spécifiques pour smartphones et tablettes.
La coexistence de versions mobiles comporte toujours des risques d'erreurs et de déperdition en terme de référencement naturel. Et bien sûr, avec le RWD, le coût de développement est moins élevé qu’un site mobile dédié.
En contrepartie, avec le responsive web design, les pages sont souvent plus longues à charger qu'avec une version mobile dédiée.
Exemples de RWD
De plus en plus de sites adoptent le responsive design, à commencer par le site officiel de Barack Obama (http://www.barackobama.com/).
En France aussi, quelques sites utilisent cette technologie, notamment :
• ZDNet, site spécialisé dans les nouvelles technologies
• le site officiel de l'Élysée
• Photoreview, un site consacré à la photographie.
