Le nouveau responsive Web design dans un monde axé sur les composants

Contrôler la mise en page macro et micro dans une nouvelle ère de conception Web responsive.

Una Kravets

Le responsive design aujourd'hui

Aujourd'hui, lorsque vous utilisez le terme "conception responsive", vous pensez probablement à l'utilisation de requêtes média pour modifier la mise en page lors du redimensionnement d'une conception de la taille d'un mobile à celle d'une tablette, en passant par celle d'un ordinateur.

Mais bientôt, cette perception du responsive design pourrait être considérée comme aussi obsolète que l'utilisation de tableaux pour la mise en page.

Les requêtes média basées sur le viewport vous offrent des outils puissants, mais manquent de finesse. Ils ne peuvent pas répondre aux besoins des utilisateurs ni injecter des styles responsifs dans les composants eux-mêmes.

Vous pouvez utiliser des informations sur la fenêtre d'affichage globale pour styliser vos composants, mais ils ne possèdent toujours pas leurs styles, ce qui ne fonctionne pas lorsque nos systèmes de conception sont basés sur des composants et non sur des pages.

La bonne nouvelle, c'est que l'écosystème évolue, et ce, assez rapidement. Le CSS évolue, et une nouvelle ère de conception responsive est à nos portes.

Cela se produit environ tous les 10 ans. Il y a 10 ans, vers 2010-2012, nous avons assisté à un changement majeur avec le design mobile et responsif, ainsi qu'à l'émergence de CSS3.

Il s'avère donc que, une fois de plus, l'écosystème est prêt à faire face à des changements assez importants dans CSS. Les ingénieurs de Chrome et de la plate-forme Web prototypent, spécifient et commencent à implémenter la prochaine ère de conception responsives.

Ces mises à jour incluent des fonctionnalités multimédias basées sur les préférences des utilisateurs, des requêtes de conteneur et des requêtes média pour les nouveaux types d'écrans, tels que les écrans pliables.

Réactif aux besoins de l'utilisateur

Les nouvelles fonctionnalités média de préférences utilisateur vous permettent de styliser des expériences Web qui correspondent aux préférences et aux besoins spécifiques de l'utilisateur. Cela signifie que les fonctionnalités média de préférence vous permettent d'adapter vos expériences utilisateur à celles de vos utilisateurs.

Ces fonctionnalités média de préférences utilisateur incluent :

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• Et plus encore

Les fonctionnalités de préférences tiennent compte des préférences définies par un utilisateur dans son système d'exploitation et contribuent à créer une expérience Web plus robuste et personnalisée, en particulier pour les personnes ayant des besoins en matière d'accessibilité.

prefers-reduced-motion

Les utilisateurs qui ont défini des préférences de système d'exploitation pour réduire les mouvements demandent moins d'animations lorsqu'ils utilisent leur ordinateur en général. Par conséquent, il est probable qu'ils n'apprécient pas un écran d'introduction flashy, une animation de retournement de carte, un indicateur de chargement complexe ou d'autres animations flashy lorsqu'ils utilisent le Web.

Avec prefers-reduced-motion, vous pouvez concevoir vos pages en tenant compte de la réduction du mouvement et créer une expérience améliorée par le mouvement pour ceux qui n'ont pas défini cette préférence.

Cette carte contient des informations sur les deux faces. L'expérience de base à mobilité réduite est une fondu enchaîné pour afficher ces informations, tandis que l'expérience à mobilité améliorée est un retournement de carte.

"Mouvements réduits" ne doit pas signifier "aucun mouvement", car le mouvement est essentiel pour transmettre des informations en ligne. Offrez plutôt une expérience de base solide qui guide vos utilisateurs sans mouvement inutile, et améliorez progressivement cette expérience pour les utilisateurs qui n'ont pas ces besoins ou préférences en matière d'accessibilité.

prefers-color-scheme

prefers-color-scheme est une autre fonctionnalité média de préférence. Cette fonctionnalité vous permet de personnaliser votre UI en fonction du thème préféré de votre utilisateur. Dans leur système d'exploitation, que ce soit sur ordinateur ou sur mobile, les utilisateurs peuvent définir une préférence pour les thèmes clair, sombre ou automatique, qui changent en fonction de l'heure de la journée.

Si vous configurez votre page à l'aide de propriétés personnalisées CSS, l'échange de valeurs de couleur est simple. Vous pouvez rapidement mettre à jour les valeurs de votre thème de couleur, telles que backgroundColor et textOnPrimary, pour les adapter dynamiquement au nouveau thème dans la requête média.

Pour tester plus facilement certaines de ces requêtes de préférences, vous pouvez utiliser les outils de développement pour l'émulation au lieu d'ouvrir les préférences système à chaque fois.

Concevoir pour le thème sombre

Lorsque vous concevez une interface pour un thème sombre, il ne s'agit pas seulement d'inverser les couleurs de l'arrière-plan et du texte ou d'utiliser des barres de défilement sombres. Il existe quelques points à prendre en compte dont vous n'avez peut-être pas conscience. Par exemple, vous devrez peut-être désaturer les couleurs sur un arrière-plan sombre pour réduire les vibrations visuelles.

