30 ans d’UI : l’évolution des interfaces web du point de vue des dev

Introduction

Bonjour à toutes et à tous. Merci d’être venu·es aussi nombreux·ses à ma première conf, donc soyez indulgent·es s’il vous plaît.

Alors, « 30 ans d’UI, l’évolution des interfaces web du point de vue des dev » — et du coup, ce n’est pas vraiment une conf hyper technique, donc ne vous inquiétez pas : pour celles et ceux qui ont assisté à des conférences sur l’IA, il n’y a pas de maths dans cette conf, ok ?

Moi, je vais partir du design, et je vais voir comment, il y a 30 ans, on développait des sites web, comment il y a 20 ans on développait des sites web, et comment il y a 10 ans on développait des sites web — parce que je voulais voir comment les gens souffraient, parce que c’était de la souffrance.

En gros, vous avez des sites qui datent de diverses périodes de ces 30 ans de développement web. Et vu que ma conf ne dure que 20 minutes, vous l’aurez compris, je ne vais pas pouvoir rentrer en détail dans tout ce que j’aurais aimé aborder — c’est ce qui se passe quand on soumet un sujet de conf avant de savoir ce qu’on va dire.

Donc je me suis dit qu’on allait retourner en 1991, pour se rendre compte de ce qu’était le web à l’époque.

1991-1995 : le web en lecture seule, période « Blue2 »

1991, pour poser un peu le thème : c’est l’époque où Patrick Bruel est considéré comme l’idole des jeunes, où Mylène Farmer sort Désenchantée, où les pin’s font fureur, et où les ordinateurs ressemblent à ça. Et si les ordinateurs ressemblent à ça, les sites web ressemblent à ça aussi.

Cette période, en gros de 91 à 95, je l’ai appelée « lecture seule », ou « Blue2 ». Lecture seule, parce qu’on est vraiment dans de la consultation : on va sur le web pour consulter des pages, c’est vraiment de la documentation, on trouve pas mal de trucs scientifiques. Et « Blue2 », parce que c’est la couleur des liens hypertexte — et j’ai plein d’anecdotes sur la couleur des liens hypertexte que je ne vous raconterai pas, faute de temps, mais c’est un sujet super intéressant, donc je vous invite à faire vos recherches.

Petite question pour vous : à votre avis, combien il y avait de balises HTML en 1991, sachant qu’aujourd’hui il y en a plus de 100 ? … 18. Ce qui explique un peu les sites austères de l’époque. Et ces balises étaient vraiment à destination — bon, déjà on a la balise a, pierre angulaire du web aussi bien en 1991 qu’en 2023 — et on a des balises comme ul, dl, dt ou dd, qui servent à faire des définitions. On voit bien qu’on n’est pas du tout sur des balises pour de la vidéo ou de l’image, on est vraiment sur des balises qui semblent idéales pour reproduire des documents texte. Et ça, ça me rappelle beaucoup Word — le traitement de texte basique, où tu as une page blanche, un texte noir, et c’est un peu ça.

Je me suis amusée à me dire : le site de la conférence où je suis aujourd’hui, à quoi il ressemblerait en 1991 ? Il ressemblerait à un truc comme ça. Et j’ai mis un petit snippet de code, parce que je me suis dit, allez, on va flexer nos compétences en HTML : j’ai mis une balise title qui est le nom de la conf, une balise address où j’ai mis l’adresse du lieu où on est aujourd’hui, une balise a avec le bouton de réservation de la place, et cetera.

1995, c’est une année particulière pour moi, parce que c’est l’année de ma naissance — le 29 janvier 1995. Et cette année-là, c’est aussi l’apparition de PHP, qui nous permet de passer d’un web en lecture seule à un web dynamique : on a du server-side rendering. C’est aussi l’apparition d’HTML 2, et on voit apparaître le doctype — parce que je ne sais pas si vous avez remarqué, mais dans les 18 balises que je vous ai montrées tout à l’heure, il n’y avait pas de doctype, alors qu’on sait tous que sur une page index.html standard, le premier truc qu’on met, c’est le doctype. Eh bien ça n’existait pas. C’est aussi l’apparition de la balise image, donc on va pouvoir commencer à avoir du fun sur nos interfaces, et c’est également l’apparition de JavaScript. Donc je pense que c’était tout destiné que je devienne développeuse web, vu que je suis née la même année que PHP, HTML 2 avec les images, et JavaScript.

1996-2005 : « graphic design is my passion »

Après cette période « Blue2 », où vraiment le web c’était blanc, bleu, voire gris et noir, on passe dans une période que j’ai appelée « graphic design is my passion » : c’est vraiment le graphisme qui devient la passion de tout le monde. C’est comme si vous étiez sur Word et que vous découvriez les WordArt.

