Les grands bouleversements numériques des années 2011-14

Les années entre 2011 et 2014 ont marqué une période bouleversante pour les concepteurs.trices web pour plusieurs facteurs, arrivés tous de façon plus ou moins concomitante. Comme gérante d’une agence web à ce moment particulier, j’ai subi les conséquences de ces changements sans forcément réfléchir à leur cause. Conséquences, d’ailleurs, qui demandaient une forte et rapide capacité d’adaptation – mais là dessus j’étais ultra-entraînée. 

Voici ces facteurs :

L’intégration web : l’impact de Bootstrap et l’émergence de la CSS3

En août 2011, Twitter place en opensource la bibliothèque Bootstrap, framework composé d’une feuille de style CSS et d’un fichier en javascript. Destiné aux intégrateur.trice.s, Bootstrap révolutionne (et uniformise) l’internet de plusieurs façons. 

Avec un simple branchement des sources Bootstrap au support numérique et des copiés-collés de bouts de codes depuis la documentation, les développeur.se.s pouvaient avoir rapidement des fonctionnalités complexes comme des diaporamas ou des pop-ups. Ces fonctionnalités étaient techniquement prêtes à l’emploi, il ne restait plus aux responsables éditoriaux qu’à les adapter au contenu du support numérique (site, application, etc).

Et c’est ainsi que fût né le métier du fullstack – métier qui fusionne deux spécialités : développement (backend) et intégration (frontend). Cela, car Bootstrap a permis aux développeur.euse.s backend de se passer d’une partie de l’intégration, celle-ci étant généreusement fournie et placée en libre service dans sa documentation.

Entre les nombreuses innovations proposées par Bootstrap, nous rencontrons les Glyphicons, dans sa version 3 de 2013.

Les Glyphicons étaient un set de 260 icônes relativement minimalistes qui réagissaient parfaitement au clic et au survol de la souris. Ceci car ils n’étaient pas des images, mais des caractères d’une police appelée « Glyphicons Halflings ». Si auparavant, les intégrateur.trice.s étaient contraint.e.s de créer plusieurs images – au minima une image normale et une autre pour les effets de bords comme le survol de la souris – à partir de l’arrivée des Glyphicons ces interactions se faisaient avec une ligne de code. Plus facile plus rapide.

Avec l’énorme popularité de Bootstrap, les sites ont été pris par les Glyphicons, les diapos, les “modals” (nouvelle terminologie employée par Bootstrap pour désigner les anciennes popups) et internet semblait un énorme Bootstrap, Glyphicons partout, mouvement partout…

Par conséquent, les images décoratives propres à la Skeuomorphie ont peu à peu laissé place aux icônes, annonçant ainsi l’arrivée du Flat Design. Cette école graphique, qui, entre autres, met fortement l’accent sur les icônes, a supplanté la Skeuomorphie à partir de 2011.

Concrètement, Bootstrap a eu plusieurs conséquences dans notre quotidien : 

1. Techniquement, Bootstrap nous permettait de travailler plus vite et je pouvais encore une fois me concentrer plus sur l’expérience utilisateur.trice et dans l’ergonomie que dans le code.
2. Bootstrap introduisait également les premières notions d’accessibilité numérique, car son code prenait en compte la lecture et l’interaction avec des lecteurs d’écran utilisés par les personnes non-voyantes notamment. Si au fil des ans, je suis devenue experte en accessibilité numérique, je peux dire que c’est ici que j’ai fait mes premiers pas. 

En mars 2011, le navigateur Internet Explorer 9 arrive sur le marché. L’événement intervient après une longue stagnation des navigateurs et notamment la présence encore significative du détestable Internet Explorer 6, un navigateur Microsoft peu réputé pour son respect envers le standard du web. Tout comme Firefox 3.6 et le dernier  arrivé – Chrome, Internet Explorer 9 présente une intégration partielle du langage HTML5 et CSS3. 

