====== 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). 

===== Gestion des tailles d’écran =====
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((''max-width: 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;''(([[https://developer.mozilla.org/fr/docs/Web/CSS/hyphens]])) peut être utile. 
  * Les images de fond et sections restent harmonieuses sur un écran large

{{tag>Web}}

[[https://creativecommons.org/publicdomain/zero/1.0/deed.fr|{{ https://liev.re/imagesweb/licences/cc-zero.png?100 | Ce texte est placé sous licence CC0}}]]