Découvrez des conseils, des astuces et des bonnes pratiques pour optimiser vos signatures mails.

1. CONSEILS ET BONNES
PRATIQUES
Tout connaître pour optimiser
vos signatures mails !

2. Sommaire
 Le contexte …………………………………………………………………………………... p.3
 Le contenu ………………………………………………………………………………... p.4 - 6
Le contenu rédactionnel
La mise en page
 Le code HTML …………………………………………………………………………… p.7 - 13
Différences site web et email
Ce qu’il faut savoir
La structure HTML type
Les images
Le contenu texte
Les liens
 La délivrabilité ………………………………………………………………………….. p. 14 - 17
Pour optimiser la délivrabilité
Qq spécificités par messagerie
A retenir
 Besoin d’aide ? …………………………………………………………………………….. . .p.18

3. Le contexte
 L’email en entreprise
L’email s’est imposé comme l’outil le plus utilisé en entreprise du fait qu'il permette de :
 Multiplier les communications indépendamment du nombre de correspondants et de leur disponibilité immédiate,
 Assurer la traçabilité et le suivi des échanges,
 Gérer la diffusion de l’information, personnelle ou au sein d’un groupe, directe ou indirecte,
 Classer, archiver et rechercher les communications réalisées.
 La signature mail
La signature mail, quant à elle, permet de :
 Valoriser l’image de marque,
 Communiquer,
 Recruter sur les réseaux sociaux,
 Partager un fil d’actualité,
 Dynamiser le trafic web,
 Récolter des datas.

4. Focus sur : le contenu
08/08/2014

5. Le contenu rédactionnel
 Quelles infos mettre dans votre signature mail ?
Texte, image, widget, variable, lien (vers une vidéo, un site internet…). Tout est possible !
 Infos fixes : logo, site internet, adresse postale…
 Infos variables : nom, prénom, fonction, téléphone, adresse email…
 La méthode des 7C
Communiquer c’est avant tout s’adapter à son interlocuteur !
 Clair : respectez la règle d’une idée par phrase,
 Concis : privilégiez la synthèse,
 Cohérent : donnez à vos écrits un contenu logique,
 Concret : illustrez vos propos et suscitez l’intérêt,
 Correcte : soignez l’orthographe, la grammaire et la syntaxe,
 Convaincant : mettez en œuvre une stratégie rédactionnelle,
 Courtois : soyez empathique et n’oubliez pas les formules de politesse.
Le concept
« user centric
attitude »
Mettez-vous tout
simplement à la place
de votre lecteur et
devinez ce qu'il
aimerait.

6. La mise en page
 Le placement de l’information
Les informations importantes au bon endroit !
 Positionnez les informations de l’entreprise à gauche (logo, site internet…)
 L’appel à l’action principale doit être visible, plutôt à droite.
 La charte graphique
L’empreinte de l’entreprise, la construction de son image et le renfort de sa stratégie de
communication.
 Préférez les fonds clairs et les polices foncées,
 Evitez les mises en forme trop différentes, les mots en majuscule, les couleurs trop
criardes…
Le « look and feel »
C’est l’impression
visuelle du message
Le « flat design »
Design graphique
minimaliste se
caractérisant par des
aplats de couleurs.
Style sobre et épuré.

7. Focus sur : le code HTML
08/08/2014

8. Différences site web et email
 Le site web
Un site web est composé d’un ensemble de pages codées, qui sont lues et interprétées par
des navigateurs (Mozilla Firefox, Internet Explorer, Google Chrome…)
 Outils flexibles,
 Outils intelligents,
 Outils capables d’interpréter du code complexe.
 L’email
Un email peut être lu à partir d’un logiciel dit « client de messagerie lourd » (Outlook, Lotus
Note, Thunderbird…) ou d’un webmail (Gmail, Hotmail, Yahoo!Mail…)
 Chaque solution possède ses propres contraintes en termes d’accessibilité, d’affichage,
et de lutte antispam,
 Un même message pourra être parfaitement interprété sur une version d’Outlook 2003 et
illisible sur 2007.
Site web
= structure complexe
Email
= structure simple
Comment être sûr
que vos emails
seront lisibles ?
Il existe des
fondamentaux et des
bonnes pratiques à
mettre en œuvre.

9. Ce qu’il faut savoir…
 … Sur les styles CSS
