Une mise en scène, pas un modèle

Sur votre site, rien ne bouge sans raison.

Un client commande sur votre site à 11 h 40, il a faim, il clique vite : chaque plat qu'il ajoute saute dans le panier sous ses yeux, et le total suit au même instant. Il ne se demande jamais si son clic a compté : c'est ça, une animation utile.

Ce que ça change

Animations sur mesure, concrètement.

Le mouvement porte une information

Un chiffre qui finit de monter au moment où l'œil arrive dessus se retient. Une carte qui se retourne sur son prix évite au client de descendre le chercher plus bas. Un plateau qui se compose pièce par pièce montre ce qu'il contient avant que le client ait lu la liste. À l'inverse, un bloc qui entre en glissant depuis la gauche ne dit rien du tout : il retarde la lecture d'une demi-seconde, et il fatigue dès la quatrième fois. Je ne pose un mouvement que si je peux dire en une phrase ce qu'il fait comprendre.

Écrit à la main, pas installé

Les animations sont écrites en CSS, dans votre thème, à côté du reste de vos styles. Il n'y a aucune bibliothèque à télécharger : ni GSAP, ni AOS, ni le module d'effets d'un constructeur de pages, qui pèsent des dizaines de kilo-octets et qu'il faut charger avant que la première image apparaisse. Votre page ne réclame donc pas un fichier de plus au serveur. Et comme je n'anime que la position et l'opacité, le navigateur confie le travail à la carte graphique au lieu de remesurer la mise en page à chaque image.

Le réglage « réduire les animations » est respecté

Sur iPhone comme sur Android, un réglage d'accessibilité demande aux sites de bouger moins. Des gens le cochent parce que le mouvement leur donne mal au cœur, au sens propre : vertiges, nausée, migraine. Le navigateur transmet cette demande à la page, et mes animations ne se jouent pas. Ce qui compte, c'est ce qui reste : le plateau complet, le chiffre à sa valeur finale, le prix affiché. Aucune information n'est portée par le mouvement seul, sinon le couper reviendrait à cacher la moitié de la page.

La retenue fait partie du travail

Deux ou trois mouvements par page, rarement plus. Un site où chaque titre, chaque carte et chaque icône entre en glissant donne l'impression d'un modèle acheté, parce que c'est exactement ce que font les modèles achetés : ils appliquent le même effet à tout, sans savoir ce qu'il y a dedans. Le résultat se lit lentement et ressemble à quatre cents autres. Si vous me demandez d'en ajouter un quatrième au même endroit, je vous dirai non, et je vous dirai pourquoi.

Comment je m'y prends

Trois étapes, pas trente.

  1. 1

    Je repère les moments qui comptent

    Avant que je code quoi que ce soit, je regarde votre page avec vous et je cherche les deux ou trois endroits où le client hésite : le prix, ce que contient une formule, ce qui reste disponible. Ce sont ceux-là qui méritent un mouvement, et pas le bandeau du haut. Si je n'en trouve qu'un, je n'en fais qu'un, et la page s'en porte mieux.

  2. 2

    Je les écris dans votre thème

    Chaque mouvement est quelques lignes de CSS posées dans la feuille de style de votre site, commentées en français, avec l'état d'arrivée écrit noir sur blanc. Je vérifie les trois choses qui comptent avant de livrer : rien ne saute sous le doigt pendant le chargement, rien n'est lisible uniquement pendant le mouvement, et le réglage d'accessibilité coupe bien tout.

  3. 3

    Vous ajoutez du contenu, le mouvement suit

    Une photo envoyée depuis votre téléphone, une carte ajoutée dans votre back-office, un prix corrigé un dimanche soir : le nouveau contenu prend le comportement du bloc où il se range, sans que vous ayez un réglage à toucher ni un appel à me passer. C'est le propre d'une animation écrite dans le thème plutôt que posée à la main sur un élément.

Sur le bassin d'Arcachon

Je travaille là où vous travaillez.

Sur le bassin d'Arcachon, la question n'est pas de savoir si une animation est jolie, mais si elle tient sur le réseau que vos clients ont sous la main. En août, au Cap Ferret, la 4G tombe à un fil : une page qui doit d'abord télécharger une bibliothèque d'effets reste blanche pendant que le client retourne à la liste des résultats. Au port de Larros, à Gujan-Mestras, une cabane se choisit sur trois images et un prix, à midi moins vingt, sur un téléphone tenu d'une main : le mouvement doit aider à lire plus vite, pas à faire joli. À Arcachon, un commerce ouvert à l'année n'a pas la même page en février qu'en août, et l'effet qui mettait la terrasse en avant doit pouvoir se déplacer sur autre chose sans que vous me rappeliez. Et à Andernos-les-Bains, une bonne part des visiteurs sont des habitués qui reviennent vingt fois dans la saison sur la même page : un effet qui rejoue à chaque visite finit par agacer précisément ceux qui vous font vivre.

