Expérimentons le web

99 pourcents

« Chargement en cours… »

Cette petite phrase a fait l’apologie du web en Flash d’hier, et elle fait aussi celle du web d’aujourd’hui et de demain. Oui, mesdames, messieurs, nous sommes ici pour parler de sites dits “à loading”, ou de sites expériences. Ces mêmes sites qui peuvent être encensés par une certaine partie de la communauté web, récompensés à coup d’Awwwards et FWA, et qui sont tout autant décriés par d’autres.

Nous allons essayer de démystifier ces sites en montrant leurs bons côtés, et en quoi ils poussent l’innovation dans le web.

Un site expérience ?

Comment peut-on définir un site expérience ? Je me place ici surtout du côté front, laissant de côté la partie serveur. Bien qu’elle soit importante, elle n’est pas ici le centre du sujet. (Et pour cause, il n’y a parfois même pas besoin de langage serveur). Ici, on parle d’expérience immersive, narrative, on parle de front-end, et assez souvent même de sites tout en JavaScript.

Comme tout projet web, ce type de site répond à un type de client, à une cible, avec des objectifs précis, avec son lot de challenges techniques et graphiques.

Des exemples

Ce type de site a pour but d’emmener l’utilisateur dans ce qu’il ne trouve justement pas dans un site portail. Prenons le domaine du luxe avec, par exemple, des vêtements. Partons du brief :

Nouvelle collection, automne/hiver 2013.
La cible ? Clients aisés, 30 ans et plus.
Les délais ? Court, il faut que tout soit prêt dans un mois.
L’objectif ? Promouvoir la collection en utilisant les moyens d’aujourd’hui pour sublimer la marque (INTERNET !).

Même si on passe par un média à travers lequel le luxe tend à se démocratiser pour s’adresser à un plus large public, il faut aussi savoir se démarquer et faire rêver. Bon, je suis développeur, pas commercial.

Mais l’attente est claire : un site portail, ce n’est pas ce qu’ils veulent. Il est même peut-être déjà en place pour présenter plus en détails leurs produits, et un simple encart sur la homepage ne fait franchement pas rêver les gens. Non, en terme de communication, de marketing, il faut un site dédié, avec à priori une attente graphique forte, dans lequel la marque met en avant le ou les produits d’une manière inédite, pour marquer les gens, susciter de l’émotion, se démarquer. Je peux citer par exemple les sites des collections 2013 de Wrangler, ou encore de Sonia Rykiel.

Prenons un autre domaine : le Cinéma. Concrètement, si on veut des informationss sur un film, il y a des sites spécialisés comme Allociné ou IMDb qui font très bien le boulot. Mais proposer un site commercial, à durée de vie limitée pour promouvoir le film, ça marque l’utilisateur, ça plante le décor et lui donne envie d’aller voir le film. On peut par exemple citer les sites Gravity ou de Casse-tête Chinois, qui le plonge dans l’univers de ces films, ou encore l’incroyable dernière réalisation de North Kingdom pour le film The Hobbit.

Le site de Gravity

Dans ce genre de cas, on propose un site expérience, avec du storytelling, de la mise en scène. On attend de mettre en valeur une marque, un film, une voiture, un parfum, avec très souvent des vidéos promotionnelles, des images fullscreen qui font 700 Ko. On veut de la fluidité, des animations smooth, des transitions, une interface qui défonce. On veut mettre en place un concept, avec une interactivité forte, de l’input/output. On partage, on tweete, pour une visibilité encore meilleure.

Alors oui, ce genre de site a des contraintes. Clairement, on vise en premier les nouveaux navigateurs pour leurs capacités et performances. Très souvent, ça doit passer ou être adapté sur tablette, et surtout celle à la pomme que j’affectionne du plus profond de mon coeur (ahem). Il faut aussi une version mobile dédiée. Des fois un soupçon d’API tierce corse le tout (celle de Facebook étant la plus sympa, comme tout le monde le sait, ahem). Et souvent, des délais très courts.

Bien sûr, dans le meilleur des cas, on a des mois et des mois de disponible pour la production, avec une armée de développeurs et de graphistes sur le projet. L’agence Unit9 a par exemple crée l’expérience Just a reflektor à l’occasion de la sortie du nouveau single d’Arcade Fire, qui a pris au total six mois de production.

