Une page de listing qui déroule deux cents éléments sans s’arrêter
Tout afficher d’un coup, sur une page qui n’en finit plus
C’est le réglage par défaut de la plupart des listings : la page sort tout ce qu’elle a. Le visiteur arrive, fait défiler, et n’a aucun repère sur ce qui reste. Il ne sait pas s’il lui reste dix entrées ou cent quatre-vingts. La barre de défilement est le seul indice, et elle ne dit rien du contenu.
Sur mobile, l’écart se creuse encore : ce qui tenait sur deux écrans en bureau en occupe six sur un téléphone. Les éléments placés en bas de liste ne sont vus par personne, alors qu’ils sont publiés, indexés et parfaitement accessibles. Le contenu existe, il est simplement hors de portée du pouce.
Passer par la pagination, et perdre le fil à chaque clic
L’autre solution est celle que propose le site par défaut : découper en pages numérotées. Le visiteur clique sur « 2 », la page se recharge, le navigateur le repose en haut, et il doit redescendre là où il en était. S’il veut revenir à une entrée vue deux pages plus tôt, il refait le chemin en sens inverse. Sur une boutique, c’est la même mécanique qui sert à faire défiler un catalogue de plusieurs centaines de produits.
Le parcours se transforme alors en une suite d’allers-retours. Chaque clic est une rupture : la page disparaît, une autre arrive, et le fil de lecture recommence à zéro. Sur une galerie ou une liste de références que l’on parcourt en balayant, c’est le geste qui se perd.
Une liste sans fin se lit comme une page qui n’a pas de bas — Photo par Beyzanur K. via Pexels
Révéler les éléments par lots, au clic ou au défilement
Un bouton sous la liste, et rien d’autre à changer dans le site
Le principe est simple : la page n’affiche que les premières entrées, et un bouton apparaît sous la liste pour révéler les suivantes. Le visiteur reste à sa place, la liste s’allonge sous ses yeux, et il décide lui-même quand continuer. Ceux que les douze premières entrées suffisent à renseigner s’arrêtent là.
C’est ce que fait l’Extension WordPress « Lazy load » sur n’importe quelle liste du site : une galerie de médias, des articles de blog, un annuaire, un type de contenu créé sur mesure. Elle se règle en désignant le listing concerné, puis en choisissant combien d’entrées sont visibles au départ et par combien les suivantes arrivent. Le contenu n’est pas modifié, le thème non plus.
Le défilement continu est l’autre mode disponible : les entrées suivantes apparaissent d’elles-mêmes quand le visiteur atteint le bas de la liste, sans qu’il ait à cliquer. Autant de listings que nécessaire peuvent être réglés séparément, chacun avec son propre rythme.
Accorder le bouton au reste du site, sans écrire de CSS
Un bouton ajouté par un outil extérieur détonne presque toujours : ce n’est pas la bonne police, pas la bonne couleur, pas les bons angles. Son libellé, ses couleurs de fond et de texte, l’épaisseur et la couleur de sa bordure, l’arrondi de ses angles et sa couleur au survol se règlent depuis l’administration, avec un aperçu qui montre le résultat avant d’enregistrer.
L’animation d’apparition des nouvelles entrées se choisit de la même manière, entre un fondu, un glissement, un zoom, ou aucune animation du tout.
Pour cet usage, la formule Essentiel de l’Extension WordPress « Lazy load » couvre cet affichage d’une liste longue par lots : un nombre illimité de listings réglés séparément, le choix entre bouton et défilement continu, et l’apparence accordée au site. Précision utile pour ne pas se tromper d’attente : ce réglage porte sur le confort de lecture, pas sur la vitesse du site — les éléments sont déjà présents dans la page, ils sont simplement révélés au fur et à mesure.
Image à la une — Photo par Mikhail Nilov via Pexels