Au lieu d'utiliser des ombres pour créer de la profondeur et faire ressortir un élément, vous pouvez utiliser la lumière dans la couleur d'arrière-plan de l'élément pour le faire ressortir. En effet, les ombres ne sont pas aussi efficaces sur un arrière-plan sombre.

Les thèmes sombres offrent non seulement une expérience utilisateur plus personnalisée, mais ils peuvent également améliorer considérablement l'autonomie de la batterie sur les écrans AMOLED. Il s'agit des écrans que l'on trouve sur les nouveaux téléphones haut de gamme, et ils sont de plus en plus populaires sur les appareils mobiles.

Une étude Android de 2018 sur les thèmes sombres a montré que les économies de consommation d'énergie pouvaient atteindre 60 %, en fonction de la luminosité de l'écran et de l'interface utilisateur globale. La statistique de 60 % provient de la comparaison de l'écran de lecture YouTube avec une vidéo en pause à 100 % de luminosité de l'écran en utilisant le thème sombre pour l'interface utilisateur de l'application par rapport à un thème clair.

Vous devez toujours proposer un thème sombre à vos utilisateurs dans la mesure du possible.

Réactif au conteneur

Les requêtes de conteneur, également appelées requêtes d'élément, sont l'un des domaines émergents les plus intéressants du CSS. Il est difficile de sous-estimer l'impact du passage de la conception responsive basée sur les pages à la conception responsive basée sur les conteneurs sur l'évolution de l'écosystème de conception.

Voici un exemple des puissantes capacités offertes par les requêtes de conteneur. Vous pouvez manipuler les styles de n'importe quel élément de la fiche, y compris la liste de liens, la taille des polices et la mise en page globale en fonction de son conteneur parent :

Cet exemple montre deux composants identiques avec deux tailles de conteneur différentes, qui occupent tous deux de l'espace dans une mise en page créée à l'aide de CSS Grid. Chaque composant s'adapte à l'espace qui lui est alloué et se met en forme en conséquence.

Cette flexibilité n'est pas possible avec les requêtes média seules.

Les requêtes de conteneur offrent une approche beaucoup plus dynamique de la conception responsive. Cela signifie que si vous placez ce composant de carte dans une barre latérale, une section hero ou dans une grille à l'intérieur du corps principal d'une page, le composant lui-même possède ses informations responsives et se dimensionne en fonction du conteneur, et non de la fenêtre d'affichage.

Cela nécessite la règle at @container. Elle fonctionne de la même manière qu'une requête média avec @media, mais @container interroge le conteneur parent pour obtenir des informations plutôt que la fenêtre d'affichage et l'agent utilisateur.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Commencez par définir la propriété de confinement sur l'élément parent. Écrivez ensuite une requête @container pour styliser l'un des éléments du conteneur en fonction de sa taille, à l'aide de min-width ou max-width.

Le code ci-dessus utilise max-width et définit les liens sur display:none. Il diminue également la taille de la police de l'heure lorsque le conteneur a une largeur inférieure à 850px.

Cartes de requêtes de conteneur

Sur ce site Web de démonstration de plantes, chacune des fiches produit, y compris celle de la bannière, celle de la barre latérale des éléments récemment consultés et celle de la grille de produits, est exactement le même composant, avec le même balisage.

