“ Everything You Know About Web Design Just Changed ” by Jen Simmons
“ We need more art, Real Graphic Design ”, nous raconte, lors de sa conférence d'octobre 2018 à Orlando, Jen Simmons, web designer, développeur chez Mozilla et membre du CSS Working Group du W3C.
Ces dernières années, on s’est toujours dit que tout a changé quand le design “ mobile first ” est arrivé, mais en réalité, le combat entre l’art et les restrictions du web est interminable. Tout ce que vous preniez pour acquis sur le design web a changé.
Dans le cadre de notre workshop IOLCE ( Input Output Lire et Communiquer sur Écran ), nous vous proposons donc notre compte-rendu de cette conférence.
Un petit peu d’histoire…
Il était une fois, l’html…
À l’époque, il n’y avait pas de css, pas de javascript. On avait un flux de textes et d’images très spécifiques, adapté à l’utilisation scientifique de l’époque. Le texte prenait plus de place sur le navigateur tandis que les images avaient une taille spécifique, ne grandissaient pas plus ou moins que leur taille initiale. Le premier outil de partage au niveau mondial est né sous sa forme la plus basique : simple, mais efficace.
Des tableaux, des tableaux et encore des tableaux
On part d'une mise en page créée ( par exemple ) sur Photoshop qui est ensuite reproduite sur le site web, cela permettait un design plus poussé. Malheureusement, le chargement de la page en est plus lent et la page n’est pas très accessible notamment avec les lecteurs d'écran qui ont parfois du mal à interpréter les informations.
Et Flash me voilà
Après est arrivé le design Flash. Le site était présenté sous la forme de fichiers interactifs importés dans un document html, chaque élément du site étant un objet à positionner individuellement. Grâce à flash, on pouvait ajouter des animations et des interactions avec les divers éléments de la page ( des boutons, des bannières, des apparitions et disparitions d'éléments ). Il a également aidé à démocratiser la vidéo sur le web. Seul problème c’est qu’on ne savait pas quel taille allait faire l'écran de l'utilisateur et le site n'y était souvent pas adapté. De plus, à chaque modification il fallait ré-exporter le fichier. Étant peu pratique, cette façon de faire a peu à peu été abandonnée, malgré sa grande popularité à l'époque.
<h3 class=”revolution”>CSS</h3>
Révolution, le CSS ! On a enfin accès à un code propre et efficace, on sait gérer les images et les textes de manière plus polyvalente. Notamment avec la “ semantic markup ”, un principe fondamental pour le web d’aujourd’hui. L’html ( contenu et interface ) est séparé du css ( design et layout ). Cela permet un entretien et une mise à jour du site web plus simple ainsi qu’un code plus léger et clair. Cependant tout n’est pas tout rose, certaines fonctionnalités qui étaient disponibles en utilisant les tableaux ne le sont pas en css.
La mise en page qui coule de source
Le “ fluid layout ” est utilisé pour sortir une image du flux, ou écoulement normal du site pour être placé à droite ou à gauche, tout en restant dans le flux. Il est utilisé avec la balise “ float ”. Malheureusement cela provoque des superpositions involontaires sur les petits écrans ou de gros espaces blancs sur les plus grands écrans. En parallèle, les designers proposent de l’utiliser avec des valeurs de taille fixes plutôt que des pourcentages, malheureusement cela engendre souvent un débordement considérable.
Et le design responsive naquit
La révolution arrive enfin. Ethan Marcotte, un web designer, instaure le design responsive. D’autant plus qu'aujourd'hui, il existe des centaines de tailles d’écran différentes, il est donc impératif que la compatibilité soit au rendez-vous. C’est en fait un peu un retour au “ fluid layout ” qui permet plus de contrôle. Entre autre, les media queries permettent de définir le css en fonction de la taille de l’écran. En tant que designer web, on se doit d’être flexible, on se doit de créer des sites web qui peuvent être lus par tous et du mieux possible sur le plus de supports possibles. Plus besoin donc de repenser tout le design pour différents écrans. Le mot d’ordre est l’adaptation.
Une nouvelle ère…
On va commencer par parler d’ “ intrinsic design ”, mais qu’est ce que c’est exactement? Le design intrinsèque c’est le nom que Jen Simmons a donné au futur de la mise en page web, la version évoluée du design web responsive. C’est en fait un design qui est inhérent au web, autrement dit on fait du web pour du web, on utilise les propriétés de base, l’html et le css pour transformer nos pages classiques en véritable oeuvres d’art. Fini les “ hacks ” comme les propriétés “ float ” qui sortaient nos images du flux ou encore le design avec la propriété “ absolute ” qui est magnifique sur une taille d’écran spécifique mais s’écrase au moindre changement. Et plus besoin de logiciels tiers pour designer les pages.
Le design intrinsèque se base sur 3 éléments :
-
Compression et Expansion
Que faire quand il y a peu ou beaucoup d'espace ?
- envelopper et refondre ( wrap and reflow ) ;
- agrandir / rétrécir ( images, textes qui rétrécissent/agrandissent ) ;
- ajouter / supprimer les espaces blancs ;
- glisser / superposer .
-
Nouvelles possibilités de flexibilité.
Aujourd’hui nous avons plein d’outils différents pour rendre responsives les images, les textes, les colonnes et bien d’autres. Ces éléments permettent de nouvelles possibilités de flexibilité.
-
Viewport ou Support visuel.
On utilise la centralisation verticale, la centralisation par rapport à la zone d'affichage et les grilles. Tant d’outils pour rendre notre page adaptative peu importe la taille du navigateur. L’idée est de coder pour les quatres coins de votre navigateur web, et changer la façon dont nous utilisons la fenêtre d’affichage de l’écran.
Pourquoi adopter le design intrinsèque ?
Le design responsive était déjà une avancée, le design intrinsèque va encore plus loin, on utilisait des images flexibles, maintenant on les combine avec les images fixes. Avant on ne s’occupait que des colonnes, maintenant on arrive à gérer les quatre coins du viewport, et par conséquent on peut modifier les rangées. Enfin, plus pratique qu’autre chose, nous devions nous occuper des media queries, avec cette nouvelle manière nous pouvons nous en passer. Le design est en constante évolution, tous les jours de nouvelles solutions et manières de travailler dans le domaine du web naissent.
