Un seul site web, plusieurs écrans. Le design adaptatif permet à une mise en page unique de s'adapter aux différentes tailles et orientations d'écran. Ce terme a été inventé par Ethan Marcotte en 2010, s'appuyant sur des concepts antérieurs de grilles flexibles et d'images fluides. Au lieu de créer des sites distincts pour ordinateurs et appareils mobiles, les concepteurs créent une seule base de code qui se réorganise automatiquement en fonction de la largeur de l'écran.

Trois éléments techniques permettent son fonctionnement. Les grilles fluides utilisent des pourcentages plutôt que des pixels fixes, ce qui permet aux colonnes de s'étirer et de se rétrécir. Les images flexibles s'adaptent à l'échelle de leurs conteneurs. Les requêtes média détectent la taille de l'écran et appliquent des règles CSS différentes à des points de rupture définis. Une mise en page à trois colonnes sur ordinateur peut se réduire à une seule colonne sur téléphone, la navigation se déplaçant alors dans un menu hamburger. L'objectif n'est pas un contrôle au pixel près, mais une adaptation harmonieuse.

Techniques fondamentales

• Grilles fluides basées sur des pourcentages.
• Images et médias flexibles.
• Requêtes média à des points de rupture définis.
• Priorisation du contenu mobile-first.

La conception adaptative est désormais une pratique courante. Les utilisateurs s'attendent à ce qu'un site fonctionne correctement, qu'ils l'ouvrent sur un téléphone, une tablette, un ordinateur portable ou une télévision.