Même en version non complètement standard¹ et intégrés seulement partiellement dans ces nouveaux navigateurs, ces deux langages vont être largement déployés par les développeur.euses.s et auront un impact significatif dans la création des supports numériques. 

Déjà, la CSS3 permet techniquement au support numérique de se passer d’un grand nombre d’images (décoratives ou informatives) lourdes donc lentes, car ce langage intégre plus facilement les effets de bord (un changement de couleur au survol de la souris, par exemple) et des effets graphiques (un arrondi, une ligne..). Ainsi, avec la CSS3, le temps de chargement est considérablement réduit et l’interaction entre le site et l’utilisateur.trice est plus efficace – le site réagit plus rapidement à ses actions. Avec la CSS3, le skeuomorphique devient obsolète, par sa lourdeur technique et sa complexité cognitive. 

De son côté, la nouveauté de la version 5 du langage HTML est l’introduction d’un balisage sémantique qui permet de mieux structurer le contenu du site et améliorer sa compréhension par les moteurs de recherche (et par ruissellement pour les personnes utilisatrices des lecteurs d’écran). 

La gestion de projet et l’injonction de la vitesse

« Nous sommes au seuil d’une nouvelle phase de l’histoire des réseaux de télécommunications. », déclarait Jean-Ludovic Silicani, président de l’ARCEP², en juin 2011³ en se référant aux abonnements haut-débit et très-haut débit (dont la fibre) qui commençaient à être déployés partout en France – soit une progression de 71 % en un an.  À cette même période, la 4G arrive dans les réseaux mobiles⁴.

Mais contre toute attente, et malgré ces progrès techniques, le temps de chargement des supports numériques n’est pas impacté et ne s’améliore pas au fil du temps⁵. Néanmoins en 2011, sans avoir encore ce recul historique, nous, les concepteurs.trices, étions hanté.e.s par cette injonction de la vitesse de chargement et nous produisions des supports numériques avec l’objectif ultime d’attendre le temps de chargement le plus réduit possible. Comme cheffe de projet, je devais gérer pour la première fois une obsession grandissante de la vitesse : mes sites web étaient validés (ou pas) par le.a client.e, chronomètre à la main…Et des nouveaux outils vérificateurs de nos performances se popularisaient auprès de mes client.e.s – comme le Google Webmaster Tools, qui fît son apparition dans les forums de WebRankInfo à partir de 2009.

En 2011, en réaction aux pratiques de BlackHat qui menaçaient la qualité de l’indexation, Google sort de façon rapprochée les algorithmes nommés Panda (2011) et Penguin (2012) qui ont marqué l’histoire du référencement et modifié considérablement la création de contenus et la conception du code.  

Ces deux algorithmes se concentraient sur la qualité du contenu afin de contrer les pratiques de référencement abusives – les critères pour évaluer cette “qualité” étaient décrits en termes opaques : fiable, soigné, credible⁶. Globalement, Google annonçait que Panda et Penguin pénaliseraient les sites avec un contenu éditorial considéré de faible qualité, dupliqué ou peu pertinent selon ses propres critères. 

A ce moment, Google adopta la stratégie de l’opacité, ce qui signifie que depuis, il ne révèlera plus complètement les détails de son fonctionnement. Toute l’information sur l’indexation sera désormais officielle publiée dans son blog : on trouvera certaines informations sur les facteurs de classement des sites ainsi que les grandes lignes directrices pour les webmasters.  Ensemble, ces algorithmes ont changé 12% des résultats des recherches pour Panda et 3% pour Penguin⁷.

Dans la continuité de l’importance accordée à la vitesse, la rapidité de chargement du site est explicitement évoquée dans le blog officiel de Google le 9 avril 2010, en tant que critère d’indexation. L’article intitulé « Using site speed in web search ranking » expose les nouvelles règles : 

« (…)Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. (..) Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. »⁸

