Les mots utiles, en clair
- CSS : présentation
- Les règles qui définissent les couleurs, les tailles et la disposition de votre page.
- JavaScript : interactions
- Le code qui fait fonctionner des éléments comme les menus, les formulaires et certaines animations.
Anticiper le ratio
Avant de recevoir le fichier, le navigateur a besoin d’un indice sur la place occupée par l’image. Des dimensions cohérentes lui permettent de réserver un ratio. Une image responsive peut ensuite s’adapter à la largeur disponible sans que le texte situé dessous soit repoussé au dernier moment.
Repérer les changements de composition
Une galerie, un slider ou un composant chargé par script peut produire d’autres déplacements que l’image seule. Observez l’ensemble de la zone. Si le composant change de hauteur à chaque visuel, une hauteur ou un ratio stable peut être nécessaire au niveau du conteneur.
Contrôler les exceptions
Les dimensions ne doivent pas forcer une déformation. Vérifiez les règles CSS de largeur, de hauteur et de recadrage, notamment sur les anciens thèmes. Une bonne recette compare le premier affichage, le chargement terminé et les états interactifs. Un résultat stable doit rester lisible quand le visiteur agrandit le texte ou change l’orientation.