Signature email HTML : garantir un affichage identique dans Outlook, Gmail et Apple Mail
Pourquoi une signature email s’affiche différemment selon le client mail, et les règles HTML qui garantissent un rendu fiable dans Outlook, Gmail et Apple Mail.
L’équipe Soniako Publié le 4 min de lecture
Vous concevez une signature impeccable, vous l’envoyez à un collègue… et elle arrive déformée : espacements doublés, logo géant, police remplacée. Ce n’est pas un bug de votre signature, c’est la réalité de l’email : chaque client mail interprète le HTML à sa façon. Voici pourquoi, et comment écrire une signature qui résiste à tous.
Pourquoi le rendu varie autant
Un navigateur web moderne suit des standards communs. Les clients mail, eux, reposent sur des moteurs de rendu très différents :
- Outlook pour Windows (version classique) utilise le moteur de rendu de Microsoft Word, pas celui d’un navigateur. Il ignore une partie importante du CSS moderne : marges sur certains éléments,
max-width,background-imageen CSS,border-radius… - Gmail réécrit le HTML reçu, supprime certains attributs et limite le CSS pris en charge. Son éditeur de signature nettoie aussi une partie du code collé.
- Apple Mail et Outlook sur Mac s’appuient sur WebKit, beaucoup plus permissif.
- Les applications mobiles ajoutent leurs propres règles : redimensionnement automatique, mode sombre, polices système.
Une signature qui fonctionne partout doit donc viser le plus petit dénominateur commun.
Les règles d’or du HTML de signature
1. Des tableaux pour la mise en page
Pas de flexbox, pas de grid, pas de float. La mise en page d’une signature fiable se construit avec des <table>, <tr> et <td>. C’est ancien, mais c’est ce qu’Outlook comprend.
2. Du CSS en ligne
Les styles doivent être écrits directement sur chaque élément (style="color:#181b30;font-size:14px"), pas dans une balise <style> en tête de document, qui peut être supprimée ou ignorée.
3. Des polices sûres, avec repli
font-family: Arial, Helvetica, sans-serif;Les polices web (Google Fonts, polices de marque) ne sont chargées que par une minorité de clients. Ailleurs, la pile de repli prend le relais.
4. Des dimensions explicites pour les images
Utilisez les attributs HTML width et height en plus du CSS. Outlook pour Windows ignore souvent les tailles CSS et affiche l’image à sa taille réelle — d’où les logos géants. Voir nos règles pour les images.
5. Des couleurs en hexadécimal complet
#3b40e6 plutôt que #34e ou des variables CSS. Évitez aussi les couleurs en rgba pour les éléments importants.
6. Des espacements avec padding sur les cellules
Les marges (margin) sont interprétées de façon inégale. Le padding sur les <td> est beaucoup plus fiable.
7. Pas de JavaScript, pas de formulaires, pas de vidéo
Ils sont supprimés par tous les clients mail. Pour une vidéo, utilisez une image cliquable qui renvoie vers la vidéo.
8. Des boutons « à l’épreuve des balles »
Un bouton construit avec une cellule de tableau colorée et un lien à l’intérieur s’affiche partout. Un bouton en border-radius pur CSS sera carré dans Outlook pour Windows — ce qui reste acceptable si le design le prévoit.
Le piège du copier-coller
La méthode la plus courante pour installer une signature — la concevoir dans un outil, puis la copier-coller dans Outlook ou Gmail — est aussi la plus fragile. Le presse-papiers transforme le HTML, l’éditeur de signature le nettoie à nouveau, et le résultat diffère d’un poste à l’autre.
C’est l’une des raisons pour lesquelles un déploiement centralisé est plus fiable : la signature est compilée côté serveur une fois, avec un HTML maîtrisé, puis installée directement — dans Gmail via l’API, dans Outlook via un complément. Voir nos guides Gmail et Outlook.
Tester avant de déployer
Avant de généraliser une signature, testez-la au minimum sur :
- Outlook pour Windows (version classique)
- Le nouvel Outlook / Outlook sur le web
- Gmail sur navigateur
- Gmail et Outlook sur iOS et Android
- Apple Mail
- Le mode sombre d’au moins deux de ces clients
Vérifiez à chaque fois : la mise en page, la taille des images, la police, les liens, et la lisibilité en mode sombre et sur mobile.
Récapitulatif technique
| À faire | À éviter |
|---|---|
<table> pour la structure | div + flexbox / grid |
| CSS en ligne | Balise <style>, feuilles externes |
| Arial, Helvetica, Georgia… | Polices web sans repli |
width / height sur les images | Tailles en CSS uniquement |
padding sur les cellules | margin pour l’espacement |
| Images hébergées en HTTPS | Images en pièce jointe, SVG |
Liens absolus (https://…) | Liens relatifs, JavaScript |
Suivre ces règles demande de la rigueur, mais le résultat en vaut la peine : une signature qui s’affiche de la même façon, pour chacun de vos destinataires.