RGPD

Votre choix concernant les cookies sur ce site

Nous utilisons des cookies pour personnaliser notre contenu et nos publicités, mesurer l'efficacité de nos publicités et offrir une expérience plus sûre. En naviguant sur le site, vous acceptez l'utilisation de cookies pour collecter des informations sur et en dehors se Sarbacane Pour en savoir plus, consultez notre Politique relative aux cookies ou rendez-vous dans vos préférences en matière de cookies pour gérer vos paramètres.

done Votre adresse a bien été enregistrée
close
error_outline Email invalide
close

Prendre rendez-vous avec un consultant

Discutons :

- de vos enjeux marketing

- de vos besoins fonctionnels

- d'un niveau d'accompagnement adapté

Essayer gratuitement

Le blog de l'actualité marketing

Retrouvez conseils, bonnes pratiques et nouveautés pour maîtriser votre communication multi-canale

Blog Sarbacane

Tout ce que vous devez savoir sur la création d’e-mailings .html

Recevez les bonnes pratiques pour optimiser vos campagnes emailing

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

  1. Respecter la norme W3C HTML 4 pour le montage HTML des e-mailings
  2. 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 !

9 commentaires

Delivman

Il y a 11 ans

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 :)

Répondre

Guillaume Fleureau

Il y a 11 ans

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é.

Répondre

MarieLou

Il y a 11 ans

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...

Répondre

Augustin

Il y a 11 ans

"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 ?

Répondre

jonathanulco

Il y a 11 ans

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

Répondre

Augustin

Il y a 11 ans

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" ?

Répondre

Frederic

Il y a 7 ans

Monsieur,

Pas de problèmes pour la conception de la Newsletter seulement au moment de la transférer la newsletter perds tout ces attributs css et je ne vois absolument pas d'ou viens le problème auriez-vous différentes solutions à me proposer ?

Répondre

Guillaume Fleureau

Il y a 7 ans

Bonjour,

Etes-vous utilisateur sarbacane ? Si oui, je vous invite à écrire à support@sarbacane.com pour obtenir une réponse rapide.

Merci

Répondre

Laisser un commentaire

Votre adresse email ne sera pas publiée et les champs exigés sont marqués (*) et svp n’oubliez pas de rester poli(e) ;-) !