Checklist pour un site réactif¶

Les points fondamentaux :

Pour qu’un site soit vraiment réactif (responsive), voici les éléments de base à maîtriser :

Viewport : ajuster le viewport pour que le rendu sur mobile soit correct. Sans cela, la page pourrait s’afficher zoomée ou réduite de manière incorrecte.
Unités relatives / fluides : utiliser des unités comme %, em, rem, vw, vh plutôt que des unités fixes (pix). Cela permet aux éléments de s’adapter selon l’espace disponible.
Boîtes avec box-sizing “border-box” : pour faciliter le calcul des largeurs / marges / padding, éviter les surprises de dimensionnement.
Images / médias adaptatifs :
- Utiliser max-width: 100% (ou width: 100%) pour que les images ne débordent pas.
- Employer des SVG pour les images non photographiques quand possible.
- Utiliser la balise pour fournir plusieurs versions d’images selon la largeur de l’écran, afin de ne pas forcer le chargement d’images trop grosses.
Media queries en CSS : définir des “breakpoints” — seuils de largeur (ou orientation) où le style change (layout, tailles, images, etc.).

La checklist¶

Adopter une approche Mobile First (commencer par les petits écrans, puis élargir).
Préférer un design réactif (responsive) plutôt qu’un design fixe ou purement adaptatif.

Définir correctement la balise <meta name="viewport" content="width=device-width, initial-scale=1.0">.

Utiliser des unités relatives : %, em, rem, vw, vh plutôt que px fixes.
Appliquer box-sizing: border-box; pour un calcul cohérent des largeurs.
Utiliser les méthodes CSS à jour telles que les Flexbox et les Grid pour le positionnement dans la page.

Tester l’interface sur différents appareils (mobile, tablette, desktop).
Redimensionner la fenêtre du navigateur pour vérifier la fluidité entre les breakpoints.
Vérifier la lisibilité du texte et la clarté des boutons sur petits écrans.