Aucune requête média n'est utilisée pour créer cette mise en page, uniquement des requêtes de conteneur. Chaque fiche produit peut ainsi passer à la mise en page appropriée pour remplir son espace. La grille, par exemple, utilise une mise en page de colonne minmax pour permettre aux éléments de s'insérer dans leur espace et de réorganiser la grille lorsque cet espace est trop compressé (ce qui signifie qu'il a atteint la taille minimale).

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

Lorsqu'il y a au moins 350px d'espace dans la grille, la mise en page des fiches devient horizontale en étant définie sur display: flex, dont la flex-direction par défaut est "row".

Avec moins d'espace, les fiches produit s'empilent. Chaque fiche produit se met en forme elle-même, ce qui serait impossible avec des styles globaux uniquement.

Combiner les requêtes de conteneur et les requêtes média

Les requêtes de conteneur ont de nombreux cas d'utilisation, dont un composant de calendrier. Vous pouvez utiliser des requêtes de conteneur pour réorganiser les événements d'agenda et d'autres segments en fonction de la largeur disponible de leur parent.

Ce conteneur de démonstration interroge pour modifier la mise en page et le style de la date et du jour de la semaine du calendrier, ainsi que pour ajuster les marges et la taille de la police des événements planifiés afin de mieux les adapter à l'espace.

Ensuite, utilisez une requête média pour déplacer l'ensemble de la mise en page pour les écrans plus petits. Cet exemple montre à quel point il est puissant de combiner les requêtes média (qui ajustent les styles globaux ou macro) avec les requêtes de conteneur (qui ajustent les enfants du conteneur et leurs micro-styles).

Nous pouvons donc penser aux mises en page macro et micro au sein du même composant d'interface utilisateur pour permettre des décisions de conception nuancées très intéressantes.

Utiliser les requêtes de conteneur aujourd'hui

Ces démos sont désormais disponibles derrière un flag dans Chrome Canary. Accédez à about://flags dans Canary et activez l'option #enable-container-queries. Cela permettra la prise en charge des valeurs @container, inline-size et block-size pour la propriété contain, ainsi que l'implémentation de la grille LayoutNG.

L'indicateur active également les fonctionnalités correspondantes des outils pour les développeurs Chrome. Découvrez comment inspecter et déboguer les requêtes de conteneur dans les outils de développement.

Styles limités

Pour créer des requêtes de conteneur, utilisez des styles à portée limitée avec @scope afin de limiter la portée de vos sélecteurs.

Les styles à portée limitée permettent de styliser des composants spécifiques pour éviter les conflits de noms, ce que de nombreux frameworks et plug-ins comme les modules CSS nous permettent déjà de faire dans les frameworks. Les styles à portée limitée vous permettent d'écrire des styles encapsulés de manière native pour les composants avec un CSS lisible, sans avoir à ajuster le balisage.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

Le champ d'application vous permet de créer des sélecteurs en forme de beignet, où vous pouvez spécifier une limite supérieure et inférieure. Les sélecteurs contenus dans la règle @scope sont mis en correspondance entre ces limites.

Par exemple, dans un panneau à onglets, vous souhaitez que les onglets obtiennent les styles à portée limitée, mais que le panneau à l'intérieur de ces onglets ne soit pas affecté par ces styles.

Réactif au facteur de forme

Le prochain sujet de notre conversation sur la nouvelle ère du responsive design est un changement de facteur de forme et les possibilités croissantes de ce pour quoi nous devrons concevoir en tant que communauté Web (comme les écrans transformables ou la réalité virtuelle).

Les écrans pliables ou flexibles, et la conception pour l'étalement d'écran sont un exemple de changement de facteur de forme que nous pouvons observer aujourd'hui. L'extension d'écran est une autre spécification en cours de développement pour couvrir ces nouveaux facteurs de forme et besoins.

Une requête média expérimentale pour l'affichage sur plusieurs écrans pourrait nous aider ici. Il se comporte actuellement comme suit : @media (spanning: <type of fold>). La démo configure une mise en page en grille avec deux colonnes : l'une a une largeur de --sidebar-width, qui est de 5 rem par défaut, et l'autre est 1fr. Lorsque la mise en page est affichée sur un écran double avec un seul pli vertical, la valeur de --sidebar-width est mise à jour avec la valeur d'environnement du pli de gauche.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

Cela permet une mise en page où la barre latérale (la navigation dans ce cas) remplit l'espace de l'un des plis, tandis que l'interface utilisateur de l'application remplit l'autre. Cela évite un "pli" dans l'UI.

Vous pouvez tester les écrans pliables dans l'émulateur Chrome DevTools pour déboguer et prototyper l'extension d'écran directement dans le navigateur.

Conclusion

L'exploration de la conception d'interface utilisateur au-delà d'un écran plat est une autre raison pour laquelle les requêtes de conteneur et les styles limités sont si importants. Ils vous permettent de séparer les styles de composants de la mise en page et des styles globaux, ainsi que des styles utilisateur, ce qui permet une conception réactive plus résiliente. Cela signifie que vous pouvez désormais concevoir des mises en page macro à l'aide de requêtes média basées sur des pages, y compris des nuances couvrant l'écran. En même temps, utilisez des micro-mises en page avec des requêtes de conteneur sur les composants et ajoutez des requêtes média basées sur les préférences de l'utilisateur pour personnaliser les expériences utilisateur en fonction de leurs préférences et besoins uniques.

Voici le nouvel écran responsive.

Il combine la mise en page macro et micro, et tient compte de la personnalisation par l'utilisateur et du facteur de forme.

Chacun de ces changements constitue à lui seul une évolution considérable dans la façon dont nous concevons le Web. Mais combinés, ils représentent un changement majeur dans la façon dont nous concevons le responsive design. Il est temps de penser à la conception responsives au-delà de la taille de la fenêtre d'affichage et de commencer à prendre en compte tous ces nouveaux axes pour de meilleures expériences personnalisées et basées sur des composants.

La nouvelle ère du responsive design est arrivée. Vous pouvez déjà commencer à l'explorer par vous-même.

web.dev/learnCSS

Et pour l'instant, si vous souhaitez améliorer vos compétences en CSS et peut-être revoir quelques bases, mon équipe lance un tout nouveau cours et une référence CSS entièrement sans frais sur web.dev. Vous pouvez y accéder via web.dev/learnCSS.

J'espère que vous avez apprécié cet aperçu de la prochaine ère du responsive design et de certaines des primitives qui l'accompagneront. J'espère également que vous êtes aussi enthousiastes que moi quant à ce que cela signifie pour l'avenir du Web design.

C'est une excellente occasion pour nous, en tant que communauté d'UI, d'adopter les styles basés sur les composants et les nouveaux facteurs de forme, et de créer des expériences adaptées aux utilisateurs.