Un aperçu du processus et des outils utilisés pour créer l'expérience de Designcember de style calendrier des fêtes.
Dans l'esprit du mois de décembre et des nombreux agendas que d'autres utilisent pour faire le compte à rebours et célébrer le mois de décembre, nous voulions mettre en avant le contenu Web de la communauté et de l'équipe Chrome. Chaque jour, nous avons mis en avant un contenu lié au développement de l'interface utilisateur et à la conception, soit 31 points forts, parmi lesquels 26 nouveaux sites de démonstration, outils, annonces, podcasts, vidéos, articles et études de cas.
Découvrez l'expérience complète sur designcember.com.
Présentation
Notre objectif était de proposer une expérience Web accessible, fantaisiste, moderne et responsive en quelques octets. Nous voulions mettre en avant de nouvelles API responsives, telles que les requêtes de conteneur, et inclure un bel exemple de mode sombre dans un site Web axé sur le design et comportant de nombreux éléments. Pour ce faire, nous avons compressé les fichiers, proposé plusieurs formats, utilisé des outils de compilation optimisés pour la génération de sites statiques, lancé un nouveau polyfill, etc.
Commencer par une fantaisie
L'idée autour du site de l'agenda Designcember était de présenter tout le travail que nous voulions mettre en avant tout au long du mois de décembre, tout en ressemblant à un site de démonstration lui-même. Nous avons décidé de construire un immeuble d'habitation réactif qui pourrait devenir plus grand et plus étroit, ou plus court et plus large, avec des fenêtres qui se sont réorganisées à l'intérieur du cadre. Chaque période représentait un jour (et donc un seul contenu). Nous avons travaillé avec l'illustratrice Alice Lee pour donner vie à notre vision.
Alice était une source d'inspiration. Elle partageait des processus et des croquis qui étaient passionnants dès ses premiers concepts. Pendant qu'elle travaillait sur l'art, nous avons piraté l'architecture. Les premières discussions portaient sur la disposition macro, le bâtiment et ses fenêtres. Comment les fenêtres s'adapteraient-elles à une, deux ou trois colonnes à mesure que l'espace de fenêtre d'affichage devenait disponible ? Jusqu'où peut-il se réduire ou s'étirer ? Quelle serait la taille maximale du bâtiment ? Dans quelle mesure les fenêtres seraient-elles décalées ?
Voici un aperçu d'un prototype responsif utilisant grid-auto-flow: dense, qui montre comment l'algorithme de grille peut placer automatiquement les fenêtres. Nous avons rapidement réalisé que si les grilles de formatage présentaient de superbes graphismes, elles n'offraient pas la possibilité de laisser les fenêtres se développer et se rétrécir dans un espace disponible non uniforme et de mettre en valeur la puissance des requêtes de conteneur.
Une fois que la grille générale était relativement stable et communiquait une idée de la réactivité du bâtiment et de ses fenêtres, nous avons pu nous concentrer sur une seule fenêtre. Certaines fenêtres s'étirent, se plient, se resserrent, s'agrandissent et se recomposent plus que d'autres dans la grille.
Chaque fenêtre doit gérer un certain nombre de turbulences de redimensionnement. Vous trouverez ci-dessous un prototype de fenêtre démontrant sa réactivité aux turbulences, montrant ce que nous pourrions attendre de l'ajustement de chaque fenêtre interactive.
Animation de fenêtres avec des feuilles de sprites
Certaines fenêtres comportent des animations qui renforcent l'interaction. Les animations sont dessinées à la main, image par image, dans Photoshop. Chaque image est exportée, transformée en feuille de sprites à l'aide du générateur de feuilles de sprites, puis optimisée avec Squoosh. L'animation CSS utilise ensuite background-position-x et animation-timing-function, comme illustré dans l'exemple suivant.
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
Certaines animations, comme la tirelire du sixième jour, étaient des animations CSS basées sur des étapes.
Nous avons obtenu cet effet avec une technique similaire, à l'aide de steps(), à la différence que les images clés correspondent à des positions de transformation CSS et non à des positions d'arrière-plan.
Masquage CSS
Certaines fenêtres avaient des formes uniques. Nous avons utilisé des masques et des aspect-ratio pour créer une fenêtre adaptative, à la forme unique et évolutive.
Pour créer un masque, comme celui de la fenêtre 8, il fallait posséder des compétences classiques dans Photoshop, ainsi que quelques connaissances sur le fonctionnement des masques sur le Web. Regardons la fenêtre du huitième jour.
Pour devenir un masque, la forme intérieure de type trèfle à quatre feuilles doit être isolée en tant que sa propre forme et remplie de couleur blanche. Le blanc indique au CSS le contenu qui reste affiché, contrairement aux autres éléments. Dans Photoshop, l'intérieur de la fenêtre a été sélectionné, estompé de 1 px (pour supprimer les problèmes de crénelage), puis rempli en blanc et exporté à la même hauteur et largeur que le cadre de fenêtre. De cette façon, le cadre et le masque peuvent être superposés directement l'un au-dessus de l'autre, montrant ainsi le contenu interne dans le cadre comme prévu.
Une fois l'opération terminée, le contenu de la fenêtre pourrait être modifié et semble toujours rester dans le cadre personnalisé. L'image suivante montre la version de la fenêtre en mode sombre, avec un fond dégradé différent et un filtre CSS "Halo" appliqué à l'éclairage.
Le masquage est également compatible avec les fenêtres responsives basées sur des requêtes de conteneur. Dans la fenêtre neuf, un personnage est caché derrière un masque jusqu'à ce que la fenêtre soit plus étroite. Pour s'assurer que l'utilisateur ne peut pas ajuster l'image hors du cadre, Alice a renseigné le caractère complet à notre place. Le personnage est masqué à l'intérieur de la fenêtre, mais pas les plantes. Un autre défi à relever a donc été de superposer des éléments masqués avec des couches non masquées et de s'assurer qu'ils s'échappaient bien ensemble.
L'image ci-dessous vous montre à quoi elle ressemble sans le masque sur la fenêtre et le caractère.
L'art à la poubelle
Pour conserver la fidélité de l'illustration et s'assurer que les écrans haute définition n'obtiennent pas une expérience utilisateur floue, Alice a utilisé un ratio de pixels x3. Nous avions décidé d'utiliser imgix et de diffuser des images et des formats optimisés sur son serveur, mais nous avons constaté que l'ajustement manuel avec l'outil Squoosh pouvait nous faire économiser au moins 50 %.
L'illustration présente des défis uniques en matière de compression, en particulier le trait de pinceau et le style à bords bruts transparents utilisés par Alice. Nous avons choisi de réduire chaque image png Photoshop 3x exportée vers une image PNG, WebP et AVIF plus petite. Chaque type de fichier possède ses propres capacités de compression spéciales. Il a donc fallu compresser plus de 50 images avant d'identifier les paramètres d'optimisation courants.
La CLI Squoosh est devenue essentielle avec plus de 200 images à optimiser. Effectuer toutes ces opérations manuellement aurait pris des jours. Une fois que nous disposions des paramètres d'optimisation courants, nous les avons fournis sous forme d'instructions de ligne de commande et nous avons traité par lots des dossiers entiers d'images PNG dans leurs équivalents compressés au format WebP et AVIF.
Voici un exemple de commande squoosh de la CLI AVIF:
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
Une fois les illustrations optimisées enregistrées dans le dépôt, nous pouvons commencer à les charger à partir du code HTML:
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
L'écriture du code source des images était répétitive. Nous avons donc créé un composant Astro pour intégrer des images avec une ligne de code.
<Pic filename="day1/inner-frame" role="presentation" />
Utilisateurs de claviers et de lecteurs d'écran
Une grande partie de l'expérience de Designcember se fait à travers les œuvres d'art et les fenêtres interactives. Il était important pour nous qu'un utilisateur de clavier puisse utiliser le site et jeter un œil par les fenêtres, et que les utilisateurs de lecteurs d'écran bénéficient d'une expérience narrative agréable.
Par exemple, lors de l'intégration des images, nous avons utilisé role="presentation" pour marquer l'image comme présentation pour les lecteurs d'écran. Nous avons estimé qu'une expérience utilisateur comportant entre 5 et 12 descriptions alt fracturées allait être une mauvaise expérience. Nous avons donc marqué les images comme étant de présentation et fourni une narration globale. Passer d'une fenêtre à l'autre sur un lecteur d'écran dégage une belle impression de narration qui, nous l'espérons, aiderait à apporter la fantaisie et le plaisir que le site veut partager.
La vidéo suivante présente une démonstration du fonctionnement du clavier. Les touches de tabulation, d'entrée, de barre d'espace et d'échappement sont toutes utilisées pour orchestrer le focus vers et depuis les fenêtres pop-up et les fenêtres.
L'expérience de lecteur d'écran comporte des attributs ARIA spéciaux qui apportent de la clarté au contenu. Par exemple, les liens correspondant aux différents jours ne contiennent que "un" ou "deux", mais une fois les flux ARIA ajoutés, ils sont annoncés en tant que "Jour 1" et "Jour 2". De plus, toutes les images sont résumées sous une seule étiquette de sorte que chaque fenêtre dispose d'une description.
Astro, générateur de sites statiques d'abord, basé sur des composants
Astro a facilité la collaboration entre les membres de l'équipe sur le site. Le modèle de composant était familier aux développeurs Angular et React, tandis que le système de style de classe cloisonné a permis à chaque développeur de savoir que son travail sur une fenêtre n'entrerait en conflit avec personne d'autre.
Jours en tant que composants
Chaque jour était un composant qui récupérait l'état d'un data store de durée de compilation. Cela nous permet d'exécuter la logique du modèle avant que le code HTML n'atteigne le navigateur. La logique déterminera si le jour doit afficher son info-bulle ou non, car les jours d'inactivité ne comportent pas de pop-up.
Les compilations sont exécutées toutes les heures, et le data store de compilation débloque un nouveau jour lorsque le serveur de compilation dépasse minuit. Ces petits systèmes, qui se mettent à jour et se mettent à jour automatiquement, maintiennent le site à jour.
Styles de champ d'application et accessoires ouverts
Les styles de champ d'application des astronomes sont écrits dans son modèle de composants, ce qui facilite la répartition de la charge de travail entre de nombreux membres de l'équipe et rend l'utilisation des accessoires ouverts plus ludique. Les styles Open Props normalize.css s'avèrent très pratiques avec le thème adaptatif (clair et sombre), et ils permettent de superposer le contenu, comme les paragraphes et les en-têtes.
Lors de l'adoption d'Astro, nous avons rencontré quelques problèmes avec PostCSS. Par exemple, nous n'avons pas pu mettre à jour vers la dernière version d'Astro en raison d'un trop grand nombre de problèmes de compilation. Vous pourriez consacrer plus de temps à l'optimisation des workflows de compilation et de développement.
Conteneurs flexibles
Certaines fenêtres s'agrandissent ou se réduisent afin de conserver le format. Nous avons utilisé d'autres fenêtres pour mettre en avant la puissance de l'architecture basée sur des composants avec les requêtes de conteneurs. Grâce aux requêtes de conteneur, les fenêtres pouvaient posséder leurs propres informations de style responsif et être réajustées en fonction de leur taille. Certaines fenêtres sont devenues étroites à larges et devaient ajuster la taille du média qu'elles contiennent, ainsi que l'emplacement de ce support.
Au fur et à mesure que l'espace disponible pour une fenêtre augmente, nous pouvons adapter sa taille ou ses éléments enfants. Il s'est avéré que pour remplir les fenêtres adaptatives, les requêtes de conteneur n'étaient pas seulement amusantes à présenter, elles seraient requises et auraient considérablement simplifié l'orchestration de certaines mises en page.
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
Cette approche est différente du maintien d'un format. Elle offre plus de contrôle et plus d'opportunités. À une certaine taille, de nombreux enfants se déplacent pour s'adapter à une nouvelle mise en page.
Les requêtes de conteneur nous ont également permis de prendre en charge le confinement dans la direction du bloc (verticalement). Ainsi, à mesure que la fenêtre augmentait, nous pouvions ajuster ses styles pour qu’ils s’adaptent de manière appropriée. Cela se reflète dans les requêtes basées sur la hauteur, que nous utilisions de manière autonome, et en plus des requêtes basées sur la largeur:
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
Nous avons également utilisé des requêtes de conteneur pour afficher et masquer des détails, car les œuvres d'art étaient de plus en plus encombrées dans les tailles plus petites et plus vides dans les tailles plus grandes. La fenêtre 9 en est un bon exemple:
Compatibilité multinavigateur
Pour créer une expérience multiplate-forme moderne et optimale, en particulier pour les API expérimentales telles que les requêtes de conteneur, nous avons besoin d'un polyfill de qualité. Nous avons envoyé un appel à notre équipe, et Surma a piloté la conception d'un nouveau polyfill de requête de conteneur. Le polyfill s'appuie sur ResizeObserver, MutationObserver et la fonction:is() CSS. Par conséquent, tous les navigateurs récents sont compatibles avec le polyfill, en particulier Chrome et Edgeà partir de la version 88, Firefox à partir de la version 78 et Safari à partir de la version 14. L'utilisation du polyfill permet d'utiliser l'une des syntaxes suivantes:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Mode sombre
Une dernière touche essentielle pour le site Web Designcember était le superbe thème sombre. Nous voulions vous montrer comment utiliser l'art lui-même pour participer activement à la création d'une expérience exceptionnelle en mode sombre. Pour ce faire, nous avons ajusté les styles d'arrière-plan de chaque fenêtre par programmation et utilisé autant de code CSS que nécessaire pour créer l'illustration de la fenêtre. La plupart des arrière-plans étaient des dégradés CSS, de sorte qu'il serait plus facile d'ajuster leurs valeurs de couleur. Nous les avons ensuite superposées.
Autres easter eggs
Touches personnelles
Nous avons ajouté quelques touches personnelles à la page pour lui donner plus de personnalité. Le premier était le casting des personnages, inspirés de notre équipe. Nous avons également inclus un curseur de style "Retour" pour les jours d'inactivité et manipulé le style favicon.
Éléments fonctionnels
L'une des fonctionnalités supplémentaires est la fonctionnalité "Aller à Aujourd'hui", avec un oiseau posé au-dessus du bâtiment. Si vous cliquez sur cet oiseau ou appuyez sur Entrée, vous accédez au jour du mois en cours, ce qui vous permet d'accéder rapidement aux derniers lancements.
Designcember.com dispose également d'une feuille de style pour impression spéciale, dans laquelle nous affichons l'image la plus adaptée sur du papier 8,5 x 11 pouces, afin que vous puissiez imprimer le calendrier vous-même et rester festif toute l'année.
Dans l'ensemble, un travail considérable a été consacré à la création d'une expérience Web moderne, amusante et fantaisiste, pour célébrer le développement de l'interface utilisateur tout au long du mois de décembre. Nous espérons qu'elle vous a plu.