En gros, avant, le web était réservé, utilisé plutôt par des scientifiques ou des intellectuels. Et là, à partir de 1996, des gens comme vous et moi commencent à s’accaparer le web et à pousser ce qu’on peut faire en termes de design — d’où le site Pepsi World, ou le site HTML Workshop, qui sont des exemples de très bon design, de très bons choix de couleur, de très bons choix typographiques pour l’époque.

J’ai découpé cette période de 96 à 2005. Pourquoi ? En gros, fin 95 on a JavaScript, donc on peut avoir des interactions sur nos pages. En 96, on a CSS1 — parce qu’avant, on pouvait bien styliser les pages, mais c’était limité, et on le faisait dans le HTML. À l’époque, quand on parle d’optimisation du poids des pages et du chargement, on est sur le poids des documents HTML : on est en mode « les balises sont trop longues, il faut privilégier la balise p parce que c’est plus court qu’une balise » — je ne sais pas, disons span, elle n’existait pas encore à l’époque, mais c’est un peu le délire, parce qu’à ce moment-là on est vraiment là-dessus. Et on commence aussi à se pencher sur JavaScript, donc CSS1, et Flash, qui permet de faire des jeux, des interactions avec la page, et cetera — et c’est ce qui va donner lieu à beaucoup de liberté et de créativité durant cette période.

Donc si je refais le site de la conf en essayant de garder l’esthétique de l’époque — c’est un peu discutable — je me suis dit, je vais faire une magnifique image avec un dégradé, c’était très tendance, et une police italique, on ne sait pas pourquoi, parce que c’est fun. Et vous remarquerez peut-être qu’il y a un bouton, et certains sont peut-être en train de se dire : « pourquoi son bouton est arrondi, ce n’est pas possible à cette période ? » Et vous avez raison — sauf que les gens à cette période-là étaient des filous : en fait, le bouton arrondi, c’est une image en fond, parce qu’on avait background-image. Du coup, on mettait des images en fond, on mettait des bouts d’image dans les coins pour faire des formes arrondies. J’ai un snippet de code qui est du code valide aujourd’hui, et par exemple le site Goto.com avait des boutons ronds qui n’étaient pas vraiment des boutons — c’était juste des images. Donc je vous ai trouvé un site à peu près joli pour l’époque, parce que je ne voulais pas me moquer de tous les designers de l’époque.

En 97, HTML arrive avec des balises intéressantes, notamment la div — donc s’il y a des gens qui aiment les soupes de div, c’est votre année. Il y a aussi la balise script, pour JavaScript, et d’autres balises, mais je n’ai pas le temps de toutes les couvrir. Toujours en 97, la Web Accessibility Initiative voit le jour, et je trouve ça intéressant de parler d’accessibilité dès 97, parce que quand on sait qu’en 2023 plus de 95, voire 98 % des sites ne sont toujours pas accessibles, il faut peut-être se poser les bonnes questions.

En 98, on a CSS2 qui arrive avec des propriétés qui font pleurer beaucoup de devs dans la salle : position, donc fixed, absolute, z-index — c’est souvent là-dessus que je viens aider mes collègues. Il y a aussi des propriétés plus sympas, min-width et max-width, donc on commence à pouvoir un peu mieux contrôler la taille de nos images, et on peut commencer à avoir des sites un peu plus sympas. Sauf que pendant cette période, il y a une sorte de guerre des navigateurs, avec IE et Netscape qui se livrent une guerre sans relâche. Et vous savez, quand on dit « oui, IE c’est nul, parce que notre code ne marche pas dedans, alors que sur Chrome c’est bon » — vous ne savez pas la chance que vous avez de juste lutter contre IE, parce qu’à cette époque-là, il y avait plein d’autres navigateurs, et ils n’implémentaient pas tous le HTML et le CSS de la même façon. Du coup, en fonction du navigateur, vous ne saviez pas à quoi allait ressembler votre site. Il y a un gars — je crois que c’est Todd Fahrner — qui a créé l’Acid Test : en gros, c’est juste une page à charger dans le navigateur, et si elle s’affiche comme prévu, ça veut dire que les features, les specs HTML, sont correctement implémentées ; si c’est cassé, ça ne fonctionne pas. C’est un peu l’ancêtre du Can I Use, donc merci à Todd Fahrner d’avoir aidé beaucoup de devs — je suis tombée plusieurs fois sur son test — et aussi beaucoup de gens qui créent des navigateurs, parce qu’en gros, quand on crée son propre navigateur, on lançait ce test pour voir si le moteur de rendu HTML/CSS était bon.