Penguin (2012) se concentrait principalement sur la qualité des liens et la lutte contre les tactiques de spam de liens – mais, depuis Panda, les esprits étaient marqués et on se disait qu’il fallait se tenir à carreau avec Google si on voulait continuer à exister dans le web.

Certains de client.e.s réagirent plus ou moins rapidement à cette époque, en particulier ceux et celles lié.e.s à la vente en ligne. Plusieurs de leurs équipes internes furent mobilisées d’urgence pour réécrire les descriptions des produits, car jusque là, ce contenu avait été joyeusement récupéré sur les sites des fournisseurs – depuis des fournisseurs inconnus de marques inconnues jusqu’à Apple, pour ceux et celles qui vendaient des iPhones et Macs – un copier-coller massif en toute impunité et qui, avant ces changements de cap, s’étaient déjà avérés gagnants.

Design for speed

Si, pendant mes 18 mois chez Microsoft, au sein du portail MSN, nous produisions des amusantes interfaces 100% flash, à partir de 2010, la fête était finie – nos flash sont devenus des puzzles. 

Dans une lettre publiée dans le blog d’Apple en 2010, Steve Jobs annonce : “Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.”⁹

A partir de ce moment, les produits Apple ne supporteront plus Flash. 

Cette lettre nous obligea à abandonner l’imitation de l’apparence et de la sensation des objets réels et pour adopter un design plus minimaliste et fonctionnel – à savoir, un design qui vise un appareil : l’iPhone. A cette époque Safari, le navigateur Apple, représentait 5.74% du marché français avec une progression de 114.5% dans les 2 années suivantes, il avait donc toute notre attention.

Survenus en un laps de temps très court (l’année 2011 étant particulièrement marquée) tous ces facteurs ont profondément bouleversé mon métier de conceptrice web à la tête d’une agence. Ils ont définitivement acté une réflexion sur la production numérique axée sur l’injonction de la vitesse – technique et cognitive – qui renforçait une approche rationnelle et industrielle : une production numérique prête-à-penser et dépourvue de prise de risque.

Responsable pour la conception de supports webmarketing notamment mais aussi de la conception de sites de A à Z, employant entre 2 et 3 prestataires et en contact étroit avec le.a client.e, j’ai dû revoir toute ma façon de créer et de déléguer.

La Skeuomorphie par exemple, école lente et complexe, axée davantage sur l’apparence et l’esthétique que sur la fonctionnalité et l’utilité, n’était plus adaptée à cette nouvelle injonction de vitesse et n’avait donc aucune chance de perdurer.

Et Bootstrap est devenu impératif. Du jour au lendemain, il s’est trouvé intégré par défaut dans les principaux CMS. Et il nous procurait de grands avantages commerciaux, car l’injonction de vitesse se répercutait ainsi sur les délais de réalisation, au détriment du sur-mesure.

Cette attaque massive des facteurs, apparemment purement technologiques et qui se convergeant tous vers une injonction de vitesse, était l’arbre qui cachait la forêt. Une plus profonde modification, plus idéologique et liée à une adaptation du numérique aux besoins et directives des nouveaux acteurs – les GAFAMs, était en cours. Ce qui semblait être principalement des évolutions technologiques dissimulait en réalité des transformations qui  servaient directement leurs intérêts économiques, ou du moins qui leur étaient favorables. 

Ces  facteurs n’étaient que des symptômes, la maladie était la consolidation du “marché de l’attention”, marché où le temps d’attention des utilisateur.trice.s devient un levier crucial pour accéder à la principale ressource commerciale des GAFAMs : les données personnelles. 

Camoufler les bouleversements de cette époque sous une apparence purement technique reviendrait à attribuer uniquement à cette même technique la capacité de façonner des récits et des modes de représentation, et à les stabiliser en les naturalisant. Encore une fois, les besoins des sujets ne sont pas entendus, leur capacité de re-signifier ces récits ignorée et les intentions des corporations vidées de leurs sens idéologiques et économiques.

Références