Conception Web réactive et réactivité à la hauteur du navigateur

Je sais que beaucoup se demanderont pourquoi cet article a un titre aussi inhabituel. Quel est le lien entre la «conception Web adaptative» et la «hauteur de la fenêtre du navigateur»? Peut-être que ce titre semble inhabituel en raison du fait que «conception réactive» est généralement comprise comme signifiant la conception de pages pour s'ajuster à la largeur de la fenêtre d'affichage afin qu'elles soient bonnes sur différents appareils. Les sites Web testent toujours en réduisant la largeur du navigateur et en observant ce qui se passe. Mais je n'ai presque jamais rencontré de directives pour tester un projet, qui disent que les pages sont examinées en diminuant la hauteur de la fenêtre du navigateur. Peut-être vous êtes-vous déjà surpris à penser: "Dois-je consulter des pages dans des fenêtres de navigateur de différentes hauteurs?" Je crois que cela devrait être fait, et je vais convaincre tout le monde de cela,qui lira cet article.







Lorsqu'on travaille sur un site Web, il n'est pas très correct de faire certaines hypothèses sans se fier à des données réelles. Par conséquent, il est très important d'assumer la responsabilité de vérifier les sites dans des fenêtres de navigateur de différentes largeurs et hauteurs.

Pourquoi consulter des pages dans des fenêtres de navigateur de différentes hauteurs?

Bonne question. Avant de passer aux exemples et scénarios d'utilisation de tels contrôles, je voudrais parler des problèmes qui surviennent avec des sites qui ne sont pas adaptés pour travailler dans des points de vue de différentes hauteurs. Cela vous aidera à mieux comprendre ce qui se passe ensuite.



Faire de fausses hypothèses sur la façon dont un site Web sera utilisé est l'un des facteurs les plus importants qui affectent négativement le travail d'un concepteur Web. Par exemple, il serait faux de s'attendre à ce que le site soit utilisé en développant le navigateur en plein écran. Au lieu de cela, vous devez compter sur le pire.





Hypothèses et réalité Ce qui



précède est une illustration de mes propos. En réalité, tous les utilisateurs ne travaillent pas avec les navigateurs comme le suggère le concepteur. J'ai moi-même rencontré des sites qui semblent mauvais dans les fenêtres de navigateur avec une hauteur réduite.

Outils de développement de navigateur

Le redimensionnement vertical du navigateur n'est pas le seul moyen d'affecter la hauteur de la fenêtre. Ainsi, par exemple, lorsque la barre d'outils du développeur est ouverte, elle occupe également une partie de l'espace vertical.





La barre d'outils développeur occupe une partie de la fenêtre du navigateur L'



ouverture des outils de développement peut briser la conception de votre site ou mettre en lumière des problèmes que personne ne s'attendait à voir apparaître. La zone en surbrillance de l'image représente la hauteur actuelle de la fenêtre. L'ouverture des outils de développement tout en visualisant le site sur un petit écran d'ordinateur portable aura pour résultat que seule une petite zone de la page sera visible.



Pensons à une question importante: "Est-il possible d'améliorer l'expérience utilisateur du site en le visualisant dans une petite fenêtre de navigateur?" Je peux donner une réponse positive à cette question. Je suppose que la théorie nous suffit. Apprenons une approche "verticale" du style des pages.

CSS "Vertical"

Certains concepteurs et développeurs se concentrent sur l'apparence de la page, qu'il accepte dans des fenêtres de largeurs différentes. En même temps, ils éclipsent l'étude du comportement des pages dans des fenêtres de différentes hauteurs. Et c'est très important. Par exemple, quelqu'un travaille sur une conception de page et a reçu des instructions sur l'apparence d'un certain composant dans des fenêtres de navigateur de largeurs différentes. Qu'en est-il des fenêtres de différentes hauteurs?





Sur un grand téléphone, des éléments de navigation remplissent l'espace vertical disponible. Sur un téléphone moyen, la taille de la police et l'espacement sont réduits. Sur un petit téléphone, l'espace vertical est insuffisant pour afficher tous les éléments. Par conséquent, ils sont placés dans 2 colonnes.



