Checklist pour des sites web responsive

Cette checklist permet de vérifier que notre site web sera navigable sur divers types d'écrans (du smartphone au grand écran 4K).

Le plus simple est de gérer trois scénarios concernant la largeur de l'écran :

• < 768px (mobiles)
• entre 768px – 1440px (ordinateurs et certaines tablettes)
• > 1440px (très grands écrans)

Pour chacun, vérifier :

• Le site s'affiche correctement
• Le contenu ne déborde pas de l’écran
• Les images et vidéos s’adaptent sans déformation
• Les polices sont lisibles sans zoom excessif. Et il est possible de zoomer.
• Éviter les barres de défilement horizontales (les verticales, on laisse les navigateurs gérer) autant que possible.

Pour les petits écrans (< 768px) :

• Les boutons et liens sont assez grands pour être cliqués/touchés facilement (au moins 48px de hauteur)
• Les textes ne sont pas trop petits (au moins 16px de base)
• Les marges et espacements sont adaptés
• Le menu est accessible (burger menu ou alternative claire)
• Les formulaires sont faciles à remplir (voir le clavier virtuel ET le champ à remplir)

Pour les autres :

• Le site ne semble pas “vide” : disposition des colonnes et espacements
• La largeur des éléments est adaptée (ni trop grands ni trop petits, suivant le contenu)
  • La lecture de textes longs (comme les articles) ne doit pas dépasser 80ch¹⁾ (largeur optimale pour lire). L'œil a du mal à lire des lignes de plus de 70-80 caractères ; ch est parfois un peu “flottant” (il ne prend pas les espaces en compte), et la valeur hyphens: auto;²⁾ peut être utile.
• Les images de fond et sections restent harmonieuses sur un écran large