Le Responsive Web Design (RWD) ajuste automatiquement l’affichage d’une page web à la taille d’écran du terminal utilisé. Cette technique de conception de site web, ou d’interface digitale, répond à un besoin des utilisateurs, toujours plus nombreux à se connecter sur le web depuis un appareil mobile.

Le Responsive Design permet de faciliter la navigation et d’améliorer l’expérience utilisateur lorsqu’il s’agit de consulter le site sur un appareil mobile. Le Responsive Web Design est souvent confondu avec un concept plus large, l’Adaptive Design. Design responsive ou Design adaptatif, les deux méthodes de conception visent à améliorer l’ergonomie mobile du site web. C’est un enjeu majeur pour les entreprises, tant en termes de référencement que pour s’adapter aux nouveaux usages.

Qu’est-ce que le Responsive Design ?

Le Responsive design a été traduit en français par Design réactif/adapté/réceptif. Ce design permet de modifier la mise en page d’un site afin que le contenu s’adapte à l’écran quel que soit le terminal utilisé (smartphone, tablette, ordinateur de bureau, TV…). Il s’agit d’adapter le site à toutes les résolutions. Autrement dit, les blocs de contenus (textes et images) se redimensionnent et se réorganisent en fonction de l’espace disponible sur l’écran.

Le CSS3 a rendu possible le Responsive Web Design

Le Responsive Web Design a bénéficié de l’arrivée des Media Queries de CSS3 (gestion dynamique des feuilles de style). Un site pensé en Responsive Web Design est conçu ainsi :

  • Une seule base de code HTML identique pour tous les terminaux.
  • Un système de grilles fluides où se placent les contenus de la page.
  • L’utilisation des CSS3 Media Queries pour appliquer la feuille de style adéquate.
  • Des images flexibles/adaptatives dont la taille/résolution s’ajuste automatiquement.

Lorsque l’objectif est atteint, l’interface du site web est lisible et utilisable sur tous les appareils. Le contenu se rétrécit et s’agrandit à volonté sans changer. Néanmoins, il est possible de cacher un contenu. Par exemple, une image ou un texte peuvent n’être visible que sur le site web en mode ordinateur (desktop) et tablette, et absents pour un affichage sur mobile.

Responsive design mobile first

On voit clairement l’avantage d’un contenu qui s’adapte à l’appareil utilisé, ceci évitant de zoomer pour lire le texte ou naviguer

Mais il y a aussi quelques inconvénients…

Le responsive Web Design charge l’ensemble du fichier CSS, y compris les informations destinées à un affichage sur ordinateur, ce qui peut retarder l’affichage sur les appareils mobiles.  On le verra plus bas, certains sites ayant des besoins critiques en rapidité d’affichage ou une utilisation de certaines fonctionnalités natives des appareils mobiles, gagneront à s’orienter vers d’autres solutions.

Responsive design CommitStripUnresponsiv design – CommitStrip.com
Source : usabilis.com