Configurations d'écran

Le responsive web design a été, à bien des égards, une réaction aux téléphones mobiles. Avant l'apparition des smartphones, très peu de personnes se demandaient sérieusement l'apparence des sites Web sur les appareils portables. La situation a changé avec l'essor fulgurant des téléphones mobiles équipés de navigateurs Web intégrés.

La conception de sites Web réactifs a encouragé un état d’esprit qui remet en question les hypothèses. Alors qu'il était auparavant courant de supposer qu'un site ne peut être consulté que sur un ordinateur de bureau, il est désormais courant de concevoir le même site Web pour les téléphones et les tablettes. De fait, l'utilisation des mobiles a échappé à celle des ordinateurs sur le Web.

Cet état d'esprit réactif vous sera très utile à l'avenir. Il est tout à fait possible que vos sites Web soient consultés sur des appareils et des écrans que nous ne pouvons même pas imaginer aujourd'hui. Et cet état d'esprit ne se limite pas aux écrans. Aujourd'hui, les internautes accèdent à votre contenu sur des appareils sans écran. Les assistants vocaux peuvent utiliser vos sites Web si vous utilisez une base solide en HTML sémantique.

Il y a aussi des expérimentations dans le monde des écrans. Il existe aujourd'hui sur le marché des appareils équipés d'écrans pliables. Cela présente certains défis pour vos conceptions.

Double écran

Les utilisateurs d'appareils pliables peuvent choisir si leur navigateur Web n'occupe qu'un seul des écrans ou s'il s'étend sur les deux. Si le navigateur couvre les deux écrans, le site Web affiché sera divisé par la charnière entre les deux écrans. Ça n'a pas l'air super.

Segments de fenêtre d'affichage

Une fonctionnalité multimédia expérimentale est conçue pour détecter si votre site Web s'affiche sur un appareil à double écran. Le nom proposé pour la fonctionnalité multimédia est viewport-segments. Il en existe deux types: horizontal-viewport-segments et vertical-viewport-segments.

Si la fonctionnalité multimédia horizontal-viewport-segments indique la valeur 2 et que vertical-viewport-segments indique la valeur 1, cela signifie que la charnière de l'appareil s'exécute de haut en bas et divise votre contenu en deux panneaux côte à côte.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Si la fonctionnalité multimédia vertical-viewport-segments indique une valeur de 2 et horizontal-viewport-segments une valeur de 1, la charnière s'exécute d'un côté à l'autre et divise votre contenu en deux panneaux superposés.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Si vertical-viewport-segments et horizontal-viewport-segments indiquent tous deux la valeur 1, cela signifie que le site Web ne s'affiche que sur un seul écran, même si l'appareil en comporte plusieurs. Cela revient à ne pas utiliser de requête média.

Variables d'environnement

La fonctionnalité multimédia viewport-segments en elle-même ne vous aidera pas à concevoir de façon gênante avec cette charnière. Il vous faut un moyen de connaître la taille de la charnière. C'est là que les variables d'environnement peuvent vous aider.

Les variables d'environnement dans les CSS vous permettent de prendre en compte les intrusions gênantes au niveau de l'appareil dans vos styles. Par exemple, vous pouvez concevoir autour de l'« encoche » sur l'iPhone X à l'aide des valeurs d'environnement safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom et safe-area-inset-left. Ces mots clés sont encapsulés dans une fonction env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Les variables d'environnement fonctionnent comme des propriétés personnalisées. Cela signifie que vous pouvez transmettre une option de remplacement si la variable d'environnement n'existe pas.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Pour que ces variables d'environnement fonctionnent sur l'iPhone X, mettez à jour l'élément meta qui spécifie les informations viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Votre mise en page occupera alors toute la fenêtre d'affichage et remplira le document avec des valeurs d'encart fournies par l'appareil.

Pour les écrans pliables, six nouvelles variables d'environnement sont proposées: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom et viewport-segment-right.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Voici un exemple de mise en page avec deux colonnes, une plus large que l'autre.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Pour les écrans doubles avec une charnière verticale, définissez la première colonne sur la largeur du premier écran et la deuxième colonne sur la largeur du deuxième écran.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Considérez le double écran comme une opportunité. Vous pouvez par exemple utiliser un écran pour afficher du contenu textuel à faire défiler, tandis que l'autre affiche un élément fixe comme une image ou une carte.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

L'avenir

Les écrans pliables vont-ils devenir le prochain incontournable ? Qui sait ? Personne n'aurait pu prédire la popularité des appareils mobiles. Il est donc utile d'avoir l'esprit ouvert sur les futurs facteurs de forme.

Surtout, il est important que vos sites Web puissent réagir à toute évolution future. C'est ce que la conception réactive vous offre: non seulement un ensemble de techniques pratiques, mais un état d'esprit qui vous sera utile pour construire le Web de demain.

Testez vos connaissances

Tester vos connaissances sur les configurations d'écran