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 !
8 réponses à Tout ce que vous devez savoir sur la création d’e-mailings .html
Delivman 14 janvier 2010
Si je peux me permettre d’apporter ma contribution à cet article, je reviens sur trois points que vous citez,
- « la balise TITLE est inutile », je ne suis pas de votre avis sur ce point. En effet, il est vrai que sur leur messagerie, les clients ne verront pas le titre du mail, mais comme vous le conseillez judicieusement, il faut permettre aux personnes de pouvoir visualiser le mail sur une page web, et dans ce cas, le titre apparait bel et bien. Il me semble donc important que cette balise soit conservée.
- « Utilisez la balise « , c’est totalement vrai, le est déconseillé, par contre la balise ne passe pas sur tous les emaileurs, on lui préfèrera la balise qui est compatible aux dernières normes en matière de HTML.
- « N’essayez pas de duper les messageries en écrivant le libellé du lien correctement mais en laissant une url “exotique” », c’est exact, par contre le terme employé pour définir ce genre de pratique est le fishing, on peut néanmoins l’apparenter à du Spam.
En tout cas très bon article, je lis avec attention ce blog, merci de nous faire partager vos connaissances
Guillaume Fleureau 15 janvier 2010
Chère Delivman,
merci pour votre commentaire.
Concernant la balise , vous avez raison de préciser que cette balise fonctionne sur la copie web puisqu’elle est affichée sans contexte de messagerie dans un navigateur web. Cependant je pensais utile de rappeler que cette balise est inutile sur l’emailing en tant que tel et que le fait de ne pas avoir de balise sur votre copie web ne gênera en rien son affichage et donc son efficacité.
MarieLou 8 février 2010
on peut aussi insérer des styles intégrés mais pas dans le head comme on le ferait sur une page classique, mais après le body, en effet certain webmail ne prennent pas en compte le head…
Augustin 18 février 2010
« Ne mettez aucune classe CSS entre head et head car beaucoup de messageries suppriment les éléments qui se trouvent entre ces balises »
Bonjour,
Dans la campagne de démonstration de sarbacane, les style css sont dans le head. c’est un exemple de ce qu’il ne faut pas faire ?
jonathanulco 19 février 2010
http://www.campaignmonitor.com/css/
Un récapitulatif du support css dans un webmail.
Si la créa est trop complexe, superposez les .
Evitez les backgrounds, privilégiez les img.
Utilisez les attributs html comme bgcolor par exemple.
Je trouve qu’on perd plus de temps à nettoyer une découpe photoshop qu’à monter proprement un e-mailing.
Mettre un display:block sur les balises ça évite l’effet padding sur outlook
/J
Augustin 10 mars 2010
Bonjour,
j’ai telechargé le pack de modèles de newsletter sarbacane. Si j’ai bien suivi il ne faut donc pas l’utiliser car il ne respecte pas les conseils que vous donnez dans l’article, notameent au niveau des styles. Sarbacanne met il a disposition un ou des exemples de newsletters « conformes » ?
Benoît Renart 10 mars 2010
Bonjour,
Les modèles de newsletters mis à votre disposition sont des exemples de templates simples. Ceux-ci permettent de débuter dans l’e-mailing grâce à une structure de mail simple à utiliser.
Si vous désirez concevoir des e-mailings plus graphiques en lien avec les astuces que nous donnons sur le blog, je vous propose de vous rapprocher vers notre studio graphique, Sarbacane Studio.
http://www.studio.sarbacane.com