Animations sur mesure à Gujan-Mestras au Cap Ferret à Arcachon à Andernos-les-Bains

Questions fréquentes

Ce que vous me demandez sur les animations.

Ça ne va pas ralentir mon site ?

Non, et la raison est mécanique : il n'y a aucune bibliothèque à télécharger, tout tient dans la feuille de style que votre page charge déjà. Je n'anime que la position et l'opacité, les deux propriétés que le navigateur confie à la carte graphique sans remesurer la page. La réponse honnête est quand même qu'une animation peut ralentir un site : celles qui font changer la hauteur d'un bloc obligent le navigateur à tout recalculer à chaque image. Je ne m'en sers pas, et c'est une contrainte que je m'impose dès l'écriture.

J'aime bien quand ça bouge. Vous pouvez en mettre partout ?

Non, et c'est à peu près le seul endroit où je vous dirai franchement non. Un site où tout entre en glissant se lit plus lentement, agace sur téléphone, et se repère en trois secondes comme un modèle acheté. Deux ou trois mouvements bien placés se remarquent ; vingt ne se remarquent plus, ils gênent. Les endroits qui le méritent vraiment sont ceux où le client décide : une galerie qui s'ouvre sur une photo en grand, un prix qui se montre au bon moment.

Ma belle-sœur a mal au cœur devant les écrans. Elle pourra lire ma page ?

Oui. Son téléphone porte un réglage d'accessibilité qui demande aux sites de bouger moins, et votre page l'écoute : les mouvements ne se jouent pas. Tout ce qu'ils montraient reste affiché, et c'est la règle que je m'impose sur chaque animation : rien ne doit être visible uniquement pendant le mouvement. Elle voit le plateau complet, le chiffre à sa valeur finale et le prix, tout de suite, sans rien attendre.

Google n'aime pas les animations, il paraît ?

Ce que Google mesure, c'est le temps que met votre page à s'afficher, et le fait qu'elle ne saute pas sous le doigt au moment où le visiteur va toucher un bouton. Une animation qui décale le contenu pendant le chargement abîme cette deuxième mesure, et beaucoup de modules font exactement ça. Les miennes se jouent sur un contenu déjà à sa place, donc rien ne bouge sous le doigt. Elles n'améliorent pas votre classement pour autant : c'est le texte de vos pages qui travaille pour ça.

Si je change de prestataire un jour, elles restent ?

Oui. Ce sont quelques dizaines de lignes de CSS dans le fichier de style de votre thème, que vous possédez, sur votre hébergement. Pas d'abonnement à un service, pas de compte à fermer, pas d'accès à me redemander. Je les commente en français pour que le développeur suivant sache ce que chaque bloc fait avant d'y toucher. C'est aussi pour ça que je n'installe pas de module : un module, lui, s'arrête le jour où vous cessez de le payer.

Ça coûte combien en plus ?

Rien. Il n'y a ni supplément par effet, ni renouvellement annuel : les animations sont comprises dans la création, à partir de la formule Vitrine à 1 200 €. Si dans six mois vous voulez déplacer un mouvement sur une autre carte, ou en supprimer un dont vous vous êtes lassé, c'est la maintenance mensuelle qui s'en charge, sans devis à signer. Le seul coût réel, c'est le temps que je passe avec vous à décider où ils vont.

Et sur téléphone, c'est pareil ?

Presque. Les mouvements qui dépendent du survol de la souris n'existent pas au doigt : sur téléphone, ils se déclenchent quand le bloc arrive à l'écran, ou sur un appui, jamais autrement. Quelques effets sont volontairement raccourcis sur petit écran, parce qu'une carte qui se retourne sur trois cent vingt pixels a besoin d'un demi-tour plus rapide pour rester lisible. Le contenu, lui, est identique : je ne cache jamais une information sur téléphone pour gagner de la place.

Votre projet

Et si vous m'en parliez ?

Dites-moi comment vous travaillez aujourd'hui, je vous dis ce que ça donnerait sur votre site. Sans engagement, et je réponds moi-même.