Une bannière agréable à prévisualiser sur ordinateur ne fonctionne pas forcément sur mobile. L'adaptation mobile des images implique une série de points concrets à contrôler : le sujet est-il coupé, le texte reste-t-il lisible sur petit écran, le poids de l'image ralentit-il le chargement, le rendu est-il cohérent après remplacement dans l'administration. Ces éléments ont peu à voir avec l'esthétique ; il s'agit plutôt d'opérations à passer en revue avant publication.
Pourquoi le critère « c'est joli » ne suffit pas
Les proportions d'affichage entre un écran d'ordinateur et un écran de mobile sont très différentes. Une même bannière peut s'afficher entièrement sur un écran large, mais être rognée sur les côtés ou compressée sur un écran étroit. La version validée par le designer sur ordinateur et celle réellement vue par l'utilisateur sur mobile ne sont probablement pas la même image.
Plus problématique encore : les bannières contiennent souvent du texte et des boutons. Une taille de police qui semble correcte sur ordinateur peut devenir illisible sur mobile, ou couper une phrase de façon peu élégante à cause du retour à la ligne. Si l'on se fie uniquement à « l'aperçu de la page est-il joli », ces problèmes ne seront pas détectés avant la mise en ligne.
Le critère d'évaluation de l'adaptation mobile des images doit donc passer de « est-ce joli » à « les informations clés restent-elles complètes, lisibles et chargeables sur un écran étroit ».
Vérifier ces points d'affichage avant publication
Premièrement, la position du sujet. Prévisualisez la bannière à la largeur d'un mobile et assurez-vous que les éléments essentiels (personnes, produits, logo) ne sont pas coupés. Si le sujet est décentré, envisagez un nouveau recadrage ou recentrez-le.
Deuxièmement, le texte sur l'image. Si la bannière contient un message promotionnel, une date d'événement ou un libellé de bouton, vérifiez un par un qu'ils s'affichent entièrement à la largeur mobile, sans être tronqués ni coupés de façon illisible. Le texte faisant partie de l'image, il est moins facile à modifier que du texte HTML : mieux vaut donc en mettre moins que trop.
Troisièmement, la position des boutons et des liens. Certaines bannières intègrent des zones cliquables directement dans l'image. Après recadrage sur mobile, un bouton peut être coupé en deux et devenir inaccessible. Avant publication, testez réellement sur mobile pour confirmer que la zone cliquable est toujours présente.
Quatrièmement, la transition entre l'image et le fond. Si les bords de l'image ne correspondent pas à la couleur de fond de la page, des blocs de couleur ou des bordures blanches peuvent apparaître sur mobile, des problèmes parfois invisibles sur ordinateur.
Poids de l'image et chargement : à examiner aussi
L'environnement réseau mobile est bien plus complexe qu'une connexion haut débit de bureau. La bannière est souvent l'image la plus lourde de la page. Si son poids n'est pas maîtrisé, l'utilisateur peut voir un espace vide en attendant que l'image se charge.
La démarche est la suivante : exportez d'abord l'image à sa taille d'affichage réelle, sans utiliser une image surdimensionnée que l'on réduit. Exportez à une largeur proche de la largeur d'affichage, pour éviter que le mobile télécharge une image bien plus grande que l'écran. Côté format, les photos gagnent à être compressées dans un format plus léger ; les images avec transparence ou graphismes simples peuvent utiliser un format supportant la transparence. Le choix précis dépendra des outils et du support de votre administration.
Après l'export, jetez un œil à la taille du fichier. S'il est manifestement trop lourd, compressez-le à nouveau. Attention à ne pas rendre le texte flou lors de la compression, surtout s'il y a des petits caractères : une compression excessive nuit directement à la lisibilité.
Les étapes souvent oubliées lors du remplacement d'une bannière dans l'administration
Beaucoup de problèmes ne surviennent pas à l'étape de conception, mais lors du remplacement dans l'administration. L'opérateur reçoit la nouvelle image, la téléverse, enregistre, sans revenir vérifier sur mobile. Résultat : le site affiche encore l'ancienne image, ou la nouvelle est étirée.
Lors du remplacement, il est conseillé de suivre cet ordre : vérifier d'abord que les dimensions de la nouvelle image correspondent à celles exigées par l'administration ; après téléversement, ne pas se contenter de l'aperçu dans l'administration, mais ouvrir réellement la page publique sur mobile ; une fois l'affichage confirmé, vérifier que les liens de l'image sont toujours cliquables et que les adresses de redirection sont correctes ; enfin, vider le cache du navigateur ou tester sur un autre appareil pour éviter de voir une ancienne version en cache.
Si l'administration permet de définir des bannières différentes selon les appareils, vérifiez séparément quelle image s'affiche sur ordinateur et sur mobile, pour éviter qu'une grande image de bureau soit encore utilisée sur mobile.
Faire de la vérification une étape systématique
L'adaptation mobile des images repose souvent sur des vérifications improvisées, ce qui favorise les oublis. La méthode la plus fiable est d'en faire une étape fixe du processus de publication : après le téléversement de la bannière, ouvrir la page publique sur mobile et examiner successivement le sujet, le texte, les boutons, le poids et les liens. Ce n'est qu'après validation que la publication est considérée comme terminée.
Si l'équipe compte plusieurs opérateurs, ces points de contrôle peuvent être intégrés à une liste de publication : celui qui remplace vérifie. Ainsi, même en cas de changement de personne, on ne mettra pas en ligne simplement parce que « ça a l'air joli ».
La prochaine fois que vous remplacerez une bannière, ne vous précipitez pas pour juger de son esthétique : ouvrez d'abord la page sur mobile, passez en revue les points ci-dessus, puis décidez s'il faut ajuster.
