La barre flottante sur mobile : l'écoute qui ne s'arrête pas quand on descend
Sur un article long lu au téléphone, le lecteur audio disparaît en haut de page dès qu'on fait défiler, et l'auditeur doit remonter pour mettre en pause. La barre flottante corrige ça. Voici son comportement réel sur mobile, décrit à partir de ce qui est vraiment implémenté, y compris ses limites.
Un lecteur audio est posé en tête d'article. L'auditeur lance l'écoute, puis fait défiler pour lire en même temps. Au bout de deux paragraphes, le lecteur est sorti de l'écran par le haut. S'il veut mettre en pause, revenir en arrière, ou juste voir où il en est, il doit remonter toute la page. Sur mobile, où les articles sont longs et le pouce fait défiler vite, ce petit aller-retour suffit à faire abandonner. La barre flottante existe pour ça, et une seule chose : garder le lecteur à portée quand on descend dans le texte.
Ce qu'elle fait, vu du visiteur
Le principe est facile à décrire. Tant que le lecteur est visible en haut de l'article, rien ne bouge : c'est une barre ordinaire, dans le flux de la page. Au moment où sa place sort de l'écran par le haut, il se décolle et vient se caler en bas de la fenêtre, réduit en pastille : plus petit, plus rond, avec une ombre portée plus franche pour qu'il se détache de l'article au lieu de s'y fondre. Le libellé de l'article disparaît, parce qu'à ce moment-là on sait déjà ce qu'on écoute. Quand on remonte et que la place d'origine revient dans le champ, la pastille redescend s'y reposer, et redevient la barre.
L'auditeur garde donc en permanence le bouton de lecture et la progression sous les yeux, sans jamais quitter le paragraphe qu'il est en train de lire. C'est exactement le comportement des sites d'actualité d'où vient la demande.
Le point technique, dit sans le cacher
Il y a une vérité qu'il vaut mieux poser franchement, parce qu'elle explique une partie du comportement. Le lecteur est servi dans une iframe, et une position fixe à l'intérieur d'une iframe se cale sur l'iframe, pas sur la fenêtre du téléphone. Le lecteur ne peut donc pas se décoller tout seul. C'est la page hôte qui le fait, à sa demande : notre script d'intégration surveille le défilement, et quand la place du lecteur passe le haut de l'écran, c'est lui qui fixe la barre en bas de la fenêtre, centrée, à douze pixels des bords et quatorze du bas. Le lecteur, de son côté, ne fait que porter l'apparence des deux états, posé et décollé.
La conséquence honnête : sans page hôte coopérante, il n'y a pas de flottement. Sur un site où seul le lecteur est intégré mais pas le script qui gère le défilement, la barre flottante reste une barre. Elle ne casse rien, elle ne flotte simplement pas. C'est le même principe de repli que pour les autres modèles, que nous détaillons dans quel gabarit de lecteur pour votre blog : un lecteur qui ne peut pas faire mieux fait la barre, jamais rien de cassé.
Les détails qui comptent sur un téléphone
Plusieurs choix ne se voient que sur mobile, et chacun répond à un défaut constaté sur un vrai téléphone.
Le décollement ne s'arme pas au chargement de la page, mais au premier défilement. La raison est concrète : au chargement, l'iframe n'est pas toujours posée, son rectangle vaut zéro, et une barre pouvait alors se croire déjà sortie de l'écran et se coller en bas avant que personne n'ait défilé, laissant un grand vide à la place de l'article. Attendre le premier geste de défilement supprime ce faux départ.
Quand la barre se décolle, une cale invisible prend sa hauteur dans le flux de l'article. Sans elle, le texte sursauterait au moment du décollement, la page rétrécirait, et le lecteur redescendrait aussitôt puisque sa place serait revenue dans le champ. La cale garde la mise en page stable.
La barre flottante porte une croix : l'auditeur qui ne la veut pas la ferme d'un geste, pour l'article en cours. Rien n'est mémorisé, donc fermer la barre sur un article ne prive pas l'auditeur de l'article suivant. Et il suffit de remonter sur le lecteur pour la réarmer. Enfin, sous 460 pixels de large, le libellé se masque pour ne pas pousser la durée sur le bouton de vitesse, et le mouvement de décollement est supprimé pour qui a demandé un affichage sans animation dans les réglages de son système.
Quand la choisir, et comment
La barre flottante est faite pour les articles longs, ceux qu'on lit en écoutant sur plusieurs écrans de défilement. Sur une brève de trois paragraphes, elle n'apporte rien : le lecteur ne sort jamais du champ. Sur un dossier de huit minutes lu au téléphone, elle change l'expérience.
Le réglage se fait dans votre espace client, et il vaut aussi comme option sur les autres gabarits, sous le nom de lecteur toujours visible. Pour l'essayer sur un article sans rien enregistrer, un paramètre d'adresse suffit à forcer le comportement le temps d'un test. La fiche du lecteur audio montre les modèles en situation, et notre page WordPress décrit comment le script d'intégration se pose sur un site, puisque c'est lui qui rend le flottement possible. Là est le seul prérequis réel : le lecteur seul ne suffit pas, il faut la page hôte avec lui.
Sonorisez vos articles avec WeDispatch
Ce blog sera lui-même sonorisé par WeDispatch. Envie de voir ce que ça donne sur vos contenus ?
Demandez une démo