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.

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.

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.