Mise en page Web nouvelle génération – Géant des forêts de National Geographic

Christopher Gammon
Christopher Gammon

Les outils du CSS et de la mise en page du navigateur peuvent permettre de créer des visualisations époustouflantes pour le contenu Web. L'utilisation de fonctionnalités Web telles que les filtres CSS, WebGL, la vidéo HTML5, le SVG, le canevas et les technologies futures en pleine évolution telles que les régions CSS, les formes CSS et les filtres CSS personnalisés promet un paysage créatif extrêmement étendu. Adobe collabore depuis longtemps avec des créateurs de contenu passionnés par la mise en page et la conception. L'entreprise applique donc activement ces connaissances au Web et contribue à de nombreuses normes Web en constante évolution.

Avec l'aide de National Geographic, nous avons utilisé le contenu de leur article intitulé "Forest Giant" pour créer un prototype montrant comment ces fonctionnalités peuvent permettre de créer une mise en page Web riche et des techniques responsives. Cet article explique comment nous avons créé certaines caractéristiques particulièrement intéressantes du site. Pour obtenir un aperçu concis, nous vous invitons à regarder cette vidéo ci-dessous, dans laquelle Christian Cantrell vous présente les différentes fonctionnalités du site.

Subtleties of Layout

Les éléments qui font une bonne mise en page et les fonctionnalités qui la sous-tendent peuvent être subtils. Nous avons donc créé une "superposition de l'éditeur" qui met en évidence les fonctionnalités les plus remarquables. Pour activer les marques de l'éditeur, cliquez sur la barre en bas de l'article.

Image des repères de l'éditeur

Indépendant de la mise en page

Aujourd'hui, sur le Web, la mise en page est souvent dictée par le contenu, avec des conteneurs qui s'agrandissent verticalement pour s'adapter au texte. Lorsque vous créez des mises en page complexes, les modifications apportées au texte ou à d'autres contenus peuvent avoir un impact indésirable sur la mise en page globale, ce qui nécessite de repenser le contenu en fonction de ces modifications inattendues. Avec les régions, nous pouvons vraiment séparer notre contenu de la mise en page en définissant un élément comme contenu, puis en spécifiant les parties de la mise en page que nous souhaitons que ce contenu traverse.

Dans l'exemple de "Forest Giant", l'histoire est contenue dans un seul élément. Ensuite, sur toute la page, nous avons notre échafaudage de mise en page, composé de photos et de zones de texte. Avec CSS, nous définissons les éléments que nous souhaitons que le contenu traverse. Lorsque la copie arrive à la fin d'un élément, elle passe au suivant dans l'ordre DOM. Cela nous permet d'être très créatifs avec nos colonnes, de les décaler et d'adapter leur hauteur en fonction de la conception, sans nous soucier de savoir si le texte s'adaptera ou dépassera la hauteur de l'élément. Elle nous permet également d'inclure des éléments dans notre mise en page, comme des images en plein écran, tout en continuant à dérouler l'histoire.

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

Dans le CSS ci-dessus, nous créons un flux nommé "story". Le contenu de ce flux nommé est l'élément dont l'ID est "storyContent". Cette valeur est ensuite transmise à tous les éléments avec le nom de classe "story". Les régions CSS sont un excellent outil pour le responsive design. Elles permettent d'utiliser des fonctionnalités telles que les multicolonnes et les colonnes décalées pour une mise en page riche sur les grands écrans, tout en s'adaptant à la mise en page à une seule colonne sur les petits écrans. Avec les régions, vous pouvez également définir la taille de votre région avec des unités responsives telles que vw ou vh. Vous pouvez ainsi vous assurer que les colonnes ne dépassent pas la hauteur de la fenêtre d'affichage dans votre mise en page, sans vous soucier de la coupure du contenu, car il s'écoulera naturellement vers l'élément suivant de la chaîne de régions.

Initiales en majuscules

