Il existe aujourd'hui, de nombreuses options simples pour véhiculer gratuitement son image et celle de son entreprise. Par exemple, afficher une signature d'e-mail personnalisée dans ses courriels.
Avant d'aller plus loin, il me semble important de vous donner quelques élements de contexte sur le poids que représente l'e-mail.
- Nous sommes 42.2 millions en 2019 à nous connecter chaque mois à un webmail. Chaque jour, 22,7 millions de Français qui se connectent à au moins un compte mail (Source : Médiamétrie).
- Les Français utilisent habituellement environ 68 millions de boîtes mail. Hors spam, un internaute français reçoit en moyenne 39 e-mails par jour (Source : ContactLab).
- Les internautes français disposent en moyenne de 2,1 adresses e-mail (Source : étude SNCD – EMA B2C 2015).
Comment avoir une belle signature d'e-mail ?
Coût et impact écologique des e-mails
CO2 : une entreprise de 100 personnes génère en moyenne chaque année avec son courrier électronique 13,6 tonnes de CO2, soit l’équivalent de 14 allers-retours Paris / New York.Source : ADEME
La préparation
Avant de vous lancer, il est important de se poser afin de voir quels sont les points importants pour concevoir et réussir votre signature d'e-mail. Il ne s'agit pas simplement d'afficher quelques informations en bas de vos e-mails mais bien de concevoir un véritable outil de communication qui véhiculera votre image auprès de vos clients, propects, fournisseurs et concurrents.
#1 - le template
Par template, j'entends ici la forme générale qu'aura votre signature. Plutôt corporate, plutôt orginale, plutôt épurée, c'est à vous de voir en fonction de vos aspirations et de vos besoins. Si vous pensez Mobile first, pourquoi ne pas imaginer une signature "verticale" ?
Première alerte : ne vous contentez pas de dessiner à main levée votre signature sur une feuille de papier. Cela ne fonctionne pas comme ça et vous verrez rapidement que cette méthode basique a ses limites. Optez pour un logiciel de dessin tel que GIMP, PhotoShop ou PhotoFiltre (pour ne citer que ceux-là).
#2 - les informations
Choisissez avec soin les informations qui seront affichées dans votre signature. Si vos noms et prénoms sont indispensables, avez-vous besoin d'afficher votre adresse complète ? Choisissez également les réseaux sociaux que vous souhaitez privilégiez (LinkedIn pour du corporate est incontournable).
Cependant, les champs les plus couramment utilisés sont les nom, prénom, position, entreprise, numéros de téléphone, logo ou photo de profil, site Web, adresse et icônes sociales. On voit également de plus en plus souvent apparaitre des phrases de sensibiliation à l'écologie pour inciter à imprimer avec modération l'email (et tant mieux).
#3 - logo ou photo ?
Difficile à répondre à cette question car c'est un choix assez personnel mais il vous faudra afficher l'un ou l'autre. On se souvient plus facilement des visages et des logos que des noms. Cela ajoutera également une certaine personnalisation à vos e-mail.
Si vous optez pour la photo, veillez à ce qu'elle soit d'excellente qualité et représentative (c'est à dire qu'elle ne date pas d'une dizaine d'années...).
#4 - la taille compte
Régulièrement, prenez du recul et vérifiez la taille de la signature que vous êtes en train de concevoir. Sera-t-elle trop grande et/ou trop intrusive à la fin de vos e-mails ? Est-ce qu'elle occupe tout l'écran lorsqu'elle est affichée sur mobile ?
Avec une signature dessinée sur papier, vous ne pouvez qu'imaginer le rendu final qui ne sera sans doute pas celui que vous espériez. Alors qu'avec un logiciel, vous serez en mesure de vérifier que vous restez autour des 300 px de large (nous verrons pourquoi cette mesure un peu plus loin).
#5 - aérez et espacez
Les clients de messagerie (tels que Thunderbird, Outlook, etc.) sont connus pour ajouter des espaces aléatoires entre les différents éléments. Alors prévoyez dès maintenant que votre signature aura un peu d'espacement ici et là et que cela ne déformera pas le rendu final que vous escomptez.
La conception
C'est ici que vous allez comprendre qu'en termes de codage, la signature d'e-mail est restée bloquée aux années 2000. Aussi étonnant que cela puisse paraitre, ce qui est aujourd'hui courant sur n'importe quel site web ne l'est pas forcément dans le cas d'une simple signature d'e-mail.
Alors que les langages HTML et CSS ont progressivement évolué au fil des années, les navigateurs Web se sont adaptés à ces changements (même IE, si si). En revanche, il faut bien reconnaitre que les clients de messagerie ont peu ou pas changé en termes de rendu HTML - et c'est ce qui rend la conception des signatures d'e-mail aussi frustrante.
Il va donc falloir tenir compte de certaines limitations techniques au moment de concevoir votre signature si vous souhaitez obtenir un rendu qui soit le plus propre possible. Pour cela, nous allons commencer par passer en revue les principaux points d'attention.
#1 - attention aux couleurs d'arrière-plan
Si les couleurs d'arrière-plan fonctionnent parfaitement dans les applications de conception Web normales, elles sont à utiliser avec la plus grande prudence dans le cas présent. Pourquoi ? Tout simplement parce que tous les clients de messagerie ne les prennent pas encore en charge ou sont bogués (comme Outlook 2007-2016 ou WIndows 10 Mail).
#2 - attention aux polices de caractère
Les polices Web sont essentiellement celles disponibles par défaut (ou préinstallées) sur la plupart des systèmes d'exploitation. La liste est connue mais je vous la redonne: Arial, Arial Black, Calibri, Comic Sans, Gadget, Helvetica, Palatino, Tahoma, Verdana, Trebuchet, Courier New, Lucida, Times New Roman et Georgia.
Si malgré cela, vous souhaitez utiliser une police qui n'est pas une police par défaut, assurez-vous d'inclure une police de secours, au cas où votre police principale ne serait pas installée sur l'appareil de vos destinataires.
#3 - attention au poids de votre signature
Le poids des images a un rôle énorme. Donc, avant d'utiliser des images dans votre signature d'e-mail, assurez-vous de les compresser en utilisant un outil comme TinyPNG. Une signature doit avoir une taille inférieure à 30 Ko. Au delà, vous occuperez un espace inutile non seulement dans votre serveur de messagerie (éléments envoyés), mais également dans le serveur de messagerie de vos destinataires (leur boîte de réception).
#4 - attention à la mise en forme
Il n'existe qu'une seule manière d'écrire le code d'une signature d'e-mail : avec des tableaux HTML. Oui, je sais, c'est consternant de lire ça à l'heure de FlexBox, de CSS Grid mais vous n'avez pas le choix.
Attend, les tableaux ne sont pas destinés à construire une mise en page ? C'est tout à fait vrai.... sauf pour les signatures d'e-mail (et les emailing).
#5 - attention à vos images
En dehors du poids de vos images, faites également attention à ne pas conserver les metadonnées telles que le DPI. Ef effet, vos images peuvent être redimensionnées dans Outlook dans certaines circonstances, par exemple lorsque l'ordinateur Windows du destinataire est configuré pour un rendu avec un zoom de 125%.
Pour que vos images s'affichent correctement pour vos destinataires, faites en sorte qu'elles soient hébergées en ligne (et non sur votre ordinateur).
La réalisation
On arrive à l'étape critique où il va falloir mettre les doigts dans le code. Rassurez-vous, je vais vous donner deux solutions pour parvenir à obtenir un résultat qui soit aussi propore que possible.
#1 - ma signature
Pour commencer, je vous vous partager le code source de ma signature. Vous pouvez le reprendre tel quel ou le modifier à votre guise si vous le souhaitez, il n'y a absolument aucun Copyright ici. Afin de vous faciliter la tâche, j'ai fait en sorte que les zones à modifier soient clairement indiquées.
<table style="font-family:Calibri, Helvetica, sans-serif; color: #0c0c0c; background-color: #fff; padding: 20px 40px; border-style: none; border-color: black; border-style: none; border-collapse: inherit; direction: ltr;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding-right:15px;font-size:1pt; vertical-align:top; font-family:Calibri;" valign="top">
<table style="font-family:Calibri;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<!-- Logo ou photo de profil d'une largeur de 150 px -->
<td style="height:55px; font-family:Calibri; vertical-align:top;" valign="top"><img src="url/complete/de/votre/image.jpg" alt="Photo signature e-mail" style="border-radius: 10px; height: auto; width: 150px; border: 0; min-height: 30px; min-width: 30px;" width="150px">
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-family:Calibri; border-left:2px solid #33b5e5; padding-left:15px; text-align: left; vertical-align:top; " valign="top">
<table style="font-family:Calibri; margin-right:0; margin-left:auto;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<!-- Identité -->
<td style="font-family:Calibri; height:35px; vertical-align:top; text-align: left;" valign="top" align="right">
<span style="font-family:Calibri; font-size:20px; font-weight:bold">Prénom Nom</span>
<br>
<!-- Poste ou fonction -->
<span style="font-family:Calibri; font-size:15px;">Poste ou fonction</span>
</td>
</tr>
<tr>
<!-- Adresse sur deux lignes -->
<td style="height:20px; font-family:Calibri; vertical-align:top; padding:0;" valign="top">
<span style="font-family:Calibri; font-size:15px;">Adresse ligne 1</span>
<span style="font-family:Calibri; font-size:15px;">Adresse ligne 2</span>
</td>
</tr>
<tr>
<!-- Site web -->
<td style="height:20px; font-family:Calibri; vertical-align:middle;" valign="middle">
<a href="https://adresse-de-mon-site-web.fr" target="_blank" style="color:#33b5e5; font-size:15px; font-family:Calibri;">Site web</a>
</td>
</tr>
<tr>
<!-- Numéro de téléphone -->
<td style="font-family:Calibri; height:22px; vertical-align:top; padding:0; text-align: left;" valign="top" align="right">
<span style="font-family:Calibri; font-size:15px;">
<a style="color:#33b5e5; font-size:15px; font-family:Calibri;" href="tel:+33666666666">06 66 66 66 66</a>
</span>
</td>
</tr>
<tr>
<!-- Réseaux sociaux -->
<td style="font-family:Calibri; height:20px; vertical-align:middle; text-align: left;" valign="middle" align="right">
<span style="display: inline-block; margin-right: 5px;" aria-hidden="false"><img src="url/de/votre/icone/facebook.jpg" alt="facebook" width="auto"><a href="https://www.facebook.com/#####/" target="_blank"></a></span>
<span style="display: inline-block; margin-right: 5px;" aria-hidden="false"><img src="url/de/votre/icone/twitter.jpg" alt="twitter" width="auto"><a href="https://twitter.com/####" target="_blank"></a></span>
<span style="display: inline-block; margin-right: 5px;" aria-hidden="false"><img src="url/de/votre/icone/youtube.jpg" alt="youtube" width="auto"><a href="https://youtube.com/####" target="_blank"></a></span>
<span style="display: inline-block; margin-right: 5px;" aria-hidden="false"><img src="url/de/votre/icone/linkedin.jpg" alt="linkedin" width="auto"><a href="https://linkedin.com/####" target="_blank"></a></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
#2 - les outils en ligne
L'autre solution consiste à utiliser des outils en ligne qui vous mâcheront le travail. Même si je reconnais que cela a un intérêt évident pour les personnes qui ne veulent pas s'embêter avec le code, vous vous doutez bien que ne suis pas très fan de ces services. Pourquoi ?
Tout d'abord, votre signature sera standardisée d'un point de vue esthétique puisque vous n'aurez qu'un choix très restreint au niveau des templates.
Ensuite, quid des données que l'on saisi en toute bonne foi sur ce genre d'outils ? Sont-elles collectées ? Partagées ? Revendues ? Bref, je prône la prudence et si vous voulez vraiment utiliser ce type de service, je vous recommande d'indiquer de fausses informations pour générer le code et de le modifier à postériori avec vos véritables données.
Néanmoins, voici quelques sites qui vous permettront de vous affranchir du code et de générer votre signature d'e-mail en ligne.
Tester sa signature
Malheureusement, vous ne pouvez pas empêcher les gens d'utiliser une ancienne version d'Outlook. Il va donc falloir s'assurer que votre signature s'affiche le mieux possible sur les principaux client mail.
D'après une étude publiée par Litmus, les clients de messagerie les plus populaires en décembre 2017 étaient dans l'ordre: iPhone, Gmail, iPad, Apple Mail et Outlook.
Vous notez que deux d'entre eux sont uniquement mobile ? Voilà qui nous amène au point suivant !
#1 - la compatibilité mobile
Les écrans mobiles sont (généralement) petits, ce qui signifie qu'ils font ce qu'ils peuvent / veulent avec les signatures d'e-mail. Par exemple, votre signature peut s'afficher écrasée et/ou illisible sur un écran mobile simplement parce que le tableau de votre code HTML est plus large que les 300 pixels. Ainsi, l'utilisation d'une signature au format "vertical" permet généralement une expérience sur mobile beaucoup plus agréable pour le destinataire.
#2 - le rendu HTML
Même si ce n'est pas essentiel de le savoir, voici les principaux clients de messagerie et les moteurs de rendu HTML qu'ils utilisent :
- Outlook 2007 – 2016 – moteur de rendu Microsoft Word
- Apple Mail (OSX & iOS) – moteur de rendu Webkit
- Thunderbird – moteur de rendu Mozilla Gecko
- Mailbird – moteur de rendu Chromium
- Gmail, Office 365, Yahoo Mail et les autres webmail utilisent le moteur de rendu de votre navigateur.
Vous comprenez maintenant pourquoi il est si compliqué d'avoir une signature d'e-mail (ou un emailing) qui s'affiche parfaitement sur tous les webmail puisque les 5 clients de messagerie les plus populaires utilisent 3 moteurs de rendu HTML différents.
Problèmes connus
Voici quelques-uns des problèmes les plus connus concernant la compatibilité. Je n'en listerai qu'un seul par client de messagerie sinon cet article deviendra un roman...
#1 - Outlook
Outlook a la mauvaise habitude de modifier la taille des images contenues dans les signatures. Le moyen le plus simple pour contourner cela est de supprimer les métadonnées de vos images, et en particulier, l'attribut DPI.
#2 - Thunderbird
Même si de moins en moins de gens utilisent Thunderbird, celui-ci mérite d'être cité ici. Lorsque vous utilisez une signature d'e-mail avec Thunderbird, celui-ci affiche des bordures en pointillés rouges autour de toutes les tables.
#3 - Gmail
Gmail a la fâcheuse tendance d'ajouter automatiquement un espace sous les images. Cela peut casser votre signature si vous n'avez pas suivi mon conseil à propos de l'espacement. Pour autant que je sache, il n'y a aucun moyen d'y échapper. Si quelqu'un a une solution, merci de la partager dans les commentaires, je serais ravi de la connaitre.
#4 - Apple Mail
Dans la majorité des cas, Apple Mail gère très bien les signatures d'e-mail. Le seul problème rencontré est lorsque vous allez ajouter le code de votre signature, celle-ci apparaîtra vraiment cassée dans la fenêtre d'aperçu. Rassurez-vous, votre signature s'affichera toujours parfaitement lors de la composition d'un nouveau message.
Conclusion
Voilà, vous avez tout pour réussir votre très belle signature d'e-mail. N'hésitez surtout pas à partager cet article s'il vous a été utile et vos créations dans les commentaires afin que nous puissions tous en profiter !
