Pratique exemplaire

Zoom

Le contenu devrait apparaître dans une seule colonne sans défilement horizontal et sans perte d’information ou de fonctionnalité lors du réglage de la fenêtre de votre navigateur :

  • à 320 pixels de largeur sur 256 pixels de hauteur, ou
  • à 1280 pixels de largeur sur 1024 pixels de hauteur, puis zoomer le contenu à 400 %.

Mettre en œuvre une conception adaptative.

Lorsque vous concevez du contenu à reformater dans une seule colonne :

  • Le contenu principal remplit la zone d’affichage.
  • Le défilement horizontal ne se fait pas.
  • Évitez d’utiliser plusieurs colonnes. La longueur de ligne courte est difficile à lire.
  • Évitez d’utiliser des flotteurs CSS. Ils créent également une longueur de ligne courte, sauf si l’élément flotté est très petit.
  • Évitez d’utiliser des largeurs fixes et minimales CSS. Elles ont tendance à provoquer un défilement horizontal.

Conception adaptée

  • Utilisez les « requêtes média » CSS pour déterminer la taille de l’écran de l’utilisateur et servir des configurations distinctes selon différentes largeurs d’écran aux points d’interruption.
  • Réglez la zone d’affichage à l’aide du méta-élément dans l’en-tête :

    HTML

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0; user-scalable=1">
    • width=device-width indique que la page correspond à la largeur de l’appareil, ce qui permet à la page de recharger le contenu pour qu’il corresponde à différentes tailles d’écran.
    • initial-scale=1.0 établit le niveau de zoom par défaut de la page.
    • maximum-scale=2.0 établit un zoom maximal de 200 % sur le zoom par pincement pour l’appareil mobile.
    • user-scalable=1 permet à l’utilisateur de zoomer par pincement sur son mobile.
  • Testez les points d’interruption à l’aide d’émulateurs de zone d’affichage.
  • Les utilisateurs malvoyants font souvent un zoom pour déclencher des configurations mobiles sur de grands affichages, ce qui donne du texte assez volumineux.

Formulaires adaptés

À mesure que la taille de la zone d’affichage change, assurez-vous que :

  • les champs de formulaire ne débordent pas, et
  • les champs de formulaire et les étiquettes ne sont pas séparés par de larges zones d’espace blanc :
    • Dans le mode bureau par défaut, les étiquettes sont positionnées à gauche de la commande et sont alignées à droite. (Cette disposition est préférable lorsqu’il est nécessaire de conserver un espace vertical.)
    • En mode petit écran, les étiquettes sont positionnées directement au-dessus de la commande afin de maximiser la zone de l’écran pour chaque étiquette.

Images adaptées

les images peuvent être adaptées de quatre façons :

  • Technique 1 – Styliser l’image avec la CSS : width: 100%
  • Technique 2 – Styliser l’image avec la CSS : max-width: 100%
  • Technique 3 – Servir différentes tailles d’image à différentes tailles d’écran en utilisant l’attribut srcset
  • Technique 4 – Servir différentes images à différentes tailles d’écran en utilisant l’élément picture.

Texte adapté

  • Les conteneurs de texte doivent être redimensionnés à mesure que la taille de la zone d’affichage change pour empêcher le texte de déborder.
  • Éviter les conteneurs fixes et statiques.

Objets et modules d’extension adaptés

  • Les objets et les modules d’extension peuvent être redimensionnés à mesure que la taille de la zone d’affichage change afin qu’ils ne débordent pas la zone d’affichage.
  • Régler CSS max-width="100%" sur le conteneur.
  • Utilisez l’élément <img> pour intégrer une image, l’élément <iframe> pour intégrer HTML et les éléments <video> et <audio> pour intégrer le contenu média.

Tableaux adaptés

  • Les tableaux de grande taille qui débordent de la zone d’affichage ne sont pas adaptés. Suivre ces conseils pour éviter les débordements:
    • Utiliser un pourcentage plutôt que des pixels fixes pour définir la largeur des colonnes et des tableaux
    • Diviser les tableaux de grande taille ou largeur en plusieurs tableaux plus petits ou étroits
    • Afficher une barre de défilement horizontale si l’écran est trop petit ou afficher le tableau complet
    • Rendre les tableaux plus étroits comme suit:
      • Réduire le nombre de colonnes
      • Fusionner des colonnes
      • Utiliser des acronymes ou des abréviations pour les mots longs
      • Ajouter d’un tiret conditionnel &shy; pour couper les mots longs
    • Redimensionner les tableaux en fonction de la zone d’affichage)

Composantes d’interface utilisateur adaptées

Réorganiser et redimensionner les composantes de l’interface utilisateur pour maintenir la lisibilité.

Vidéo adaptées

Les vidéos sont redimensionnées à mesure que la taille de la zone d’affichage change afin qu’elles ne débordent pas de la zone d’affichage. Soit en :

  • réglant la propriété CSS max-width: 100% sur l’élément conteneur de la vidéo, ou en
  • réglant la propriété CSS width: 100% sur l’élément <video>

Les dimensionnements statiques peuvent rompre les configurations de la page.

Orientation

  • Permettre aux utilisateurs de visualiser votre contenu dans l’orientation (portrait ou paysage) qu’ils préfèrent.
  • Ne pas limiter l’orientation de la page.
Haut de la page