Sur téléphone, une colonne trop étroite, un menu qui refuse de se fermer ou deux boutons collés l’un à l’autre peuvent suffire à rompre la lecture. Pour un site culturel, où l’on vient lire un poème, consulter la date d’une rencontre ou envoyer un texte, la version mobile doit préserver l’attention plutôt que la contrarier.
Commencer par consulter le site comme un lecteur
Avant toute modification, ouvrez les pages principales sur un téléphone réel, avec votre navigateur habituel et une connexion mobile ordinaire. Ne vous arrêtez pas à l’accueil : regardez aussi un article long, l’agenda, le formulaire de contact, la page d’inscription et, si elle existe, la boutique ou la page de dons.
Refaites les gestes d’un visiteur : augmentez la taille du texte, ouvrez le menu, lancez une recherche, descendez jusqu’aux commentaires, remplissez un champ, puis revenez en arrière. Les problèmes apparaissent vite. Un lien inactif, une image qui déborde, une fenêtre surgissante qui recouvre le texte ou un champ coupé méritent d’être corrigés avant une retouche purement décorative.
Établir une courte liste de vérification
- Le contenu utilise-t-il la largeur disponible sans provoquer de défilement horizontal ?
- Le texte courant reste-t-il lisible sans zoom ?
- Les liens et les boutons sont-ils suffisamment espacés pour être touchés sans erreur ?
- Le menu s’ouvre-t-il et se ferme-t-il facilement ?
- Les images, tableaux et vidéos restent-ils dans les limites de l’écran ?
- Les formulaires signalent-ils clairement les erreurs et les champs obligatoires ?
Reprenez cette vérification après une mise à jour du thème, l’ajout d’une extension ou la publication d’un nouveau format. Un seul bloc intégré peut fragiliser une page jusque-là bien adaptée.
Donner la priorité au texte et à la navigation
Sur mobile, la hiérarchie visuelle doit rester évidente : un titre repérable au premier regard, des intertitres qui accompagnent les textes longs, des paragraphes qui ne forment pas une masse compacte. Une police lisible, un interligne généreux et un contraste net entre le texte et le fond servent mieux la lecture qu’un effet graphique élaboré.
Évitez les textes intégrés à des images. Réduits à l’écran, ils deviennent flous, ne suivent pas les préférences de taille de police et se lisent mal avec les outils d’assistance. Une image peut accompagner une citation, l’affiche d’une lecture ou le titre d’un recueil, mais les informations essentielles doivent également être présentes en HTML.
Des menus courts et prévisibles
Le menu mobile n’a pas à reprendre toutes les rubriques du site. Conservez les accès les plus utiles : articles, agenda, auteurs ou autrices, présentation du projet et contact. Des sous-menus trop profonds fatiguent la consultation et dissimulent souvent des pages importantes.
Le bouton de menu doit être identifiable et indiquer clairement son état, ouvert ou fermé. Prévoyez une fermeture par un bouton explicite, plutôt que par un geste incertain sur l’écran. Si le menu recouvre la page, il doit aussi pouvoir être parcouru au clavier et ne pas bloquer les personnes qui utilisent des technologies d’assistance.
Prévoir des zones tactiles confortables
Sur ordinateur, un lien minuscule peut être sélectionné avec précision. Au doigt, il devient une source d’erreurs. Laissez de l’espace autour des éléments actionnables : boutons de formulaire, flèches de carrousel, icônes de partage, liens en liste ou choix de dates. Lorsqu’une action mérite d’être comprise sans deviner, préférez un libellé explicite — « S’inscrire à la lecture » plutôt qu’une icône seule.
Évitez de placer deux commandes importantes sans marge entre elles. Dans un formulaire, « envoyer » et « annuler » ne devraient jamais pouvoir être confondus. Pour un appel à l’action, la couleur ne suffit pas : le contraste, le contour et le libellé rendent ensemble le bouton reconnaissable.
Alléger les images sans appauvrir la page
Les photographies de lectures, de couvertures ou de carnets donnent une présence sensible à un site littéraire. Des fichiers trop lourds retardent toutefois leur affichage, et cette attente peut conduire à quitter la page avant même que le texte n’apparaisse. Redimensionnez les images à la taille réellement nécessaire avant de les téléverser, puis choisissez des formats récents lorsque votre système les accepte.
L’objectif est de conserver une image nette sans charger un fichier prévu pour un écran bien plus grand. Les visuels situés loin sous le premier écran peuvent être chargés au moment où le lecteur s’en approche, à condition de ne pas retarder une image indispensable au sens de la page. Pour approfondir l’équilibre entre performance et confort de lecture, notre article « Accélérer un site de poésie sans gêner la lecture » détaille les choix éditoriaux et techniques utiles.
Éviter les formats qui résistent à l’écran
Les tableaux posent souvent problème. Un programme de rencontres réparti sur plusieurs colonnes devient vite illisible sur téléphone. Avant d’en ajouter un, demandez-vous si une liste structurée serait plus claire : date, heure, lieu, intervenants, puis lien ou bouton. Si le tableau est indispensable, réduisez le nombre de colonnes et vérifiez qu’aucune information ne disparaît sur la droite.
Les contenus intégrés demandent la même attention. Vidéo, publication de réseau social, carte ou formulaire externe doivent s’adapter à la largeur du téléphone. Testez-les après publication : certains modules ajoutent leurs propres marges, fenêtres de consentement ou éléments fixes, parfois au point de recouvrir le contenu.
Soigner les formulaires et les inscriptions
Un formulaire efficace sur mobile demande peu d’efforts. Ne sollicitez que les informations nécessaires à une inscription, à une proposition de texte ou à une prise de contact. Chaque champ doit avoir une étiquette visible, placée à proximité ; un texte affiché seulement à l’intérieur du champ disparaît dès que la personne commence à répondre.
Choisissez le type de champ adapté : adresse e-mail pour l’e-mail, clavier numérique pour un numéro de téléphone, sélection de date lorsqu’une date est attendue. Les messages d’erreur doivent indiquer ce qu’il faut corriger sans effacer les informations déjà saisies. Un formulaire long se remplit plus facilement lorsqu’il est découpé en étapes courtes, avec une indication de progression fidèle à ce qui reste à faire.
Vérifier l’accessibilité en même temps que l’adaptation mobile
Un site agréable à consulter sur téléphone aide aussi les personnes qui agrandissent fortement le texte, utilisent le clavier, un lecteur d’écran ou consultent la page dans une lumière difficile. N’imposez pas une taille de texte fixe qui empêcherait le zoom. Gardez un contraste lisible, donnez des intitulés précis aux liens et rédigez des textes alternatifs utiles pour les images qui portent une information.
Cette vigilance compte particulièrement pour les annonces culturelles. L’horaire, l’adresse, les conditions d’accès, la langue d’une lecture, l’existence d’une traduction ou les modalités d’inscription ne doivent pas dépendre d’une couleur, d’une affiche ou d’un pictogramme. Toute information annoncée dans une image doit être reprise dans le texte voisin.
Tester au-delà de son propre appareil
Un téléphone récent et un réseau rapide ne reflètent pas tous les usages. Testez sur plusieurs tailles d’écran, faites défiler la page en portrait puis en paysage et demandez à une personne extérieure d’accomplir une action simple. Une hésitation révèle souvent une formulation ambiguë ou un élément trop discret.
Après chaque modification, vérifiez un parcours précis : depuis l’accueil sur téléphone, ouvrir le menu, trouver la prochaine rencontre, lire les informations pratiques, remplir le formulaire d’inscription et recevoir le message de confirmation. Si l’ensemble se fait sans zoom, sans défilement latéral ni appui accidentel, le site est réellement plus accueillant pour ses lecteurs et ses participants.