Le principe des feuilles de style consiste à regrouper dans un même document des
caractéristiques de mise en forme à des groupes d’éléments.
 N’utilisez pas de feuille de style externe car elles sont ignorées par les messageries,
 N’ajoutez pas de style dans les balises <head></head> car elles peuvent être
supprimées en fonction du client de messagerie,
 Intégrez les styles « in line » , c’est-à-dire dans les balises <p>, <td>, <tr> ou
<table>.
 Astuces
Quelques pré-requis pour optimiser le code HTML :
 Evitez de raccourcir les CSS :
 Préférez les écrire entièrement :
 Indiquez les valeurs hexadécimales pour les couleurs :
Des styles « en ligne »
pour la mise en forme
Le concept de
feuilles de style
Apparu en 1996 avec
la publication par le
W3C d'une nouvelle
recommandation
intitulée « Cascading
StyleSheets » (feuilles
de style en cascade),
notée CSS
<p style="font:bold 12/24em georgia,times,serif;">
<p style="font-size:12px; line-height:14px; font-family:georgia,times,serif;">
<p style="color:#FFFFFF;">votre texte</p>

10. La structure HMTL type
 Respecter des règles simples
Utilisez le HTML standard et n’insérez pas d’autres types de langages tels que Php,
Javascript... provoquant des problèmes d’interprétation.
 Privilégiez une architecture en tableau (<table>),
 Précisez les styles in-line (dans les <p>, <td>, <tr>, <span>…),
 Travaillez sur une largeur maximum de 600 px,
 N’imbriquez pas plus de 3 tableaux,
 N’utilisez pas les fusions de cellules (rowspan, colspan),
 Evitez l’utilisation de blocs flottants (<div>),
 N’embarquez pas de « Rich Média » (Flash par exemple),
 Supprimez les commentaires du code source,
 N’ajoutez pas d’effets de survol (on mouse over).
Ajouter des langages
Php, Javascript,
Flash… dans un email
est considéré comme
suspect
Proscrire les copier-
coller depuis des
logiciels de
bureautique (Word,
Open Office…).
Passez par le bloc
note pour faire ensuite
votre mise en page
dans un éditeur HTML.
Template de signature mail

11. Les images
 Hébergement des images
Afin que les images puissent être visibles pour vos destinataires, il est indispensable de les
héberger.
 Abstenez-vous d’utiliser des caractères spéciaux (accents) et/ou des espaces dans le nom
de vos images et dossiers. Ils seraient réinterprétés dans l’URL. L’URL peut ne pas
fonctionner.
 Formats : Privilégiez le format .jpg
 Si besoin, redimensionnez votre image avant de l’héberger.
 Dans le code HTML
Le point sur quelques bonnes pratiques pour vos images.
Renseignez :
 Un texte alternatif (attribut alt) visible en cas de blocage des images (en fonction du
paramétrage de la messagerie),
 Une hauteur (height) et une largeur (width) pour éviter un éclatement de structure.
Forcez la balise border
à 0 afin d’éviter
l’apparition d’un
contour bleu en cas de
lien sur l’image.
Insérez un style
display:block pour
éviter les espaces
entre les images
<img src="http://wwwmascotte-letsignit/image.jpg" alt=" Monsieur Mailer"
width="600" height="114" border="0" >
Evitez les images en
arrière plan.
N’utilisez pas de blocs
flottants (float). Créez
un tableau et ajoutez
l’attribut align.

12. Le contenu texte
 Les polices système
Arial, Verdana… si vous utilisez une police autre qu’une police système, il faudra ajouter une
image de votre texte.
 Privilégiez des polices sans empattement,
 Ne cumulez pas plus de 2 polices différentes,
 Evitez des tailles de police inférieures à 10px,
 Préférez les px plutôt que les pt.
 A savoir : dans un groupe de polices, la première aura l’avantage. Dans l’exemple ci-
dessous, Verdana aura l’avantage :
 Les caractères spéciaux
L’encodage des caractères spéciaux est nécessaire dans l’envoi d’email afin que le rendu
visuel soit parfait.
Quelques exemples ci-contre, sur la droite.
En savoir plus : http://www.commentcamarche.net/contents/489-caracteres-speciaux-html
 La casse
Les termes en majuscule sont souvent interprétés comme des mots agressifs. Mieux vaut
opter pour une majuscule maximum par mot.
Spécifiez la police
souhaitée en premier
dans le groupe.
Caractère
Code
HTML
à &agrave;
ç &ccedil;
ê &ecirc;
é &eacute;
ë &ecuml;
<span style="font-family:Verdana, Geneva, sans-serif;">