Les exclusions CSS nous permettent d'encapsuler du texte autour ou dans des formes irrégulières. Cela peut être utile pour les fioritures de conception, comme les initiales en majuscules. Les initiales majuscules sont une pratique de conception courante. Elles consistent à agrandir la première lettre d'un récit ou d'un chapitre, ce qui permet au reste du texte de s'enrouler autour du contour du caractère. Cet effet est très semblable à la façon dont le contenu intégré s'affiche autour des éléments flottants. Toutefois, avec les exclusions, nous ne sommes plus limités aux cases rectangulaires. En utilisant shape-outside sur un élément flottant, nous pouvons définir la géométrie qui permet à notre contenu de s'enrouler étroitement autour de la forme de notre personnage.

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

Une ellipse est alors créée, ce qui permet au contenu de s'enrouler autour de la forme circulaire. De plus, comme nous utilisons des unités relatives pour la forme, la modification de la taille de l'élément se répercutera sur la taille de la forme.

Image de la première lettre en majuscule

Formes

En plus des initiales en majuscules, les exclusions permettent de couper le texte dans les formes à l'aide de shape-inside. Nous utilisons cette fonctionnalité sur l'ensemble du site, en particulier pour les légendes de grandes images, en utilisant l'espace négatif des photos pour encadrer le texte. Il nous permet également de faire en sorte que le texte épouse le contour d'autres images et graphiques, ce qui permet d'émuler des mises en page qui étaient auparavant très difficiles à réaliser sur le Web.

Les formes peuvent également fonctionner avec les mises en page responsives en utilisant des unités relatives pour les définir. Nous pouvons ainsi créer des formes qui s'étendent en fonction du conteneur ou de la fenêtre d'affichage, et même utiliser des requêtes multimédias pour modifier complètement la forme ou la supprimer, car tout est défini en CSS. Vous trouverez ci-dessous un exemple d'utilisation d'une forme polygonale sur le site, avec les valeurs qui définissent les points:

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Image des formes CSS

Texte équilibré

Le texte équilibré est une fonctionnalité qui examine l'ensemble du bloc de texte d'un élément lors du retour à la ligne, plutôt que de le faire mot par mot. Il évite d'avoir un ou deux mots sur une seule ligne en séparant les lignes de texte pour obtenir des lignes de taille uniforme dans un élément. Ce niveau de contrôle nous permet de créer facilement des blocs de texte esthétiquement agréables, en particulier pour les courtes séries comme les citations ou les sous-titres.

C'est exactement là que nous utilisons le texte équilibré dans l'article. Comme cette fonctionnalité est une norme proposée par Adobe, nous utilisons un polyfill créé par Randy Edmunds pour obtenir les mêmes résultats. Cette fonctionnalité est particulièrement visible dans les cas de réponse. Lorsque vous redimensionnez le navigateur, vous remarquerez que le bloc continue d'équilibrer le texte pour obtenir des lignes d'environ la même largeur. L'utilisation du polyfill de texte équilibré est simple, car il s'agit d'un plug-in jQuery. Il suffit d'appliquer "balanceText()" à un sélecteur lorsque la mise en page change pour obtenir un texte bien équilibré, comme suit:

$('.balance').balanceText();
Image de texte équilibré

Filtrer les transitions

Les transitions sont un moyen important d'attirer l'attention de l'utilisateur et de communiquer l'état des éléments de votre site. L'opacité (et plus récemment les transformations 3D) ont été utilisées pour créer des transitions et des animations fluides lorsque les utilisateurs font défiler votre site ou interagissent avec certaines de ses parties. Nous disposons désormais de filtres qui peuvent servir à la même fin.

Dans "Forest Giant", nous utilisons des filtres pour passer de l'échelle de gris à la couleur à mesure que certaines images apparaissent. Vous pouvez combiner ces filtres avec l'opacité ou d'autres filtres pour créer des effets et des transitions d'imagerie complexes. Nous pouvons utiliser la puissance des filtres personnalisés pour ajouter des effets encore plus saisissants.

Les filtres personnalisés sont écrits à l'aide de GLSL, le même langage de nuanceur que WebGL. Ils vous permettent d'appliquer ces nuanceurs aux éléments DOM via CSS, ce qui permet d'obtenir des effets de mélange complexes et une distorsion 3D. En bas du site, lorsque vous cliquez sur "Explorer l'arbre des présidents", la page se plie pour révéler une autre section en dessous. Il ne s'agit là que d'un exemple parmi d'autres de la manière dont les filtres personnalisés peuvent permettre des transitions riches entre les contenus. L'animation peut être réalisée à l'aide de transitions CSS. Toutefois, si vous souhaitez utiliser des animations ou des interactions plus robustes que les transitions, vous pouvez transmettre des valeurs à votre nuanceur en définissant le style avec JavaScript, comme indiqué ci-dessous. Vous pouvez ainsi contrôler plus précisément l'atténuation ou même autoriser des méthodes d'entrée utilisateur à manipuler le nuanceur.

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