En 99, il y a de nouvelles balises HTML, et on a aussi les Web Content Accessibility Guidelines — si vous avez fait des formations sur l’accessibilité, ça vous dit sûrement quelque chose, le RGAA est basé dessus. Ça nous donne des standards d’accessibilité à appliquer sur nos sites — ça, c’est en 99, et on est en 2023, et ils sont encore loin d’être implémentés partout.

On a aussi CSS3 qui arrive en 99, et vous êtes peut-être choqué·es, en vous disant « mais attends, CSS3 c’est un truc qu’on utilise encore en 2023 ». Oui, mais la particularité de CSS3, c’est qu’il est livré par module, petit à petit. Par exemple, CSS3 nous donne les media queries — mais pas en 99 : les media queries, c’est plutôt 2011-2012. Donc pour vous dire, en gros, CSS3 est venu ajouter des choses au fur et à mesure. Et en 99, faire un site comme celui que je vous montre est possible, pratiquement — sauf le responsive, parce que comme je vous le disais, les media queries arrivent bien plus tard, donc le responsive, ce n’est pas encore possible. Les petites icônes sous le « suivez-nous », ça peut être des balises image, le bouton aussi. Et là vous vous dites peut-être : « mais attends, ce layout, c’est du flexbox, c’est du grid », elle nous ment, elle est folle — ou alors vous dites : « non, c’est un tableau, on faisait beaucoup ça à l’époque ». Non, c’est peut-être du float, en fait, parce que float est arrivé avant les tableaux pour faire du layout ; et si vous ne connaissez pas float, vous avez de la chance, ne l’utilisez pas, sauf dans de très rares cas. Mais il y a aussi des gens qui ont utilisé des tableaux, parce qu’en fait c’est plus facile d’utiliser une mauvaise balise HTML que d’utiliser correctement le CSS. Donc les gens utilisaient des table, stylisées pour qu’on ne voie pas que c’est des tableaux, mais ce n’est pas très bien, parce que la balise table est une balise sémantique, et la sémantique, ça sert à apporter du sens — notamment pour l’accessibilité.

Je vous ai parlé de responsive : en 2001, Audi lance le premier site « semi-responsive ». Semi-responsive, parce qu’en fait c’est du JS, ce n’est pas du CSS, ce ne sont pas des media queries : ils se basent sur la résolution du navigateur pour savoir quel site afficher. En gros, ils visent trois résolutions : 640 pixels pour la plus petite, et la plus grande n’est pas beaucoup plus large que ça — mais c’est comme ça qu’on faisait du responsive à l’époque, pour celles et ceux qui voulaient en faire, parce qu’en 2001, on n’est pas encore à l’époque de l’iPhone.

2005-2011 : l’expérience dev et utilisateur

Il s’est passé d’autres choses, mais encore une fois je n’ai pas le temps de tout couvrir. On arrive dans la période 2005-2011, que j’ai appelée « user et dev experience », parce que c’est une période où il y a beaucoup d’outils qui apparaissent, qui vont améliorer la vie des devs, l’expérience de développement, et par la même occasion l’expérience utilisateur.

En 2004, Mark Zuckerberg lance Facebook — je ne dirai rien de plus. En 2007, il me semble, sort l’iPhone — les téléphones, ça ressemblait à ça, c’est pour vraiment vous projeter en arrière, voilà le premier iPhone. En 2005, il y a aussi Ajax, le cauchemar de certaines personnes, qui nous permet de faire de l’asynchrone, donc des requêtes serveur sans avoir besoin de recharger la totalité de la page. Et c’est plutôt bien pour l’utilisateur : quand on tape quelque chose dans une barre de recherche, il y a juste la zone qui se recharge, pas toute la page, c’est vraiment génial pour l’utilisateur. Mais pour les devs, est-ce que c’est cool ? Pas vraiment. Du coup, en 2006, un gars lance jQuery : c’est peut-être traumatisant pour certain·es, mais à l’époque, franchement, jQuery facilite les requêtes Ajax, facilite l’animation, facilite la manipulation du DOM — c’est vraiment le framework qui te sauve. Et c’est pour ça qu’il est dans beaucoup de projets, c’est pour ça qu’il y a du legacy, et c’est pour ça que moi, par exemple, quand j’ai commencé le dev il y a 4 ans, j’utilisais encore jQuery. Donc voilà, méfiez-vous.

En 2006, il y a Sass, un préprocesseur, et quelques années plus tard, je crois en 2009, LESS sort : ça nous permet de faire du CSS plus facilement, on a accès à des mixins, des fonctions, des variables. En 2023, vous allez me dire qu’on a déjà des variables en CSS natif — oui, mais en 2006, les variables, ça change la vie, ça permet d’avoir un code qu’on peut maintenir plus facilement.