13. Les liens
 Lien absolu
Si vous souhaitez mettre un lien dans votre signature mail, pensez à indiquer une adresse
absolue qui utilise l’adresse complète vers un fichier.
 A éviter
 N’utilisez pas de lien vers des adresses IP,
 N’ajoutez pas de caractères spéciaux comme un espace ou un caractère accentué. Sinon
pensez à les encoder (Ex : %20 pour un espace),
 N’indiquez pas de zones de clic (map-area) car les webmails ne les prennent pas en
compte.
 A préférer
 Les styles dans les liens sont parfois supprimés dans les messageries, ajoutez un span et
mettez votre style de lien sur la balise <a> et sur le <span>,
 Dirigez l’ouverture du lien dans une nouvelle page avec l’attribut target blank
<a style="color:#FF9600;" href="http://www.letsignit.com"><span style=
“color#FF9600;”>Retrouvez-nous sur Letsignit</span></a>
Landing page
- Déterminez vos
objectifs
- Optimisez l’offre, la
conception, le
formulaire et l’URL
Appel à l’action
Optimisez la :
- Visibilité
- Couleur
- Police
- Taille
UNE seule action est
recommandée !
-----------
<a href="http://www.letsignit.com/dossier/fichier.htm">Intitulé du lien</a>
<a href="http://www.letsignit.com" target="_blank">

14. Focus sur : la délivrabilité
08/08/2014

15. Pour optimiser la délivrabilité
 A retenir
Dans le code HTML, le texte est primordial afin d’attirer l'œil du lecteur.
 Les messageries n'affichent pas automatiquement les images,
 43% des destinataires lisent leurs emails sans les images.
 Le format
Il est conseillé de ne pas dépasser une largeur de 600 pixels pour optimiser la lecture dans
la plupart des messageries et selon les résolutions d’écran.
 Les animations
Le format flash n’est pas supporté par les boîtes de messagerie et a une incidence
négative sur la délivrabilité.
Des solutions existent :
 Une image statique « Clic to Play »
Il s’agit de simuler l’insertion d’une vidéo comme sur l’exemple ci-contre:
 L’utilisation de Gif animés : pas de son mais bonne qualité.
Attention, certaines messageries ne les lisent pas.
Favorisez une mise
en forme :
50% de texte
50% d’images
Bannir certains
éléments de vos
envois, au risque que
le message soit
considéré comme du
spam

16. Quelques spécificités par messagerie
 Hotmail
 Les images sont bloquées par défaut
 Ajout de pixels supplémentaires autour des images donc pensez à indiquer un
style="display:block;"
 Affichage par défaut du texte en gris foncé, si la couleur n’est pas spécifiée dans le code
 Gmail
 Les feuilles de style CSS ou les balises CSS dans le head sont rejetées
 L’image d’arrière-plan, le style « background-image » n’est pas pris en compte
 Le background-color saute
 Attention aux erreurs de syntaxe dans le code. Elles sont très mal supportées
 Outlook 2007
 Il faut renseigner les largeurs (« width ») des tables et des images pour éviter l’éclatement de la
signature mail
 Les images de fond ne s’affichent pas
 Les gif animés ne s’animent pas. Seule la première image s’affiche
 Lotus
 Evitez les formats d’image png
 Les bordures sont mal interprétées
 Pensez à spécifier la taille du logo dans le style de l’image pour éviter la déformation

17. Exemple de mise en forme
A retenir
Logo
Préférer :
50% Image
50% Texte
Carte de visite
Tableau : 600 px maxi
Appel à l’action
Susciter l’intérêt
pour générer le clic
Attention à la
hauteur :
Une signature email
ne doit pas
ressembler à un
emailing
Penser à la rotation de vos
campagnes : 1 par mois
pour capter l’attention
Bannir le flash
et javascript
Opter pour une
landing page

18. Besoin d'aide ?
08/08/2014
Tél. : 04 91 11 47 34
Email : customercare@letsignit.com
Le service customer care est à votre
disposition pour toute demande !

19. www.letsignit.com
Les Baronnies - bât C
15, Rue Marc Donadille
13013 Marseille
Tel. +33 (0)4 91 11 47 30
Fax. +33 (0)4 91 70 50 61