Ceci dit, le manque de temps explique en partie le désarroi de certains, criant au scandale sur les réseaux sociaux. Si il y a du temps (et le budget), et que l’expérience le permet, le client demande à “downgrader” l’expérience pour quelque chose de plus simple sur les vieux Internet Explorer et consorts. Mais comme on le répète souvent, ça dépend… Et surtout, on se rappelle de la cible : qui, franchement, pense voir un site qui claque sur IE8 !? Il n’y a pas de WebGL, on oublie CSS3, ou on peut aussi penser à son moteur JavaScript assez lent et faible. Pour avoir l’expérience la plus riche possible, il n’y a pas trente-six solutions : il faut mettre à jour son navigateur. Des géants du web poussent à cette initiative, et dans le fond il faut le reconnaître, c’est une bonne chose. Qui peut défendre le bien fondé de ces vieux navigateurs ?

Des bons côtés !

Du côté développement, c’est aussi l’occasion de faire valoir les bonnes pratiques et standards. Même si souvent le site a une durée de vie très courte, ça n’empêche pas au contenu d’être sémantiquement correct, accessible sans JavaScript, avec un référencement optimal. Là aussi, l’objectif n’est pas de remplir toutes les conditions des référenciels Accessiweb ou WCAG, mais au moins d’assurer le minimum. De part l’exigence de qualité de ces sites, un bon nombre de bonnes pratiques est souvent utilisé pour réduire le nombre/poids des requêtes : concaténation des fichiers CSS/JS, minification, optimisation (Google Closure, Uglify…) sprites d’assets, icônes SVG (et je me place seulement côté front).

Côté JavaScript, c’est la chasse aux performances pour rendre le site fluide, et si possible, non-obstrusif (tout dépend de l’expérience et du contenu). Côté CSS c’est la même chose, autant du côté des animations que des sélecteurs.

La sémantique n’est pas oubliée, même si des fois (souvent), il y a peu de contenu.

Enfin, outre mettre en avant la marque, ce genre de projet met bien évidemment l’agence/studio en valeur, récompensé(e) par des Awwwards, FWA ou encore Lovies. C’est un cercle vertueux : des prix attirent des clients, qui attirent des bons projets, qui attirent des prix… Sans oublier des talents, développeurs, graphistes, motions, souvent venus du monde entier.

Pousser à l’innovation

Bien souvent, ce genre de sites repousse les limites du web, usant des dernières techniques découvertes, toujours à la recherche du 60fps, poussant à l’innovation, et sur plusieurs plans :

Sur un plan technique d’abord, où l’on est toujours défié sur les performances et la structure applicative en Javascript, les performances CSS, l’exploration de la balise canvas en 2D ou 3D, ou encore les différentes techniques d’animations…

Sur le plan graphique également, où les assets sont souvent finement travaillés et calés au pixel près, où les motion-designers se font plaisir avec des vidéos 3D, les graphistes travaillent en tandem avec les développeurs pour gérer animations et transitions…

On peut parler d’outils comme Adobe Edge Animate (encore en bêta mais prometteur), la suite createJS, ou des bibliothèques comme Three.js (canvas 3D) crée par Mr. Doob et utlisée sur ro.me, ou pixi.js (en canvas 2D) crée par la société Good Boy Digital et utilisé par exemple sur un des sites promotionnels McDonald’s. On peut parler des SASS, LESS, Typescript et autre Coffeescript, des moteurs de template comme Moustache, Handlebars ou Jade, des technologies comme Node JS couplées à des librairies comme Socket.io pour une expérience interactive optimale mobile et desktop. Bien sûr, les pré-processeurs CSS n’ont pas l’exclusivité des sites expériences, mais font aussi partie des bonnes pratiques mises en place en amont.

McDonald's

Un outil comme Grunt fait l’unanimité et s’impose comme un standard, faisant partie intégrante d’un workflow de plus en plus utilisé et approuvé.

Enfin pour finir, des frameworks comme Backbone (qui n’en est pas vraiment un) ou Angular sont de plus en plus utilisés pour leurs structures applicatives.

Des mauvais côtés aux mauvais élèves

Bien sûr, les sites expériences ont leur lots de mauvais côtés. Prenons le plus commun, le plus décrié, le plus abject aux yeux de certains : le poids.

