Vous utilisez le mode Expert pour créer votre modèle de signature Letsignit voici ci-dessous quelques conseils et astuces pour améliorer votre modèle 

A noter : votre code HTML peut-être réinterprété par les différents clients de messagerie, les conseils et astuces ci-dessous vous permettront de vous rapprocher du modèle souhaité.

La construction générale : 

  • Seul le contenu entre les balises <body> </body> est utilisable et le style doit être incorporé in line dans le code HTML
  • Insérer vos informations variables et images dans un tableau et y appliquer une largeur/hauteur 
  • Les dimensions maximales recommandées pour une bannière sont de 600 x 200 px - retrouvez ici nos conseils pour une bannière de communication efficace. 
  • Ne pas ajouter de balise <head></head> , certaines balises ne servent à rien et sont supprimées pour certains clients de messagerie
  • Eviter les balises <em> et <strong>. Préférez l'utilisation d'un style pour éviter une police et/ou taille potentiellement modifiées dans Outlook.

Les variables : 

  • Entourer chacune de vos variables par le symbole {{NOM DE LA VARIABLE}} - voici ci-dessous le nom des variables systèmes à insérer :

Nom complet - name.fullName

Nom - name.familyName

Prénom -  name.givenName

Fonction - title

Service – department

Téléphone - phone.primary

Portable - phone.mobile

Rue - streetAddress

Ville – city

Code postal - postalCode

Département ou région – state

Pays - country

Société - companyName

Site web – website

Email - email

Photo de profil - <img src="{{picture_url}}"> et l'ajuster avec une taille en height et width
Exemple : <img src="{{picture_url}}" "height=60 width=60">


Les liens URL :

  • Préciser devant tous les liens le protocole "https://" pour que les liens externes soient actifs sur tous les navigateurs 
  • Comme les styles des liens dans les balises <a> sont parfois supprimés (exemple : la couleur du lien), il est nécessaire d'utiliser la balise <span>. Pour cela, entourez votre balise <a> de la balise <span> et appliquez lui le même style défini que sur votre balise <a>.
  • Ajouter le nom de la variable {{Email}} après le href dans une balise <a> </a> pour rendre vos emails cliquables (et surtout contrôler la couleur du lien)
  • Pour effacer le soulignement d'un lien url, entourer le texte avec un <span style="text-decoration: none"> </span> en plus du text-decoration none dans le style du lien dans la balise <a>.

Appliquer un style : 

  • Toujours préférer les styles in-line pour limiter les risques d'interprétation par certains clients de messagerie 
  • Mettre le style in line dans les balises <table>, <td>, <span>, <p> 
  • Toujours préciser une couleur de police, quand elle n'est pas précisée, certains clients de messagerie force une couleur par défaut (gris foncé par ex sur Hotmail)
  • Indiquer les valeurs hexadécimales pour les couleurs - Retrouvez votre code hexadécimal facilement en utilisant un convertisseur
  • Insérer un line-height dans un style pour gérer l'interligne dans une même cellule
  • Pour limiter les risques d'interprétation utiliser des polices systèmes ou des groupes de polices systèmes (la première aura l'avantage).

Les images : 

  • Redimensionner les images avant de les héberger pour éviter que les images ne soient déformées en boîte de réception
  • Spécifier la largeur et la hauteur des images dans la balise <img>
  • Vérifier le nom des images, celles-ci ne doivent pas contenir d'espace.


Les astuces : 

  • Eviter un espace blanc et faire remonter la variable du dessous : utiliser la balise {%if%} {%endif%} en incluant le <br> vérifiant la présence d'une information pour la variable 

Voici un exemple vérifiant la présence du téléphone : 

{{name.fullName}} <br>
 {% if phone.primary %}T. {{phone.primary}} <br> {% endif %}
{{title}} <br>
{{phone.primary}}

  • Insérer un préfixe ou suffixe : utiliser la balise {%if%} {%endif%} vérifiant la présence d'une mention avant ou après la variable

{{name.fullName}} <br>
 {% if phone.primary %}T. {{phone.primary}}{% endif %} <br>
 {{title}}<br>
 {{phone.primary}}

Ci-dessous quelques liens utiles : 

Convertisseur RVB > Hexadécimal : http://www.kitsgraphiques.net/convertisseur-rvb-hexadecimal.html 

Convertisseur pixel > point : http://www.endmemo.com/sconvert/pixelpoint.php

#HTML #Signature #modeexpert 

Did this answer your question?