Tout ce que vous devez savoir sur la création d’e-mailings .html
Après les 15 conseils centrés sur le sujet d’un e-mailing, voici d’autres conseils plus techniques pour bien commencer l’année.
L’email marketing vous permet d’envoyer à moindre coût, des messages attrayants et efficaces à vos clients. Mais le graphisme n’est pas une fin en soi. Un e-mailing peut être très attractif visuellement mais encore faut-il qu’il s’affiche correctement chez vos prospects ou clients. Nous allons voir quelques astuces, optimisations et autres conseils pour faire en sorte que vos e-mailings arrivent chez vos destinataires tels que vous souhaitez qu’ils les voient.
Pour cela, nous allons devoir nous plonger un peu dans le langage HTML.
Quand vous concevez une page web classique, il y a un certain nombre de balises incontournables qui structure le code HTML. Même si une page web et un e-mailing présentent plusieurs similitudes, nous allons voir qu’il faut prendre en compte les contraintes de l’e-mailing. Ils existent des dizaines de plate-formes différentes (webmails et logiciels de messageries), mais qui n’ont pas toutes le même niveau d’interprétation du code HTML des e-mailings. Il faut donc coder spécifiquement pour maximiser les chances d’un affichage correct.
Les fondamentaux
- Respecter la norme W3C HTML 4 pour le montage HTML des e-mailings
- Le montage HTML d’un e-mailing, est une question de « découpage »
- Le découpage va permettre l’optimisation des « blocs » qui composent l’email. Chaque bloc sera composé d’une image ou de «texte HTML ». Le découpage initial peut être fait avec les tranches d’un logiciel tel que Photoshop. Puis, il faut reprendre le code HTML généré par Photoshop et le « nettoyer». Attention, ne faites pas l’erreur d’utiliser seulement des images dans votre e-mailing. Mixez textes HTML et images pour obtenir de meilleurs résultats !
- Utilisez le format JPG pour les photos, et le format GIF pour les logos, boutons et aplats de couleurs. Optimisez le poids sans trop dégrader la qualité.
- Proposez systématiquement une copie web de votre emailing pour permettre à vos destinataires de le visualiser correctement en cas de problèmes.
Les balises inutiles
Voici quelques balises qu’on retrouve régulièrement dans une page web. Il est préférable de les retirer du code source de votre e-mailing car elles sont de toute façon souvent éliminées par les messageries.
- DOCTYPE
- <META>
- <LINK>
- <SCRIPT>
- <TITLE>
Utilisez le montage en tableaux (<table>)
La plupart des messageries n’interprètent que partiellement les styles CSS.
Le positionnement des éléments de votre e-mailing pourrait être très bien interprété en tant que page web par les navigateurs mais le résultat serait très aléatoire en tant qu’e-mailing. En effet, les messageries sont très capricieuses vis à vis du CSS. La meilleure façon de s’assurer d’une interprétation correcte de votre code reste la conception en tableaux HTML.
A l’intérieur des cellules du tableau, vous aurez forcément à faire des sauts de lignes.
La balise <P> est souvent utilisée pour séparer des paragraphes. Le problème est que l’espace entre les paragraphes varient selon que votre e-mailing est lu via Internet Explorer et Mozilla Firefox (les 2 navigateurs les plus utilisés). Ceci pourrait générer des différences de mise en page.
L’utilisation de la balise <BR> est recommandée pour les sauts de ligne car elle est bien interprétée par tous les navigateurs et messageries.
Utilisez l’inline CSS
Le CSS n’est pas à bannir des e-mailings. Mais il faut l’utiliser avec parcimonie et en suivant certaines règles :
- Positionnez vos CSS directement dans les éléments HTML : dans les <td>, les <span>, les <font>. L’utilisation des balises <STYLE> n’est pas supportée par toutes les messageries.
- Ne mettez aucune classe CSS entre <head></head> car beaucoup de messageries suppriment les éléments qui se trouvent entre ces balises
- N’utilisez pas les balises de type <LINK> contenant un lien externe vers une feuille CSS, ceci ne fonctionnera pas.
En CSS, contentez-vous de définir les polices et les couleurs des textes et des liens.
Tout le reste n’est pas forcément bien interprété.
Les images
- Utilisez plutôt des images hébergées sur un serveur distant (l’embarquement des images directement dans l’e-mailing est moins sûr)
- Spécifiez les dimensions des images, mettez les bordures à 0 et remplissez les attributs ALT
- Appliquez les conseils de l’article « Images bloquées et fenêtres de prévisualisation : comment concevoir des e-mailings efficaces avec ces contraintes »
Les formats incompatibles
Vous pourriez être tenté d’utiliser des éléments multimédia pour agrémenter vos e-mailings. Oubliez ! Les vidéos ou encore le format Flash ne s’affichent pas dans les messageries pour le moment. Les balises à proscrire sont donc :
- <OBJECT>
- <EMBED>
- <APPLET>
N’utilisez pas non plus de Javascript ou de DHTML.
Si malgré tout vous souhaitez insérer un extrait vidéo, le mieux est d’utiliser une petite séquence en GIF animé qui redirige vers la véritable vidéo sur votre site.
Utilisez des urls courtes
On voit parfois dans les -emailings commerciaux des urls très longues et techniques telles que : http://servers140.routeurprofessionnel.com/tag/g5?a=45g788d54zd8…
Ceci peut être dommageable à plusieurs niveaux. En effet, ce genre de liens peut paraître suspicieux pour la messagerie (risque de considération en SPAM) mais aussi pour le destinataire qui ne sait pas ce qui cache derrière le clic.
Utilisez plutôt des urls de types : http://www.votre-entreprise.com/…..
Sarbacane offre la possibilité de personnaliser dans son compte ses urls de tracking avec le domaine de l’entreprise.
N’oubliez pas de spécifier la cible de votre lien. On utilisera plutôt l’attribut target= »_blank » pour les balises <a>, de manière à ouvrir les liens dans une nouvelle fenêtre. Ainsi on s’assure que le site sur lequel on redirige s’affiche bien dans le navigateur et non directement dans l’interface de la messagerie (comme c’est le cas avec Lotus Notes par exemple).
Surtout, n’essayez pas de duper les messageries en écrivant le libellé du lien correctement mais en laissant une url “exotique” comme ceci : <a href=” http://servers140. routeurprofessionnel.com/tag/g5?a=45g788d54zd8”> http://www.votre-entreprise.com/ </a>
Vous auriez de fortes chances d’être considéré comme un spammeur.
Testez !
N’oubliez pas de tester au maximum vos créations en mode réel, c’est à dire en envoyant vos e-mailings sur des comptes de webmails et sur des logiciels de messagerie. Sarbacane devrait proposer prochainement un service permettant de tester automatiquement vos campagnes sur plusieurs messageries et d’intégrer les résultats dans l’interface du logiciel.
Vous verrez qu’avec quelques optimisations sur votre code HTML, vous obtiendrez de meilleurs taux de clics et donc de meilleurs retours sur investissement ! Ne négligez pas cet aspect de vos campagnes !