Eh oui, il faut ce qu’il faut. Quand on veut jouer à un jeu en ligne en 3D, on sait qu’il y a des textures à loader, des assets, le moteur… Ici, c’est pareil. On est sur des sites expériences, des sites avec des médias lourds, donc oui, il y a du chargement, d’où ces fameux écrans. Des fois, il peut y avoir plusieurs requêtes, beaucoup de requêtes, dues aux médias… Mais ça, on ne peut pas vraiment y échapper.

Après c’est comme partout : certains ne minifient pas leurs fichiers JS, ou encore ne mettent pas en place de sprites. Pire, une sémantique bafouée, des CSS faits à l’arrache, des fichiers JS par milliers… On apprend tous, tout le temps, surtout dans ce domaine. Certains ont différents backgrounds, avec des forces et des faiblesses. Beaucoup, par exemple, se reconvertissent d’une carrière de Flasheur, spécialement avec ce genre de projets et dans ce genre d’agences. Alors oui, peut-être que la sémantique n’est pas là, mais les performances JS y sont. On apprend, on s’adapte, on s’améliore. Qui peut jeter la pierre, quand parfois on a juste à regarder le code JS de certains sites portails pour crier au scandale ?

On peut aussi parler du manque de temps (encore). C’est cruel, mais dans la précipitation, certains bons aspects sont négligés, voire jetés à la poubelle. Je ne pense pas qu’il y ait débat à faire dessus, on peut toujours se dire qu’il vaut mieux gérer ça en amont, mieux “éduquer” les clients ou arrêter de vendre trois semaines quand il faut trois mois. Je me place du côté des développeurs, derniers de la chaîne de production, qui trinquent souvent pour les autres ; il y a sans doute un travail à faire ici, c’est certain.

Il y a encore d’autres formes de vilenies, comme certains framework JS, pour ne pas le citer, Angular JS. Alors oui, pour monter une application JavaScript, interagir avec le DOM, c’est SU-PER. On jette un oeil au code HTML ?

<!doctype html>
<html ng-app>
<head>
	<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
	<script src="http://code.angularjs.org/1.2.0/angular-animate.min.js"></script>
