17 Juin Créer une signature HTML compatible Gmail et Apple Mail
Une signature email en HTML permet d’avoir une présentation plus professionnelle, avec votre logo, vos coordonnées, vos couleurs et des liens cliquables.
Le principal défi est de créer une signature qui reste bien affichée aussi bien dans Gmail que dans Apple Mail sur Mac.
Les clients email ne fonctionnent pas comme des navigateurs web classiques. Certaines propriétés CSS modernes peuvent être ignorées ou supprimées. Il faut donc privilégier un HTML simple et robuste.
Utiliser des tableaux HTML
Pour une signature email, les tableaux HTML restent la solution la plus fiable pour organiser les différents éléments.
On peut par exemple placer un logo dans une première colonne et les coordonnées dans une seconde colonne.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:middle; padding-right:15px;">
<img src="https://www.monsite.ch/logo.png"
width="100"
alt="Logo"
style="display:block; border:0;">
</td>
<td style="vertical-align:middle;">
<strong>Votre nom</strong><br>
Webmaster · SEO · Gestion de projet web
</td>
</tr>
</table>
Centrer verticalement les éléments
Pour aligner verticalement le texte au centre d’un logo ou d’une image, il est préférable d’utiliser la propriété :
vertical-align:middle;
Elle doit être placée directement sur la cellule <td>.
<td style="vertical-align:middle;">
Mon contenu
</td>
Cette technique est beaucoup plus fiable dans les emails que l’utilisation de Flexbox avec display:flex ou align-items:center.
Créer des liens dans une signature HTML
Pour ajouter un lien vers votre site, utilisez simplement une balise <a>.
<a href="https://www.monsite.ch/"
style="color:#3D3D3D; text-decoration:none;">
www.monsite.ch
</a>
Dans une signature email, il est préférable d’ajouter directement les styles CSS dans l’attribut style de chaque élément.
On parle de CSS inline.
Changer la couleur d’un lien au survol
Sur un site web classique, il est très simple de modifier la couleur d’un lien au passage de la souris grâce à la pseudo-classe CSS :hover.
Par exemple, pour utiliser la couleur turquoise #1abc9c :
<style>
.signature-link {
color:#3D3D3D;
text-decoration:none;
}
.signature-link:hover {
color:#1abc9c !important;
}
</style>
<a href="https://www.monsite.ch/"
class="signature-link">
www.monsite.ch
</a>
Il faut cependant savoir que le support du :hover est limité dans les signatures email.
Apple Mail peut généralement interpréter ce type de CSS, mais Gmail peut supprimer ou ignorer certaines règles CSS lors de l’insertion de la signature.
Le changement de couleur au survol doit donc être considéré comme une amélioration facultative et non comme un élément essentiel du design.
Privilégier le CSS inline
Dans un site web, on utilise généralement une feuille de style CSS externe.
Dans un email, il est préférable de mettre directement les styles dans les balises HTML.
Par exemple :
<span style="
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#3D3D3D;
">
Mon texte
</span>
Cette méthode améliore fortement la compatibilité entre Gmail, Apple Mail, Outlook et les autres logiciels de messagerie.
Comment gérer les images et les logos ?
Les images utilisées dans une signature doivent idéalement être hébergées sur votre site web.
L’adresse de l’image doit utiliser HTTPS :
https://www.monsite.ch/images/logo.png
Il est également conseillé de définir explicitement la largeur de l’image.
<img
src="https://www.monsite.ch/images/logo.png"
width="100"
alt="Nom de l'entreprise"
style="display:block; border:0;"
>
Le display:block permet notamment d’éviter certains petits espaces indésirables sous les images.
Installer une signature HTML dans Gmail
Gmail ne propose pas directement un éditeur permettant de coller du code HTML source.
Le plus simple consiste donc à créer votre signature dans un fichier HTML puis à l’ouvrir dans votre navigateur.
Sélectionnez ensuite la signature telle qu’elle apparaît à l’écran, puis copiez-la avec ⌘ C.
Dans Gmail, rendez-vous dans :
Paramètres → Voir tous les paramètres → Général → Signature
Créez une nouvelle signature puis collez le contenu avec ⌘ V.
Vérifiez ensuite que les images, liens et alignements sont correctement conservés.
Installer une signature HTML dans Apple Mail
Dans Apple Mail, une signature simple peut également être copiée depuis Safari ou Chrome puis collée dans :
Mail → Réglages → Signatures
Pour des signatures HTML plus complexes, Apple Mail stocke également ses signatures dans des fichiers avec l’extension :
.mailsignature
Ils se trouvent généralement dans un dossier ressemblant à :
~/Library/Mail/V*/MailData/Signatures/
Cette méthode permet de contrôler plus précisément le code HTML utilisé par Apple Mail.
Ce qu’il vaut mieux éviter dans une signature HTML
Pour maximiser la compatibilité, évitez les technologies CSS modernes utilisées habituellement pour créer des sites web.
Il est notamment préférable d’éviter Flexbox, CSS Grid, les animations CSS, JavaScript, les polices web externes et les mises en page trop complexes.
Une signature email doit rester relativement simple.
Les bonnes pratiques sont donc :
- utiliser des tableaux HTML pour la mise en page ;
- utiliser du CSS inline ;
- héberger les images en HTTPS ;
- définir les dimensions des images ;
- utiliser des polices standards comme Arial ou Helvetica ;
- tester la signature dans plusieurs clients email.
Exemple complet de signature HTML
Voici une structure simple et compatible avec la majorité des logiciels de messagerie :
<table cellpadding="0"
cellspacing="0"
border="0"
style="
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height:1.4;
color:#3D3D3D;
">
<tr>
<td style="
vertical-align:middle;
padding-right:15px;
">
<img
src="https://www.monsite.ch/logo.png"
width="100"
alt="Logo"
style="display:block; border:0;"
>
</td>
<td style="
vertical-align:middle;
border-left:3px solid #1abc9c;
padding-left:15px;
">
<strong style="
font-size:16px;
color:#3D3D3D;
">
Votre nom
</strong>
<br>
Webmaster · Gestion de projet web · SEO
<br>
<br>
<a
href="https://www.monsite.ch/"
style="
color:#1abc9c;
text-decoration:none;
"
>
www.monsite.ch
</a>
</td>
</tr>
</table>
Conclusion
Créer une signature HTML pour Gmail et Apple Mail demande surtout de rester simple.
Les tableaux HTML, le CSS inline et les images hébergées sur votre site restent les techniques les plus sûres pour obtenir une signature propre et stable.
Les effets plus avancés comme les changements de couleur au survol peuvent être ajoutés, mais ils ne seront pas forcément interprétés de la même manière par tous les clients email.
Le plus important est donc de construire une signature qui reste lisible et professionnelle même lorsque certaines propriétés CSS ne sont pas prises en charge.
No Comments