Design web adaptatif : un guide pratique
Le design adaptatif, c'est un seul site qui fonctionne à toute largeur, pas une version mobile séparée. En pratique, la plupart des sites sont adaptatifs sur le papier et cassés à des endroits précis : un tableau qui impose un défilement horizontal, une navigation qui mange un tiers de l'écran, un formulaire qui zoome de façon imprévisible sur iOS.
Ce guide couvre comment l'aborder, où sont les vrais échecs, et comment les tester.
Concevez depuis l'extrémité étroite#
Commencer étroit force les décisions de priorité. À 320 pixels il y a de la place pour une chose à la fois, il faut donc décider laquelle ; élargir un design ensuite consiste surtout à donner plus d'air.
L'inverse — concevoir à 1440 puis retirer des choses — produit des mises en page mobiles qui sont le bureau avec des morceaux masqués, et c'est ainsi que du contenu important finit en display:none sur l'appareil que la majorité utilise.
- Commencez les mises en page à 320–360 px, les appareils réels les plus étroits en usage courant.
- Ne masquez jamais sur mobile un contenu dont un visiteur mobile a besoin ; déplacez-le ou repliez-le.
- Laissez le contenu décider des points de rupture : placez-en un là où la mise en page casse, pas à des noms d'appareils.
- Testez avec la taille de texte du navigateur à 200 % : c'est un réglage d'accessibilité courant et il casse plus de mises en page que n'importe quel mobile.
Les points de rupture nommés d'après des appareils vieillissent mal. « Tablette » a désigné six largeurs différentes en dix ans ; « l'endroit où la grille de cartes devient laide » ne change pas.
Les éléments qui cassent vraiment#
Une poignée de composants explique l'essentiel des échecs d'adaptation, et ils sont assez prévisibles pour être vérifiés délibérément.
| Élément | Échec | Correction |
|---|---|---|
| Tableaux | Défilement horizontal de toute la page | Conteneur défilant, ou réempilement en cartes avec libellés de données |
| Mots ou URL longs | La page défile latéralement | overflow-wrap et min-width:0 sur les enfants flex et grid |
| Images | Débordement ou décalage de mise en page | max-width:100 %, attributs width et height explicites |
| Navigation | Occupe un tiers de l'écran | Replier, ou déplacer l'essentiel dans une barre inférieure |
| Formulaires | iOS zoome et ne dézoome plus | Taille de police d'au moins 16 px sur les champs |
| Éléments fixes | Recouvrent le contenu auquel ils se rattachent | En tenir compte dans scroll-padding et le padding du body |
| Fenêtres modales | Impossibles à fermer sur petit écran | Plein écran sur mobile avec un bouton de fermeture visible |
Images et médias#
Les images sont généralement l'élément le plus lourd d'une page et la source la plus fréquente de décalage de mise en page. Trois attributs corrigent l'essentiel et ne coûtent rien.
- Renseignez toujours les attributs width et height pour que le navigateur réserve la place avant l'arrivée du fichier.
- Servez des formats modernes — WebP ou AVIF — avec une solution de repli là où elle reste nécessaire.
- Utilisez srcset et sizes pour qu'un mobile télécharge un fichier de taille mobile, pas une bannière de 2000 px.
- Chargez en différé les images sous la ligne de flottaison, et jamais la plus grande visible : c'est votre élément LCP.
- Donnez à l'image principale fetchpriority="high" pour qu'elle ne passe pas après des ressources décoratives.
- Pour les images de fond, fixez un ratio d'aspect afin que le conteneur ne s'effondre pas avant le chargement.
Le tactile, pas seulement la largeur#
L'adaptatif ne concerne pas que la mise en page. Une fenêtre étroite signifie généralement un doigt plutôt qu'une souris, et la saisie tactile a des exigences différentes que les requêtes média sur la largeur ne couvrent pas seules.
- Cibles tactiles d'au moins 44 × 44 px avec de l'espace entre elles ; des liens contigus de 30 px sont constamment ratés.
- Rien d'important derrière un survol : un menu uniquement au survol est inatteignable au tactile.
- Utilisez les requêtes pointer:coarse pour retirer les effets de survol qui restent collés après un appui.
- Gardez les actions principales à portée de pouce sur les mobiles hauts ; le coin supérieur droit est le plus difficile à une main.
- Respectez prefers-reduced-motion : le parallaxe et les grandes transitions provoquent un vrai inconfort chez certaines personnes.
Questions fréquentes
Combien de points de rupture me faut-il ?
Généralement trois à cinq, et ils devraient venir de votre contenu plutôt que d'une liste d'appareils. Ajoutez-en un là où la mise en page commence à mal rendre quand vous élargissez la fenêtre, pas parce qu'un téléphone particulier existe. Les sites avec une douzaine de points de rupture compensent presque toujours une mise en page qui n'était pas fluide au départ.
Un site mobile séparé est-il parfois justifié ?
Rarement. Cela signifie deux bases de code, deux jeux d'URL, deux déploiements et une relation canonique à maintenir, et cela finit généralement avec l'un des deux qui prend discrètement du retard. Les cas où cela arrive encore sont des systèmes hérités impossibles à rendre adaptatifs, et même là c'est un pis-aller plutôt qu'un plan.
Comment tester correctement le design adaptatif ?
L'émulation d'appareils du navigateur détecte les problèmes de mise en page mais pas le comportement tactile, réseau ou plateforme. Testez sur au moins un Android réel d'entrée ou milieu de gamme et un iPhone, en données mobiles plutôt qu'en wifi de bureau. Puis refaites les pages clés avec la taille de texte du navigateur à 200 %, là où la plupart des mises en page s'effondrent vraiment.
Et les tableaux de données sur mobile ?
Deux options viables : placer le tableau dans un conteneur à défilement horizontal avec une indication visible et une première colonne fixe, ou réempiler chaque ligne en carte où chaque cellule porte son propre libellé de colonne. Le conteneur défilant préserve la comparaison ; l'empilement en cartes se lit plus facilement. Choisissez selon que les visiteurs comparent des lignes ou les lisent une par une.
design web adaptatifsite adapté mobilepoints de ruptureconception mobile firstimages adaptativescibles tactiles
