Bonnes pratiques du responsive

Un site adaptatif ne se résume pas à des points de rupture : il suppose des choix de contenu et de performance.

La balise viewport

Sans elle, un navigateur mobile simule une fenêtre large et réduit la page. C'est la première ligne à vérifier sur un site qui s'affiche minuscule sur téléphone.

Les images

Dimensions adaptées à l'affichage, formats modernes, attributs de source alternative pour servir la bonne taille selon l'écran, et chargement différé hors de la zone visible. C'est le poste qui pèse le plus sur le temps de chargement.

Les unités

Pourcentages, unités relatives à la taille de police et unités de fenêtre plutôt que des largeurs fixes en pixels. Une largeur fixe supérieure à celle de l'écran provoque un défilement horizontal, défaut le plus fréquent des adaptations incomplètes.

Le tactile

Zones cliquables suffisamment grandes et espacées, absence d'effets dépendant du survol, et formulaires appelant le bon type de clavier. Ces détails déterminent l'utilisabilité réelle bien plus que la finesse de la mise en page.