En 2007, on a CSS Grid — donc, adieu float, c’est terminé, adieu les tableaux, c’est terminé ! Ah oui, sauf que ce n’est pas forcément implémenté dans tous les navigateurs, donc il faut vérifier que le support est bon — c’est pour ça que même si Grid arrive dès 2007, il n’est pas forcément utilisable avant longtemps, plutôt vers 2017. Je me suis dit qu’il fallait quand même mentionner 2008 : Stack Overflow, voilà, pour ceux qui ne connaissent pas, c’est l’ancêtre de ChatGPT.

En 2009, on a Flexbox — et si vous regardez les propriétés de l’époque, elles ne sont pas du tout les mêmes que celles qu’on utilise en 2023. Je ne vais pas toutes vous les lire, mais en gros, il y avait par exemple box-direction au lieu de flex-direction, et toutes les propriétés flex étaient préfixées box-. Ça m’a fait rire quand j’ai vu ça, donc je voulais vous le partager.

En 2011, on a enfin les media queries : on peut enfin faire un site responsive, essayez d’en faire un !

2012-2014 : la guerre des frameworks et HTML5

2012, période plus sombre : la guerre des frameworks. J’ai mis 2012 parce que j’avais envie de faire une mention spéciale à TypeScript, qui n’est pas un framework, je sais, mais c’est l’amour de ma vie, donc j’ai décidé de décaler la période à 2012 pour en parler. En 2013, il y a React, Angular, Vue — je vous en ai mis trois, mais il y en a eu plein d’autres, dont certains sont morts, et il y en a plein d’autres qui sont en train de popper, des méta-frameworks, Next, Remix… Bref, c’est pour ça que j’ai mis trois petits points, parce qu’on ne sait pas, peut-être qu’en ce moment même il y a un autre framework qui sort.

En 2014, on a HTML5, qui est mon amant, avec d’autres balises sémantiques : article, aside, header, section. Là, on peut faire du bon HTML sémantique, que les lecteurs d’écran comprennent, on peut éviter la soupe de div ou de span, c’est génial. Et on a la balise vidéo — pourquoi je parle de la balise vidéo ? Parce que je vous ai parlé de Flash tout à l’heure, j’aurais bien aimé faire tout un sujet dessus mais je ne peux pas. En gros, en 2015, YouTube, qui utilisait Flash en tant que player, lui dit « bye bye » et préfère utiliser la balise vidéo. Et ça, plus le refus d’Apple d’avoir Flash sur ses appareils, plus le fait que Flash soit un plugin qu’on télécharge sur son navigateur — ça a un peu tué le truc, ça a tué Flash.

Et en 2023 ?

Qu’est-ce qui se passe en 2023 ? Il se passe plein de choses, même en HTML et en CSS : on parle de CSS4, il y a des nouveautés — par exemple, la balise dialog : ça existait déjà, mais ce n’était pas implémenté dans les navigateurs, et maintenant elle a un bien meilleur support. Il y a des choses qui arrivent, des choses qui sont déjà arrivées récemment, et pour celles et ceux qui aiment l’intégration, je pense que certaines nouveautés CSS récentes ont changé la vie — je n’ai pas le temps de vous les expliquer, mais voilà.

Conclusion

Tout ça pour dire qu’en fait, je suis revenue brièvement sur 30 ans d’intégration, grosso modo, pour vous aider à mieux comprendre d’où on est parti, et donc mieux comprendre où on en est. Parce qu’il y a des choses qu’on refait, mais différemment : par exemple, jQuery a changé la vie de plein de gens, React a changé la vie de plein de gens — ça a changé la manière de coder pour plein de gens, mais juste à des époques différentes. On a eu les mêmes soucis de compatibilité navigateur : je vous ai montré la guerre IE contre Netscape, nous on se bat maintenant avec Safari, maintenant avec Firefox, et cetera. En fait, les problèmes se répètent, et les solutions proposées sont nouvelles et continuent d’évoluer.

Et même les langages comme HTML et CSS, dont les gens disent « oui, c’est facile, ça ne change pas, c’est plan-plan, c’est nul » — eh bien eux aussi continuent d’évoluer, et vont peut-être nous permettre, à terme, d’avoir moins de div sur nos pages, parce que moi je me bats pour ça, pour un web plus léger et accessible. Et ouais, j’aime bien l’intégration, donc je vous invite à vous replonger dans le HTML et le CSS, parce qu’il y a plein de nouveautés qui arrivent et qui vont vous chambouler la tête.

Voilà, merci.