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