| date | slug | title | page_title | changefreq | priority |
|---|---|---|---|---|---|
2012-06-22 16:06:56 +0000 |
integration-emails |
7 bonnes pratiques pour des emails de qualité |
Réussir l’intégration de ses emails |
monthly |
0.8 |
De nos jours, envoyer des emails reste laborieux tant dans la partie créative que la partie code : la taille de la création est limitée, et les styles doivent être codés inline :
<a href="#" style="color: red;padding:0 0 10px 0;">
Mon beau texte rouge
</a>Pas folichon niveau création / débug. Heureusement il existe des bonnes pratiques qui vous permettrons de créer un template d’email de qualité pour vos futures campagnes de communication.
Afin d’identifier rapidement vos éléments il faut remplir toutes vos balises alt. Cela évite de se retrouver en spam ? (à vérifier) et permet de ne pas avoir d’espace sans contenu.
A l’ouverture de l’email les images ne sont pas affichées. Pour éviter de faire scroller l’utilisateur et avoir un contenu accessible, il suffit de ne pas spécifier de taille à vos images.
<img src="monImage.jpg" />
Beaucoups de personnes (dont moi) n’utilisent plus de client type thunderbird pour la consultation d’emails. L’email se lit "on the fly" sur tablette, mobile ou à l’aide du client web comme hotmail. La taille maximale recommandée pour s’adapter à cet écosystème est 600px de large.
Comme je l’ai expliqué en introduction le style des balises doit être inline. Pour changer la couleur de vos liens une seule solution : à la main et un par un.
<a href="http://davidl.fr/" style="color:#f08c00;text-decoration:none;">
Visitez mon site
</a>
Le corps de votre email c’est du texte. Vu la multitude de possibilités de plate-forme d’envoi et / ou de réception ne cherchez pas midi à 14h pour votre encodage de caractère : encodez avec des entités HTML.
Passez votre texte à la moulinette avec htmlentities pour encoder correctement vos accents.
Chaque webmail possède ses spécification et son moteur de rendu. Hotmail et gmail ont la facheuse tendance à ajouter un padding sur les images.
Pour régler ce problème voici le hack :
<img src="monimage.jpg" style="display:block;" />[
Dans l’entête d’email il faut un lien pour voir la version en ligne. Comment contourner ce problème pour afficher un titre accrocheur ? Utilisez un image de 1px sur 1px et remplissez la balise alt. Veuillez bien à la mettre en premier dans votre code.
<img src="spacer.gif" alt="Mon titre donne envie de lire donc je clique" />Commencez par visiter les conseils de gourous sur le site html email boilerplate.
Vérifiez bien la compatibilité CSS de vos balises.