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 gens réfléchissaient sérieusement à l'apparence des sites Web sur les appareils portables. Cette situation a changé avec l'essor fulgurant des téléphones mobiles intégrant des navigateurs Web.

Le responsive web design a encouragé un état d'esprit qui remettait en question les hypothèses. Alors qu'auparavant il était courant de supposer qu'un site Web n'était consulté que sur un ordinateur de bureau, il est désormais courant de concevoir ce même site Web pour les téléphones et les tablettes. De fait, l'utilisation du mobile a dépassé celle de l'ordinateur sur le Web.

Cette réactivité vous sera bénéfique pour 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 utilisateurs accèdent à votre contenu depuis des appareils sans écran. Les assistants vocaux peuvent utiliser vos sites Web si vous disposez d'une base solide en HTML sémantique.

Il y a aussi l'expérimentation dans le monde des écrans. Il existe aujourd'hui des appareils dotés d'écrans pliables. Cela introduit des défis pour vos conceptions.

Double écran

Les utilisateurs d'appareils pliables peuvent choisir s'ils souhaitent que leur navigateur Web occupe un seul écran ou s'il utilise les deux. Si le navigateur recouvre les deux écrans, le site Web affiché sera divisé par la charnière entre les deux écrans. Ça n'a pas l'air parfait.

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 l'élément géographique est viewport-segments. Il existe deux versions: horizontal-viewport-segments et vertical-viewport-segments.

Si la fonctionnalité multimédia horizontal-viewport-segments indique la valeur 2 et vertical-viewport-segments la valeur 1, cela signifie que la charnière de l'appareil va de haut en bas, ce qui 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é média vertical-viewport-segments signale 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, l'un sur l'autre.

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

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

Variables d'environnement

La fonctionnalité multimédia viewport-segments en elle-même ne vous aidera pas à concevoir autour de cette charnière gênante. 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 CSS vous permettent de prendre en compte les intrusions maladroites dans vos styles. Par exemple, vous pouvez concevoir autour de l'"encoche" de l'iPhone X en utilisant les 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 inclus 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, modifiez l'élément meta qui spécifie les informations viewport:

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

La mise en page occupera désormais toute la fenêtre d'affichage et remplira de façon sécurisée le document avec les valeurs d'encarts 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.

Voici un exemple de mise en page avec deux colonnes, l'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 à charnière verticale, définissez la première colonne sur la largeur du premier écran et la deuxième 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 les écrans doubles comme une opportunité. Peut-être qu'un écran peut être utilisé pour afficher du contenu textuel déroulant, tandis que l'autre affiche un élément fixe comme une image ou une carte.

L'avenir

Les écrans pliables vont-ils devenir le prochain phénomène ? Qui sait ? Personne n'aurait pu prévoir la popularité des appareils mobiles, c'est pourquoi il est important de garder l'esprit ouvert sur les futurs facteurs de forme.

Surtout, il est important de s'assurer que vos sites Web s'adaptent à tous les événements que l'avenir vous réserve. C'est ce que vous offre la conception réactive: non seulement un ensemble de techniques pratiques, mais un état d'esprit qui vous servira aussi bien que vous construisez le Web de demain.

Testez vos connaissances

Tester vos connaissances sur les configurations d'écran