Notre filtre effectue une rastérisation du contenu en tant que texture sur le GPU pour appliquer l'effet. C'est pourquoi nous devons nous assurer de la supprimer une fois qu'elle est terminée, sinon notre contenu risque d'apparaître flou.

$("#map").css("webkitFilter", "none");

Les filtres CSS personnalisés permettent d'obtenir des effets intéressants, comme un retour à la ligne qui ressemble à un retournement de page dans un livre physique. Ils permettent à un développeur Web de programmer des effets complexes dans un langage appelé GLSL et de les appliquer au contenu Web. Pour en savoir plus sur les filtres personnalisés, tous ces paramètres et leur utilisation, consultez ce tutoriel excellent.

Image de retournement de page

Prérendre des textures dans WebGL

La pièce maîtresse de cet article était la première image complète de "The President", considéré comme le deuxième plus grand arbre au monde en volume. Cette image a été créée en assemblant des centaines de photos de l'arbre pour obtenir une vue d'ensemble. Nous voulions simuler ce processus en divisant l'image en plusieurs petites photos qui s'affichent pour créer l'image complète. Pour ce faire, nous avons utilisé WebGL, en particulier la bibliothèque Three.js, qui est un wrapper d'API de niveau supérieur autour de WebGL.

Image d'un arbre géant

L'affichage d'un grand nombre de textures peut rapidement entraîner des problèmes de performances chaque fois qu'une nouvelle texture tente de s'afficher à l'écran, sans parler des requêtes réseau supplémentaires. Pour réduire ce problème, nous avons rendu nos textures aussi grandes que possible et les avons décalées pour chaque carte. Cette technique est souvent appelée "mappage d'éléments graphiques" et est courante dans le développement de jeux. Cela a généré trois grandes textures pour l'ensemble de l'arbre. Pour supprimer l'impact sur les performances à chaque fois qu'une des textures devient visible à l'écran, nous affichons des carrés de 1 pixel avec chacune des textures avant le début de l'animation, ce qui déplace l'impact sur les performances au début. Cela nous permet de parcourir et d'animer toute la hauteur de l'arbre de manière fluide, même sur une tablette.

Pour décaler les textures, nous modifions les UV qui mappent la texture à la géométrie. Dans Three.js, cela se présente comme suit:

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

Ici, vous pouvez voir que nous utilisons une variable pour le décalage X et Y de la texture. Le même effet peut être obtenu avec un matériau de nuanceur GLSL personnalisé qui décale les coordonnées dessinées sur la géométrie.

Fonctionnalités expérimentales

Étant donné que certaines des fonctionnalités utilisées dans la démonstration sont encore expérimentales, vous devez consulter l'article dans Chrome Canary et activer tous les indicateurs mentionnés pour Chrome Canary sur ce site Web.

Une fois Chrome Canary installé et correctement configuré, consultez la démonstration. (Notez que l'ensemble du projet est Open Source et disponible sur GitHub.)

Conclusion

Nous avons également étudié comment ces fonctionnalités pourraient être utilisées dans le contexte d'une application mobile, plus proche d'un e-book. Vous pouvez voir ce prototype en cours de développement et comment nous utilisons les différents paradigmes d'interaction et tactiles pour présenter ces fonctionnalités sur une tablette.

La mise en page des navigateurs Web évolue constamment. Nous constatons que les utilisateurs souhaitent conserver la valeur de production et la qualité de mise en page auxquelles ils étaient habitués avec les anciens contenus de lecture. Grâce à des fonctionnalités telles que les régions CSS, les exclusions, le texte équilibré, les filtres personnalisés et WebGL, les créateurs de contenu n'auront plus à choisir entre la couverture et la qualité de conception. "Forest Giant" est un signe clair que le Web du futur permettra les deux.