Ouvrez un site web sur votre téléphone, puis sur un ordinateur portable, puis sur une télévision. S'il s'affiche correctement sur les trois appareils sans avoir à zoomer ni à plisser les yeux, il a été conçu selon les principes du responsive design. Cette approche permet à un seul code source d'adapter sa mise en page, ses images et sa typographie à l'écran sur lequel il s'affiche.

Ethan Marcotte a inventé le terme en 2010, au moment où la navigation mobile explosait et où les concepteurs devaient choisir : créer des sites distincts pour chaque appareil ou un site adaptatif. Le design responsive s’est imposé. Ses principaux outils sont les grilles fluides, les images flexibles et les requêtes média. Une requête média interroge le navigateur sur la largeur de la fenêtre d’affichage et applique différentes règles CSS en fonction de la réponse.

Qu'est-ce qui rend un design réactif ?

• Grilles fluides utilisant des pourcentages au lieu de pixels fixes
• Images flexibles qui s'adaptent à l'intérieur de leurs conteneurs
• Requêtes média qui appliquent des points de rupture pour différentes tailles d'écran
• Cibles tactiles adaptées aux mises en page mobiles

L'objectif n'est pas simplement d'adapter le contenu à un petit écran. Il s'agit de préserver la lisibilité, la hiérarchie et l'ergonomie dans tous les contextes. Une mise en page à trois colonnes sur ordinateur peut se réduire à une seule colonne sur téléphone. Un menu hamburger remplace une barre de navigation complète. Un bon design adaptatif semble aller de soi, comme si le site avait toujours été conçu pour s'afficher ainsi sur votre appareil.