Comment préparer le design de son template de signature email ?

Vous avez une nouvelle charte graphique du tonnerre ? Tant mieux !
Voici nos conseils pour préparer un template de signature qui fonctionne et s'affiche parfaitement dans tous les environnements (pas seulement le vôtre). Et qui soit compatible avec les contraintes techniques liées aux échanges email.

Choisir une Police de caractère / typographie

Les signatures email sont un espace plus contraint techniquement qu’un document Adobe ou un site internet, pour lesquels les librairies de polices de caractères permettent d’imaginer tout type de rendu ou presque. Pourquoi ? Car votre interlocuteur professionnel n’aura pas votre charte et vos polices de caractères installées sur sa machine. Il affichera donc une autre police de caractère par défaut. Autant intégrer cette contrainte directement, et choisir une police universelle.

Voici un lien très utile sur le sujet, qui vous permettra de vous y retrouver, et de préparer votre design avec les polices de caractères universelles, qui s'affichent sur PC comme sur Mac.

Vous pouvez par exemple prévoir dans le code de votre template, soit d'utiliser des polices de caractères universelles, et donc disponibles sur tous les postes. Soit de paramétrer une police plus spécifique par quoi elle doit être remplacée.

exemple :

{% assign fonts = "font-family: Century Gothic, Microsoft Sans serif, Arial, sans-serif;" %}

Dans ce cas, la police définie est la "Century Gothic". Si elle n'est pas présente sur le poste de votre destinataire, elle sera remplacée par la "Microsoft Sans Serif" ou la "Arial" qui est commune à tous les ordinateurs. Dans tous les cas c'est une police sans serif qui s'affichera.

Icônes des réseaux sociaux

Nous nous basons sur le système de FontAwesome, pour avoir des icônes de qualité, toujours à jour. Vous pouvez les préparer :

en plein, seules ou cerclées
en défonce dans une forme commune à tous les réseaux (rond, carré, carré a bords arrondis)

Couleurs

Évitez de multiplier les couleurs permettra de mieux valoriser votre message.
Pour une utilisation simple et optimale des couleurs, utilisez un jeu de 2 couleurs :

une pour la partie coordonnées et les éléments non-dynamiques
un autre pour les éléments dynamiques tels que les réseaux sociaux et le message (peut être la même couleur)

Dimensions de la signature

Pour une utilisation optimale sur les différents terminaux, nous utilisons des images retina, prévoyez 900px de large. (soit 450 pixels affichés). Concernant la hauteur, les versions HTML vous permettent de choisir la hauteur que vous souhaitez. Sigilium permet une large compatibilité avec les messageries du marché.

Si vous prévoyez une version utilisée aussi sur les mobiles, les CRM, etc.
il faut intégrer la contrainte suivante :

Un template aux dimensions fixes de 450px (largeur) x 520px (hauteur) intégrant les coordonnées + une bannière. Nous recommandons que la partie coordonnées ne dépasse pas 220-250 pixels de haut pour laisser une taille suffisante aux visuels des messages.

Vous pouvez utiliser ce fichier photoshop disponible pour préparer votre template.

Coordonnées dynamiques

Tout d'abord pensez que chacun des champs de votre signature est à dimension variable, en fonction des collaborateurs :

Longueur des prénoms ou des noms (composés ou non), titres professionnels plus ou moins longs, sur une ou plusieurs lignes (parfois traduits). Idem pour les adresses postales si vous avez plusieurs entités. Pensez-y et prévoyez de la place pour vos différents champs. Testez le design de votre signature en intégrant ces contraintes pour un résultat qui fonctionne dans tous les cas.

Pensez votre signature email avec un message

Les signatures email sont amenées a être accompagnées de messages (bannière image ou texte HTML). Prévoyez le rendu avec ces bannières sous les coordonnées.

Accompagnement

Si vous avez des doutes ou besoin de conseils sur le design que vous préparez, vous pouvez contacter l'équipe Sigilium :
contact@sigilium.com / +33 1 83 64 02 13

Nous nous ferons un plaisir de vous accompagner. Le sujet des signatures email n'est pas aussi simple qu'il n'y parait !