</head>
<body>
	<div ng-init="friends = [
		{name:'John', age:25, gender:'boy'},
		{name:'Jessie', age:30, gender:'girl'},
		{name:'Johanna', age:28, gender:'girl'}
	]">
	I have {{friends.length}} friends. They are:
	<input type="search" ng-model="q" placeholder="filter friends..." />
	<ul>
		<li ng-repeat="friend in friends | filter:q">
			[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
		</li>
	</ul>
	</div>
</body>
</html>

Regardez ça. C’est ce qui est actuellement dans le code source. Outre le JavaScript dans le <head>, quid de l’accessibilité ? Du référencement ? On peut faire des snapshots du site, pour ensuite les donner à manger aux moteurs de recherche. On peut me répondre qu’on s’en fiche des moteurs de recherche, ou encore qu’au final le site n’est pas destiné à des lecteurs d’écrans. Mais nous faisons du web, et nous nous devons d’avoir un minimum de standards. De là à bafouer le code source comme ça, autant revenir à faire du flash, une version tablette et une version mobile. Ça coûte moins cher, moins de temps, et c’est tout aussi moche en terme de standards. Je dis oui aux sites expériences, mais non au massacre du code HTML.

Conclusion chargée

Voilà encore un sujet à troll pour enchanter vos soirées. On pourrait en parler des heures, citer des milliers d’exemples en critiquant tel ou tel aspect. Je n’expose ici que mon point de vue, simple retour d’expérience, mais j’espère avoir apporté un peu ma pierre à l’édifice. Ce que je pense, c’est que tout ça reste du web, et qu’il y a du bon à prendre partout. Prenons-nous les mains, faisons la farandole de l’amour, mettons des <li> dans des <ul> et tout le monde sera heureux.

15 commentaires sur cet article

  1. Florian, le vendredi 13 décembre 2013 à 10:26

    Salut,

    Merci pour cet article très intéressant. Toutefois il y a quelques points qui me font réagir.
    Le premier, lorsque tu dis :

    « Quand on veut jouer à un jeu en ligne en 3D, on sait qu’il y a des textures à loader, des assets, le moteur… Ici, c’est pareil. On est sur des sites expériences, des sites avec des médias lourds, donc oui, il y a du chargement, d’où ces fameux écrans »
    Si je prend l’exemple à la lettre, je suis pas d’accord sur le fait que « cela soit pareil ». Un jeu en ligne 3D, s’il est installé sur la machine, les ressources sont en local, donc pas de bande passante utilisée pour les ressources graphiques, et heureusement. Et même dans le cas d’un jeu web, je pense qu’en général l’utilisateur du jeu s’attend à du loading, alors qu’un internaute lambda aimera pas forcement ça sur un site internet (quand il découvre le site, il ne sait pas que c’est un site expérience avec des médias lourds).

    Secondement, pour la partie Angular (alors je ne suis pas un défenseur invétéré d’Angular ^^), je pense que le code peut souvent devenir plutôt lisible que dans ton exemple, si bien maîtrisé. Et avec des templates js un peu partout je ne suis pas sûr que la lisibilité soit meilleure, étant donné qu’ils ne sont pas forcement à leur place dans le DOM.
    D’ailleurs je ne sais pas ce que tu en penses mais personnellement j’aimerais bien qu’HTML évolue dans ce sens.
    Par contre en effet pour l’accessibilité c’est une horreur et c’est un vrai problème.

    Encore merci pour ton article :)

  2. Danetag, le vendredi 13 décembre 2013 à 10:44

    Salut Florian !

    Merci pour ton commentaire ! Pour ce qui est des jeux, je parle en effet des jeux « sur le web », donc ceux qui nécessitent forcément du loading. Bien sûr l’utilisateur s’y attendra plus, ceci dit, tu ne sais pas comment le client va communiquer sur son site « expérience », il peut tout a fait le présenter comme un site justement « expérience », « immersif ». Puis il peut aussi y avoir un splash screen, présentant l’expérience avec le tout non moins fameux bouton « Commencer ».

    Puis pour Angular, je ne me place ici que du côté purement HTML, qui à l’heure actuel est un scandale en terme d’accessibilité. Après pour la lisibilité du code, rien ne t’empêche d’utiliser en amont des moteurs de templates !

    Au plaisir :)

  3. lionelB, le vendredi 13 décembre 2013 à 11:17

    Merci pour ton retour.
    Plus qu’éduquer le client, je pense que notre rôle est de communiquer car les culture sont différentes.Notamment pour le luxe. Ces clients sont plus que tatillons sur des détails d’apparences, (c’est dans leur culture), quitte à mettre de coté les performances, l’accessibilité. A nous de réussir à trouver un compromis entre leur envies et leur concrétisation mais c’est pas toujours évident quand on est au bout de la chaîne et qu’on ne voit pas le client :(

  4. Julien, le vendredi 13 décembre 2013 à 13:44

    Pour rebondir sur le commentaire de Florian et des jeux 3D, la bande passante n’est pas la même mais elle existe : le passage des textures du disque dur au gpu est *presque* immédiat mais pas complètement.

    En tout cas, Merci pour ton article. Rare sont les gens qui respectent encore la sémantique et le poids des balises dans l’html — la tendance est au templating côté client au prix de lu référencement.

  5. dav, le samedi 14 décembre 2013 à 11:37

    Article très sympa.

    Pour la critique d’AngularJS, que je n’utilise pas au profit de Backbone.js, je le vois plus comme un framework de développement applicatif et non de site web

    Et dans cette optique j’ai du mal à comprendre ton attachement à produire un code lisible pour les moteurs de recherche.

    J’ai développé pendant de nombreuses années avec Flex (ex Adobe) des applications internes, pour moi AngularJS s’inscrit dans le même usage.

  6. Danetag, le dimanche 15 décembre 2013 à 02:54

    Salut dav !

    Et là est bien ma critique : je suis tout à fait de ton avis, Angular est un grand outil pour des applications JS. Une application de mail par exemple, serait parfaite. Ma critique ici, c’est bien que cet outil est utilisé pour faire du web !

  7. Turboconnard, le mardi 25 mars 2014 à 10:46

    Haaaaaa alors ! vaste sujet ! gros trolls en perspective et je vais pas m’en priver !

    Ya quelques jours j’ai twitté un truc du genre « super les nouveaux sites webgl, css3 qui marchent sur encore moins de plateformes que flash » et ça y est, il semblerait qu’on y arrive. « MA » prophétie est en train de se produire. Il est en train de se passer avec l’html et le js exactement ce qui s’est déjà passé avec Flash : On lui en demande trop alors qu’il est pas prêt. Aujourdh’ui Flash est prêt mais plus personne n’en veut c’est balo. On pourrait faire tourner quake sur 90% des pc du monde mais « on » préfère l’abandonner faire tourner ce même quake sur 4% des navigateurs.
    Ya pas longtemps on nous demandait de faire tourner des vidéos hd sur des cubes dans un monde en 3D dans flash alors que tout était en sofwtare… ben oui forcément, ça ramait. Parce qu’on avait atteind les limites depuis longtemps.

    ET la paf ! on nous dit « non mais le js / html/css c’est sensass, c’est vachement plus puissant qu’avant et vous allez voir en plus ça marche partout » le fameux flash killer ! Chanmax ! quel aubaine, oublions ce logiciel propriétaire (beurk beurk) de cette société capitaliste d’adobe (beurk beurk beurk) qui nous écoute pas (beurk beurk) et tournons nous vers cette « super techno ouverte/open source (révolutionnaire ?) poussée par l’élite Apple (miam miam miam) que tous les décideurs (marques, agences, gens cools, etc… ) adorent ! Allons‑y !

    Et il se passe la même chose, « ha bon ? l’effet 3D la, il marchera pas sur mobile ? », « comment ça pas des particules ? », « ha mais ce shader il marche pas sous firefox », « ha merde l’exception de sécurité sur la vidéo… », « putain relou sur l’ipad je suis à 7fps alors que nexus 7 ça tourne à 60 », « ha merde l’autoplay interdit sur ios », « ha mais on m’avait dit que ça marche partout » etc… du coups nos chers décideurs ils nous disent « non mais en fait on s’en fout on va le faire bien marcher sur chrome et on mettra un message comme quoi faut mettre à jour son navigateur, tu comprends c’est une expérience faite pour les gens du métiers (occidentaux riches qu’on des ordinateurs puissants et on s’en branle de madame Michu en correze), j’veux dire on s’en branle non ? un mec qu’a pas un imac tout neuf de toute façon il achète pas du luxe… ou alors au choix : « non mais en fait, tous les truc CSS3 de toute façon on va les refaire en js pour IE8 »

    Bref, tout ça pour dire que que c’est du gros bullshit, que rien est prêt en html5/CSS3/vidéo etc… La logique principale vous la connaissez bien elle a rien à voir avec l’accessibilité et le cross plateforme, cross device ou quoi, c’était une aubaine pour aller revendre du site, et ce faire mousser entre agences / décideurs a qui aurait la plus grosse et belle sur son ipad tout neuf ;)
    Mais c’est trop tard les gars ;) vous avez tué la poule au oeufs d’or ! Flash était fait pour ça, pour ces sites « expériences » y’avait tout ce qu’il faut : vidéo, son, 3D, net, socket, un VRAI langage, etc… »

    Du coup maintenant les agences font 3 sites au lieu d’un et 90% des gens voient le plus moches des 3 ;)

  8. Gounzor, le mardi 25 mars 2014 à 11:09

    +1 turboconnard, je suis tellement véner de voir comme le web est devenu pauvre et lent (perfs et chargements) depuis 3 ou 4 années.

    On a fait un bond en arrière de 10 ans dans l’expérience utilisateurs.

  9. non, le mardi 25 mars 2014 à 12:15

    « E‑justicier Turboconnard ».

  10. Yamo, le mardi 25 mars 2014 à 12:17

    Sans surprise, totalement d’accord avec Turboconnard.
    Au niveau créatif, le webdesign a tout simplement fait un bon de 10 ans en arrière depuis l’abandon de Flash, mais bon faut pas le dire…

  11. non, le mardi 25 mars 2014 à 12:19

    Et pas un mot de greensock dans le tas. Merci.

  12. Danetag, le mardi 25 mars 2014 à 13:53

    @non Hum my bad, je l’utilise plus qu’il n’en faut pourtant. ;)

  13. Jérémie, le mardi 25 mars 2014 à 16:27

    Je suis tellement d’accord… J’ai commencé il y a deux ans et mon premier amour a été flash et l’as3. On pouvait y faire tellement ! J’avais de beaux sites fullFlash avec des navigations expérimentales et des univers bien a eux. Mais on m’a dit « flash c’est mort ».. Alors maintenant je galere Avec mon JS et mes compatibilités entre navigateur et supports…

  14. Colir, le vendredi 28 mars 2014 à 10:14

    Je taime Turboconnard !!!

  15. Turboconnard, le vendredi 28 mars 2014 à 10:55

    moi aussi je t’aime Colir