Un site qui bouge sans s’alourdir

Presque tous les sites récents font apparaître leurs blocs en fondu quand on descend dans la page. L’effet est discret, il donne au visiteur le sentiment d’une lecture qui avance, et il se remarque surtout quand il manque. Ce qui se remarque moins, c’est ce qu’il coûte, et ce coût varie énormément selon la manière de faire.

Le prix d’un fondu

Pendant quinze ans, obtenir cet effet a demandé d’ajouter au site un outil supplémentaire, choisi dans un catalogue, à installer, à mettre à jour et à surveiller. Un outil de plusieurs dizaines de kilo-octets, c’est-à-dire plus lourd que le texte de la page, pour un fondu. Le visiteur le télécharge à chaque première visite, sur un téléphone parfois en bord de réseau. Le client, lui, le paie deux fois : à l’installation, puis à chaque mise à jour, tant que l’outil existe.

Cet outil a une autre faiblesse, moins visible. S’il tombe en panne, ou s’il cesse d’être maintenu par ceux qui l’ont écrit, il arrive que la page reste blanche. Le texte est là, mais il attend un signal qui ne vient pas. Nous avons vu des sites de petites entreprises rester vides pour cette seule raison, sans que personne dans la maison ne comprenne pourquoi.

Ce que les navigateurs savent faire seuls

Les navigateurs récents ont appris à faire ce fondu sans aide extérieure. Il suffit de déclarer, dans la mise en forme de la page, que tel bloc apparaît quand il entre dans la fenêtre. Rien à installer, rien à charger en plus, rien à surveiller. L’effet est aussi plus fluide, parce que le navigateur le traite lui-même, sans faire attendre le reste de la page.

Tout le monde n’a pas le navigateur le plus récent, et c’est là que la manière de faire compte. Notre règle tient en une phrase : la page sans le mouvement doit être une page finie. Un visiteur dont le navigateur ne sait pas faire l’effet voit simplement le texte à sa place, immédiatement, sans rien perdre. Écrire l’inverse, cacher le texte au départ pour le faire apparaître ensuite, revient à parier que l’effet fonctionnera chez tout le monde. Ceux chez qui il ne fonctionne pas se retrouvent devant une page blanche, et ils ne reviennent pas.

Le second garde-fou concerne les personnes sensibles au mouvement. Un effet d’apparition qui se déclenche à chaque défilement peut provoquer des nausées chez celles qui supportent mal les écrans qui bougent. Les appareils offrent un réglage pour demander moins de mouvement, et le respecter ne coûte presque rien. Sur ce site, dès que ce réglage est actif, tout s’arrête et la page s’affiche telle qu’elle sera lue. Ce n’est pas une politesse : c’est un critère d’accessibilité.

Une erreur de débutant, chez nous

En refaisant ce site avec cette méthode, nous avons commis une erreur que nous racontons parce qu’elle est instructive. Une illustration placée tout en haut de la page, déjà visible à l’ouverture, restait figée à moitié dessinée, quelle que soit la façon dont on faisait défiler.

L’explication est simple une fois trouvée. Un effet lié au défilement se règle sur la position de l’élément dans la fenêtre. Or l’illustration se trouvait déjà à mi-hauteur au chargement, donc l’effet la laissait à mi-parcours. Ce n’était pas une panne : le site faisait exactement ce que nous lui avions demandé. La règle qui en est sortie est de ne lier au défilement que ce qui se trouve réellement plus bas dans la page. Ce qui est visible d’emblée s’anime avec une durée et un délai, comme on l’a toujours fait.

Ce que cela change pour un client

Nous avons remplacé un outil d’apparition au défilement par quelques lignes de mise en forme d’à peine huit cents caractères. Ce site ne charge aujourd’hui aucun programme pour ses effets, et il bouge davantage qu’avant.

Pour un client, cela se traduit en trois avantages concrets. Le site est plus rapide, ce qui se mesure dans les outils que Google met à disposition. Il coûte moins cher à entretenir, puisqu’il n’y a pas d’outil supplémentaire à faire vieillir. Et il reste lisible dans tous les cas, y compris quand le navigateur du visiteur est ancien ou que ses réglages demandent le calme.

Le même souci de sobriété commande le passage d’une page à l’autre et la coupure des titres.

C’est le genre d’avancée que nous cherchons : pas celle qui permet de faire une chose de plus, celle qui permet d’en retirer une. Le résultat se regarde en direct : les univers visuels de la page style utilisent tous cette méthode, et la page des prix dit ce que coûte un site pensé ainsi.