Cette figure montre un menu de navigation dont l'apparence s'adapte à la hauteur de la fenêtre. L'objectif du designer est que le menu remplisse tout l'espace dont il dispose. Sur les écrans plus petits, la taille de la police et l'espacement entre les éléments de menu diminuent. Si l'écran du téléphone est très petit (par exemple, comme l'iPhone 5), les éléments sont affichés dans deux colonnes. Ces scénarios d'utilisation du site sont souvent négligés. En conséquence, soit les sites ne s'adaptent pas du tout pour travailler sur des écrans de différentes hauteurs, soit ils ne les optimisent que lorsqu'un visiteur du site signale un problème.



CSS peut nous aider à ajuster le site pour différentes hauteurs de fenêtres. À savoir, nous parlons de deux techniques principales:

• Requêtes multimédias basées sur la hauteur de la fenêtre.
• L'unité de mesure associée à la fenêtre.

Requêtes multimédias prenant en compte la hauteur de la fenêtre

Comme vous le savez probablement déjà, vous pouvez utiliser des requêtes multimédias dans CSS qui prennent en compte la largeur de la fenêtre:

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

Mais les requêtes multimédias qui prennent en compte la hauteur des fenêtres du navigateur sont beaucoup moins courantes:

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/*  */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

Unités de mesure liées à la fenêtre

L'utilisation d'unités de mesure liées à la taille de la fenêtre peut aider à améliorer l'expérience utilisateur sur les sites. Par exemple, en tenant compte de la hauteur de la fenêtre, vous pouvez ajuster la distance verticale entre les éléments.

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

Plus la fenêtre du navigateur est haute, plus la distance entre les éléments est grande.



Tout cela peut sembler une petite chose sympa qui n'affecte vraiment rien, mais seulement jusqu'à ce que vous regardiez une page similaire sur un grand écran - comme un écran iMac 27 pouces. Ensuite, il s'avère que la hauteur de la fenêtre est trop élevée. Mais nous avons heureusement un moyen de limiter la taillemargin-bottom. Cela peut être fait, par exemple, des manières suivantes:

• Utilisation de requêtes multimédias.
• Utilisation des fonctions de comparaison CSS.

La première méthode (requête multimédia) a certainement une meilleure prise en charge du navigateur. Son essence est de limiter la valeur maximale margin-bottomdans les cas où la page est affichée sur de très grands écrans.

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

La deuxième méthode consiste à utiliser une fonction CSS clamp(). Lors du choix des valeurs passées à cette fonction, nous définissons, dans ce cas, la taille de retrait minimale, égale à 10px, le maximum - 50px, et les valeurs entre ces deux dépendent de la taille de la fenêtre du navigateur.

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

Si ce sujet vous intéresse, jetez un œil à mes articles sur les unités de mesure en fonction de la taille de la fenêtre d'affichage de la page et sur les fonctions CSS .



Ci-dessous, nous parlerons des différentes façons d'utiliser les requêtes multimédias verticales.

Exemples et scénarios

▍Éléments de page qui se chevauchent lors de la modification de la hauteur de la fenêtre du navigateur

Cet exemple est pour une page qui a un titre et une illustration dans la section supérieure. La hauteur de cette partie de la page est 100vhégale à 100% de la hauteur de la fenêtre.





Le haut de la page avec une hauteur de 100vh



Tout semble très bien, mais seulement jusqu'à ce que la hauteur de la fenêtre du navigateur diminue. Le haut de la page n'est pas assez haut pour accueillir l'illustration et le texte. Par conséquent, les éléments en haut de la page chevaucheront le contenu des autres sections de la page.





La diminution de la hauteur de la fenêtre du navigateur rompt la conception.



Notez que les images se chevauchent avec la section de la page située en haut de la page. Cela est dû au fait qu'ils n'ont pas assez d'espace. Jetons un coup d'œil au code de cet exemple.



Voici le balisage:

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

Voici les styles:

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

Considérons plusieurs options pour résoudre de tels problèmes:

• Vous pouvez donner à l'image des dimensions fixes (propriétés widthet height), pas seulement sa largeur ( width). Le manque de propriété heightest l'une des raisons de notre problème.
• Vous ne pouvez appliquer la propriété à la section supérieure de la page height: 100vhque si la hauteur de la fenêtre d'affichage est plus grande 700px(bien entendu, les valeurs spécifiques utilisées dans la requête multimédia varient en fonction de votre situation).

Vous pouvez combiner ces deux approches et obtenir une solution plus fiable à ces problèmes:

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /*     */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

Nous avons donc décidé que les requêtes multimédias «verticales» sont un mécanisme stable et utile. Mais utiliser une valeur 100vhest une entreprise risquée, car même si vous pouvez limiter la taille de l'image, il se peut que la taille du texte ne puisse pas être limitée. Par exemple, si le texte de la section supérieure de la page s'avère plus long, nous ferons face à une nouvelle variante du problème que nous connaissons déjà.





Le texte chevauche une section du site là où il ne devrait pas se trouver.



Pour résoudre ce problème, vous pouvezheightutiliser une propriétéau lieu d'unepropriétémin-height. Avec cette approche, si le contenu d'une section est plus grand qu'il ne peut en contenir, sa taille augmentera et son contenu ne couvrira pas la section suivante.

@media (min-height: 700px) {
  .hero {
    min-height: 100vh;
  }
}

▍ Titre de page fixe

Il n'y a rien de mal à ce que le titre de la page reste au même endroit lors du défilement. Mais vous devez vous assurer que ce titre a une position fixe uniquement s'il y a suffisamment d'espace vertical sur l'écran.





Titre de page fixe



Il montre le site en cours de visualisation en mode paysage. Notez que l'en-tête occupe trop d'espace vertical. Est-ce important pour l'utilisateur? Dans la plupart des cas, non. Mais vous pouvez améliorer l'expérience utilisateur de l'utilisation du site en recourant à la requête multimédia suivante:

@media (min-height: 700px) {
  .site-header {
    /* position: fixed  position: sticky */
  }
}

Avec cette approche en mode paysage, le titre ne sera pas figé.

▍Cacher les éléments qui sont moins importants que d'autres

J'ai remarqué cela sur le menu de navigation de Twitter. À savoir, nous parlons d'une combinaison de requêtes multimédias «verticales» et du modèle Priority + .





Les éléments sélectionnés seront masqués s'ils manquent d'espace.



Lorsque la hauteur de la fenêtre change, les éléments moins importants (éléments de menuBookmarksetLists) deviennent des sous-élémentsMore. Ceci est un bon exemple de l'utilisation de requêtes multimédias «verticales».

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

Et voici mon tweet analysant l'application de cette approche sur Twitter.

▍Navigation et modification de la hauteur de la fenêtre

L'exemple suivant est lié au précédent. Il y a une barre de navigation verticale (barre latérale, barre latérale). Si la hauteur de la fenêtre est petite, vous pouvez réduire légèrement la distance verticale entre les éléments de navigation, ce qui améliorera légèrement l'apparence de la page.





Espacement entre les éléments et hauteur de la fenêtre



Voici les styles de cet exemple:

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

Et ici, vous pouvez regarder une vidéo pour cela.



En outre, on peut noter que dans une telle situation, la taille de la police peut également être modifiée, ce qui, lorsque la hauteur de la fenêtre du navigateur est réduite, donnera encore plus de place aux éléments.

▍ Section supérieure de la page et hauteur de la fenêtre

La section supérieure de la page a besoin d'un espace vertical libre pour lui donner un peu d'air. Les dimensions de cet espace peuvent dépendre de la hauteur de la fenêtre.





Plus la page est haute, plus il y a "d'air".



Voici à quoi ressemblent les styles de cet exemple:

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

▍Composants modaux

Comme vous le savez peut-être déjà, les composants modaux doivent être au moins centrés horizontalement. Mais vous devrez peut-être aligner un tel élément verticalement. C'est possible, mais cela empêche de changer la quantité de données générées par ces éléments.



Si le modal contient la bonne quantité de données, il semble très bien, comme indiqué ci-dessous.





Élément modal correct



Voici les styles de cet élément:

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

Mais si plus de texte doit être affiché dans le même élément, tout ne sera pas si bon. À savoir, l'élément remplira l'écran verticalement et l'utilisateur ne pourra pas faire défiler son contenu.





Élément modal trop grand



Ce problème se produit pour les raisons suivantes:

• Le modal n'a pas de hauteur spécifiée.
• L'élément est centré verticalement (cela accélérera le problème).

Voici le CSS qui résout ces problèmes:

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

Notez que les propriétés min-heightet sont utilisées ici min-width. La première est que l'élément soit beau même lorsqu'il affiche un texte court. Et le second permet de limiter sa hauteur à une valeur donnée au lieu de lui donner une hauteur constante.





Élément modal adapté à l'affichage de longs textes

Résultat

Lors de la conception de sites Web en tenant compte de l'expérience que les utilisateurs obtiendront en travaillant avec eux, il est préférable de construire leur conception en fonction de la largeur et de la hauteur de la fenêtre du navigateur. Cela peut sembler étrange à quelqu'un qui teste des pages dans des fenêtres de différentes hauteurs, mais un tel test se justifie. Ici, j'ai parlé de l'importance d'une approche «verticale» de la conception de sites Web, comment concevoir des pages afin de les afficher correctement dans des fenêtres de différentes hauteurs, et j'ai regardé des exemples. J'espère que vous trouverez tout cela utile.



Faites-vous attention à l'apparence des pages Web que vous créez dans les fenêtres de navigateur de différentes hauteurs?