Sur téléphone, un tableau de mouvements de parc peut devenir illisible alors que toutes ses données sont exactes : un numéro se coupe, la colonne des modèles sort de l’écran, une date semble se rapporter à la mauvaise ligne. Adapter un site au mobile ne revient pas à réduire une page prévue pour ordinateur. Il faut que les informations restent liées entre elles, et que les commandes comme les images demeurent utilisables quand la place manque.
Le mobile change la manière de consulter un site de transport
Un lecteur peut chercher un article sur une ligne TCL dans un bus, à un arrêt ou chez lui. Sur téléphone, il veut souvent retrouver un renseignement précis : identifier un véhicule aperçu, vérifier la date d’une observation ou relire un passage sur une modification d’itinéraire. Il ne devrait avoir à zoomer ni à faire défiler horizontalement chaque paragraphe pour y parvenir.
La solution passe par une mise en page adaptative : les éléments se réorganisent selon la largeur disponible, au lieu d’être réduits tous ensemble. Sur petit écran, le texte peut occuper une seule colonne et la galerie passer sous l’article. Le menu, les légendes et les boutons ne doivent pas recouvrir ce qu’on est en train de lire.
Ce n’est pas qu’une question de confort. « Véhicule observé » et « véhicule affecté à une ligne » ne signifient pas la même chose. Si cette distinction se perd sur mobile, le lecteur peut tirer une conclusion erronée sur le parc TCL.
Donner la priorité au texte et aux repères
La largeur d’un écran mobile oblige à soigner ce qui apparaît d’abord. Dans une brève sur un autobus ou un trolleybus, le titre doit annoncer clairement le sujet et la date de publication rester visible. Si une information a été corrigée, il faut distinguer la date de mise à jour. Commande annoncée, livraison observée et mise en service sont trois étapes différentes : mieux vaut les nommer dans le texte que les signaler uniquement par une couleur.
Des paragraphes courts aident à lire, sans qu’il soit nécessaire d’isoler chaque phrase. Des sous-titres descriptifs permettent de séparer, par exemple, les caractéristiques d’un véhicule de son exploitation. Le lecteur retrouve ainsi plus vite ce qu’il cherche. Dans une fiche de parc, une liste peut rassembler les points à vérifier :
- le modèle et, si elle est connue, sa version exacte ;
- le numéro de parc, sans déduire une série entière d’une seule observation ;
- la date associée à l’information ;
- le degré de certitude d’une affectation ou d’un retrait.
La lisibilité dépend aussi de la taille des caractères et du contraste. Un texte gris clair sur fond blanc ou une légende minuscule reste difficile à déchiffrer, même sur une page parfaitement ajustée. Les liens dans le texte doivent pouvoir être repérés autrement que par leur seule couleur.
Une navigation qui laisse la place au contenu
Sur un site riche en archives, le menu ne peut pas prendre la moitié de l’écran. Les entrées principales — lignes, véhicules, actualités ou histoire, selon l’organisation du site — doivent porter des noms clairs. Un menu replié convient si son ouverture est facile à comprendre et si ses options restent accessibles au clavier.
La recherche interne peut être plus rapide qu’une succession de catégories pour retrouver « Cristalis » ou « C13 ». Encore faut-il que les résultats affichent des titres lisibles : tronquer les mots qui distinguent deux articles ne rend service à personne.
Tableaux, cartes et photos : éviter la perte d’information
Les tableaux sont souvent le point délicat d’un site de passionnés. Une liste de véhicules peut réunir modèle, numéro, état, dépôt et observations. Tasser les colonnes jusqu’à rendre les caractères illisibles ne règle rien. Si le tableau est court, chaque ligne peut devenir une fiche verticale sur mobile, avec ses libellés. S’il est long, un défilement horizontal clairement signalé peut mieux convenir, à condition que les en-têtes restent compréhensibles et que la première colonne ne disparaisse pas sans indication.
Tout dépend des données. Une chronologie de livraisons se lit parfois mieux en liste datée ; une comparaison technique entre modèles peut nécessiter un vrai tableau. Le test utile n’est pas seulement de voir si celui-ci « tient » à l’écran, mais de vérifier qu’on comprend toujours quelle cellule correspond à quel véhicule.
Les photos d’autobus, de trolleybus ou de maquettes posent une autre question. Un recadrage trop serré peut couper le détail qu’on voulait montrer : girouette, porte, perches ou livrée. Une version adaptée à l’écran peut s’afficher dans l’article, avec la possibilité d’ouvrir le cadrage complet. La légende précise ce que la photo documente, sans lui faire prouver plus qu’elle ne montre. Le texte alternatif décrit le contenu pertinent pour une personne qui ne voit pas l’image ; il ne remplace ni la légende ni une information sourcée.
Une carte interactive peut, elle aussi, compliquer la consultation si elle intercepte aussitôt les gestes utilisés pour faire défiler la page. Une description écrite du parcours, une liste des points concernés ou une carte consultable séparément garde l’information accessible lorsque l’interaction est difficile, indisponible ou trop lente.
Le tactile et l’accessibilité ne sont pas des options distinctes
Un lien facile à toucher aide également les personnes dont les gestes sont moins précis. Les commandes doivent être assez grandes et espacées pour éviter d’ouvrir l’article voisin. Dans un formulaire de recherche ou de contact, les champs ont besoin de libellés visibles : si le seul repère disparaît dès la saisie, on ne peut plus vérifier ce qu’on remplit.
La page doit rester utilisable sans geste complexe. Si un carrousel ne fonctionne qu’en glissant les photos, certains lecteurs resteront bloqués ; des boutons « précédent » et « suivant » clairement nommés leur donnent une autre possibilité. L’ordre de lecture compte aussi quand la mise en page change. Un encadré placé visuellement après un paragraphe ne devrait pas interrompre la lecture de son titre avec un lecteur d’écran.
Tourner le téléphone permet de repérer d’autres défauts. En mode paysage, pratique pour un tableau ou une photo, rien ne devrait disparaître ni imposer un zoom permanent. Il faut aussi laisser chacun agrandir le texte selon ses besoins.
La rapidité conditionne l’accès aux informations
Une page adaptée à l’écran peut rester pénible si plusieurs grandes photos se chargent avant le titre. Quand la connexion mobile varie, le texte et les renseignements essentiels doivent être consultables rapidement. Des images aux dimensions adaptées, des formats efficaces et le chargement différé des vues plus bas dans la page limitent l’attente sans supprimer les photographies utiles.
Il faut trouver le bon équilibre. Une compression excessive efface parfois les détails nécessaires pour comparer deux véhicules. À l’inverse, charger la photo d’origine en pleine résolution pour une simple vignette ralentit la page sans bénéfice immédiat. La vignette sert à parcourir l’article ; une image plus détaillée peut s’ouvrir à la demande.
Les éléments autour de l’article comptent également. Bandeaux, vidéos intégrées ou scripts de partage peuvent faire bouger le texte pendant la lecture. Si le lecteur vise un sous-titre et touche une autre commande parce que la page s’est déplacée, le chargement pose problème, même s’il se termine vite.
Tester avec de vrais contenus, pas seulement une page d’accueil
Une page d’accueil réussie ne dit pas grand-chose du comportement d’une fiche de véhicule ou d’un long article. Mieux vaut tester les cas difficiles : titre long, tableau chargé, plusieurs photos légendées, liste à puces et mise à jour ajoutée après publication. Un nom de modèle ou un numéro qui ne passe pas à la ligne peut suffire à créer un défilement horizontal sur toute la page.
- Ouvrir une page sur un écran étroit et vérifier que le corps du texte se lit sans défilement latéral.
- Parcourir le menu et les liens au toucher, puis au clavier, pour repérer les commandes difficiles à atteindre.
- Agrandir les caractères et vérifier que dates, légendes et notes restent associées au bon contenu.
- Tester une connexion ralentie et voir si le texte reste consultable avant la fin du chargement des images.
Le meilleur essai consiste à ouvrir sur téléphone l’article le plus dense en données et à retrouver une ligne précise de son tableau. S’il faut garder l’en-tête en mémoire tout en faisant défiler les colonnes, toutes les données sont peut-être affichées, mais leur présentation mobile reste à revoir.
