Conception Web réactive - La fenêtre d'affichage
Qu'est-ce que la fenêtre d'affichage ?
La fenêtre d'affichage est la zone visible par l'utilisateur d'une page Web.
La fenêtre d'affichage varie selon l'appareil et sera plus petite sur un téléphone mobile que sur un écran d'ordinateur.
Avant les tablettes et les téléphones mobiles, les pages Web étaient conçues uniquement pour les écrans d'ordinateur, et il était courant que les pages Web aient une conception statique et une taille fixe.
Ensuite, lorsque nous avons commencé à surfer sur Internet à l'aide de tablettes et de téléphones portables, les pages Web de taille fixe étaient trop grandes pour tenir dans la fenêtre d'affichage. Pour résoudre ce problème, les navigateurs de ces appareils ont réduit l'intégralité de la page Web pour l'adapter à l'écran.
Ce n'était pas parfait !! Mais une solution rapide.
Définition de la fenêtre d'affichage
HTML5 a introduit une méthode permettant aux concepteurs Web de prendre le contrôle de la fenêtre d'affichage, via la
<meta>balise.
Vous devez inclure l' <meta>élément de fenêtre suivant dans toutes vos pages Web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
La width=device-widthpartie définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie selon l'appareil).
La initial-scale=1.0partie définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple de page Web sans la balise Meta Viewport et de la même page Web avec la balise Meta Viewport :
Astuce : Si vous naviguez sur cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessus pour voir la différence.
Dimensionner le contenu à la fenêtre
Les utilisateurs sont habitués à faire défiler les sites Web verticalement sur les ordinateurs de bureau et les appareils mobiles - mais pas horizontalement !
Ainsi, si l'utilisateur est obligé de faire défiler horizontalement ou de faire un zoom arrière pour voir l'intégralité de la page Web, l'expérience utilisateur est médiocre.
Quelques règles supplémentaires à suivre :
1. N'utilisez PAS d'éléments de grande largeur fixe - Par exemple, si une image est affichée à une largeur plus large que la fenêtre d'affichage, cela peut entraîner un défilement horizontal de la fenêtre d'affichage. N'oubliez pas d'ajuster ce contenu pour tenir dans la largeur de la fenêtre d'affichage.
2. Ne laissez PAS le contenu s'appuyer sur une largeur de fenêtre particulière pour bien s'afficher - Étant donné que les dimensions et la largeur de l'écran en pixels CSS varient considérablement d'un appareil à l'autre, le contenu ne doit pas s'appuyer sur une largeur de fenêtre particulière pour s'afficher correctement.
3. Utilisez des requêtes média CSS pour appliquer un style différent pour les petits et les grands écrans - La définition de grandes largeurs CSS absolues pour les éléments de page rendra l'élément trop large pour la fenêtre d'affichage sur un appareil plus petit. Au lieu de cela, envisagez d'utiliser des valeurs de largeur relative, telles que largeur : 100 %. Veillez également à ne pas utiliser de grandes valeurs de positionnement absolu. Cela peut faire tomber l'élément en dehors de la fenêtre sur les petits appareils.