Le responsive design ou responsive web design (RWD) est une approche de développement web qui crée des changements dynamiques de l’apparence d’un site web, en fonction de la taille de l’écran et de l’orientation du dispositif utilisé pour le visualiser. Le RWD est une approche du problème de la conception pour la multitude d’appareils disponibles pour les clients, allant des minuscules téléphones aux grands moniteurs de bureau.

Le RWD utilise des « breakpoints » pour déterminer comment la présentation d’un site apparaîtra : un design est utilisé au-dessus d’un breakpoint(point de rupture) et un autre design est appliqué en dessous de ce breakpoint. Les breakpoints sont généralement basés sur la largeur de la fenêtre du navigateur.

En savoir plus

Le même HTML est envoyé à tous les appareils, en utilisant le CSS (qui détermine la mise en page de la page web) pour modifier l’apparence de la page. Plutôt que de créer un site séparé et une base de code correspondante pour les écrans larges, les ordinateurs de bureau, les ordinateurs portables, les tablettes et les téléphones de toutes tailles, une seule base de code peut prendre en charge les utilisateurs ayant des fenêtres de taille différente.

Dans le cadre d’une conception adaptée, les éléments de la page sont remaniés en fonction de la taille de la fenêtre d’affichage. Un ordinateur de bureau à trois colonnes peut se transformer en deux colonnes pour une tablette et en une seule colonne pour un smartphone. La conception responsive s’appuie sur des grilles proportionnelles pour réorganiser le contenu et les éléments de conception.

Si la conception réactive est apparue comme un moyen de fournir un accès égal à l’information quel que soit le dispositif, il est également possible de cacher certains éléments sur des écrans plus petits. Les décisions relatives au masquage du contenu et des fonctionnalités, ou à la modification de l’apparence des différents types de dispositifs doivent être prises en fonction des connaissances de vos utilisateurs et de leurs besoins.

Le RWD présente des avantages potentiels par rapport au développement de sites séparés pour différents types d’appareils. L’utilisation d’une base de code unique peut accélérer le développement, par rapport au développement de 3 ou 4 sites distincts, et facilite la maintenance au fil du temps, car il faut mettre à jour un seul ensemble de codes et de contenus plutôt que 3 ou 4. Le RWD est également relativement « future proof » dans la mesure où il peut prendre en charge les nouveaux points de rupture nécessaires à tout moment. Si un appareil de 5 pouces ou de 15 pouces prend son essor sur le marché, le code peut prendre en charge les nouveaux appareils. Le RWD ne lie pas la conception à un appareil particulier.