Responsive design
Définition
Le responsive design est une méthode de conception web qui adapte automatiquement la mise en page d'un site à la taille de l'écran, du téléphone à l'ordinateur, à partir d'un seul et même contenu.
Plutôt que de créer un site mobile séparé, on conçoit une seule version dont la disposition change selon la largeur disponible : colonnes empilées sur téléphone, menus repliés, images redimensionnées. Techniquement, cela repose sur des grilles flexibles et des règles CSS appelées media queries.
Pourquoi c'est devenu indispensable
- Une grande partie des visites se fait sur téléphone, souvent au moment de chercher un contact.
- Google explore et évalue principalement la version mobile des pages.
- Un seul site à maintenir, avec les mêmes adresses et le même contenu.
Ce qu'il faut vérifier sur téléphone
- Les textes se lisent sans zoomer.
- Les boutons et les liens sont assez grands et assez espacés pour le doigt.
- Le numéro de téléphone est cliquable.
- Les tableaux défilent sans casser la page.
- Les formulaires affichent le bon clavier selon le champ.
- Rien ne déborde horizontalement.
Au-delà de l'affichage
Un site responsive doit aussi rester rapide sur un réseau mobile : images adaptées à la taille de l'écran, scripts limités. Ces points pèsent sur les Core Web Vitals.
La réflexion commence dès le wireframe : concevoir d'abord la version mobile oblige à hiérarchiser l'essentiel.