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}}
Gérer un affichage conditionnel: Dans l'exemple ci-dessous nous vous proposons d'afficher la photo de profil par défaut ou le logo si aucune photo de profil n'a été ajouté pour le profil de certains utilisateurs
<div> {% if picture_url -%} <img alt="" height="88" width="88" src="{{ picture_url}}" /> {%- else %} <img height="46" width="70" src="lien de votre image hébergé sur Letsignit"/> {%- endif %} </div>
Les tailles sont indiquées ci-dessus à titre d'exemple et peuvent être modifiées par vos soins pour correspondre à votre besoin final.
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