Signature mail responsive : comment la rendre lisible sur mobile ?
Une signature soignée sur ordinateur peut devenir illisible sur un téléphone. Ce guide donne les règles de mise en page, d'images et de liens qui tiennent sur mobile, puis la façon de tester le rendu avant de déployer.
Par L'équipe Brandesk 5 min de lecture
Sommaire
Une signature mail responsive reste lisible sur un téléphone sans que le destinataire ait à zoomer. Pour y arriver, gardez une mise en page simple en tableaux, une largeur de 600 px au plus, des images légères aux dimensions fixées et des coordonnées cliquables. Testez ensuite le rendu dans les applications mobiles que vos contacts utilisent vraiment.
Pourquoi penser la signature pour le mobile
Une bonne partie de vos e-mails est lue sur un téléphone. Un client consulte sa messagerie entre deux rendez-vous, un candidat lit votre réponse dans les transports, un fournisseur vérifie un devis depuis un chantier.
Sur un écran étroit, une signature conçue uniquement pour l'ordinateur pose vite problème. Le texte devient minuscule, le logo déborde, les colonnes se chevauchent ou la signature prend plus de place que le message lui-même.
Une signature illisible sur mobile donne une mauvaise image, même si elle est parfaite sur ordinateur. Elle fait aussi perdre des contacts : un numéro qu'on ne peut pas toucher pour appeler est un numéro qu'on n'appelle pas.
Les règles de mise en page qui tiennent sur un petit écran
Les messageries n'affichent pas le HTML comme un navigateur. Beaucoup ignorent une partie du code moderne. La règle de base est donc la sobriété.
- Construisez la signature en tableaux, avec des styles en ligne. C'est la méthode la plus fiable pour les e-mails. Les feuilles de style externes et une partie des styles placés dans l'en-tête sont ignorées par certaines messageries.
- Limitez la largeur à 600 px. Au-delà, la signature risque de déborder ou d'être réduite sur un téléphone.
- Préférez une seule colonne. Une mise en page en deux colonnes, avec la photo à gauche et le texte à droite, passe souvent bien. Au-delà, le rendu devient fragile sur un écran étroit.
- Gardez une taille de texte confortable. Un texte trop petit sur ordinateur devient illisible sur mobile, surtout si l'application réduit l'ensemble pour le faire tenir.
- Choisissez une police courante. Arial, Helvetica, Verdana ou Georgia sont présentes presque partout. Une police web personnalisée sera souvent remplacée.
Point de vigilance : ne comptez pas sur les requêtes média pour adapter la signature à l'écran. Elles ne sont pas prises en charge par toutes les messageries. Une signature simple qui fonctionne sans elles reste le choix le plus sûr.
Pour fixer ces règles une fois pour toute l'entreprise, notre guide sur la charte graphique de signature e-mail détaille ce qu'il faut écrire.
Des images adaptées au téléphone
Le logo, la photo, les icônes de réseaux sociaux et la bannière sont les éléments qui posent le plus de problèmes sur mobile.
Hébergez les images en ligne
Les images doivent être hébergées sur un serveur en HTTPS et appelées par un lien. Une image collée dans la signature ou intégrée dans le code devient souvent une pièce jointe, ou n'apparaît pas du tout chez le destinataire.
Fixez les dimensions
Indiquez la largeur et la hauteur de chaque image dans le code. Sans ces valeurs, certaines applications affichent l'image à sa taille réelle et cassent la mise en page.
Pensez aux écrans haute densité
Les écrans des téléphones affichent beaucoup de pixels sur une petite surface. Une image préparée au double de sa taille d'affichage, puis réduite par le code, reste nette. Gardez tout de même un fichier léger, car chaque image est chargée à l'ouverture du message.
Gardez une bannière raisonnable
Une bannière de campagne doit rester lisible une fois réduite à la largeur d'un téléphone. Évitez les longs textes dans l'image : ce qui est lisible à 600 px peut devenir illisible sur un petit écran.
Coordonnées cliquables et mode sombre
Sur mobile, le destinataire utilise ses doigts, pas une souris. La signature doit en tenir compte.
Rendez les coordonnées actives. Un numéro de téléphone avec un lien d'appel lance l'appel d'un simple toucher. Une adresse e-mail avec un lien d'envoi ouvre un nouveau message. Un lien vers votre site ou vers la carte de visite digitale du collaborateur permet d'aller plus loin.
Espacez les liens. Des icônes de réseaux sociaux collées les unes aux autres sont difficiles à toucher sans erreur. Laissez un espace entre elles et gardez une taille suffisante.
Vérifiez le mode sombre. Beaucoup d'utilisateurs lisent leurs e-mails en mode sombre sur leur téléphone. Certaines applications inversent alors les couleurs du texte et du fond. Un logo sombre sur fond transparent peut disparaître sur un fond noir. Prévoyez une version du logo avec un fond clair ou un léger contour, et contrôlez le résultat.
Ce qui se passe dans les applications mobiles
Le rendu dépend aussi de l'application utilisée pour écrire l'e-mail. Une signature parfaite dans Gmail sur ordinateur n'est pas forcément celle qui part depuis le téléphone du collaborateur.
Gmail sur iPhone et Android
L'application Gmail propose une signature mobile, en texte simple, réglée compte par compte. Si ce champ reste vide, Gmail utilise la signature créée sur ordinateur, avec ses images et sa mise en forme. Demandez à vos équipes de laisser la signature mobile vide pour que la signature de l'entreprise s'applique aussi depuis le téléphone.
Outlook sur iPhone et Android
L'application Outlook a sa propre signature, réglée dans ses paramètres. Par défaut, elle peut afficher une mention générique à la place de votre signature. Si vos signatures sont déployées par un complément Outlook, vérifiez qu'il est bien pris en charge sur iOS et Android.
Mail sur iPhone
L'application Mail d'Apple utilise une signature réglée dans les paramètres de l'iPhone, avec une mise en forme très limitée. Elle ne reprend pas la signature HTML de l'entreprise.
Exemple : un commercial envoie un devis depuis son téléphone, dans l'application Mail. Le client reçoit un message signé « Envoyé de mon iPhone », sans logo ni coordonnées. Mieux vaut équiper les collaborateurs d'une application qui reprend la signature de l'entreprise.
Comment tester avant de déployer
Un test rapide évite de découvrir un problème chez un client. Avant de déployer une nouvelle signature :
- Envoyez un e-mail de test à plusieurs adresses, dont une Gmail et une Outlook.
- Ouvrez-le sur un iPhone et sur un Android, dans les applications Gmail, Outlook et Mail.
- Activez le mode sombre et vérifiez que le logo et le texte restent visibles.
- Touchez chaque lien : téléphone, e-mail, site, réseaux sociaux, bannière.
- Répondez au message pour voir comment la signature se comporte dans un fil de discussion.
Si vos signatures sont gérées dans Gmail pour toute l'entreprise, notre guide sur la signature Gmail avec logo explique aussi comment éviter les logos qui ne s'affichent pas.
En résumé
Une signature mail responsive repose sur une mise en page simple en tableaux, une largeur de 600 px au plus et une police courante. Les images sont hébergées en HTTPS, avec des dimensions fixées, et les coordonnées sont cliquables. Testez le rendu dans Gmail, Outlook et Mail sur téléphone, en mode clair comme en mode sombre. Brandesk produit ainsi des signatures dans un HTML conçu pour l'e-mail, avec un aperçu sur mobile et en mode sombre avant leur déploiement.
