Sur le blog du mail : Mail sous Windows 8 : allez-vous aimer ou détester ?
E-mailing L'e-mailing

Choisir le bon format HTML pour vos campagnes d'e-mailing

Nos consignes pour être affiché correctement partout

Pour réussir une campagne d'e-mailing, il importe d'être affiché correctement dans toutes les messageries. Mais il ne suffit pas d'utiliser un bon logiciel d'édition HTML (comme DreamWeaver - payant - ou KompoZer - gratuit - ) et de copier-coller le code dans le message que vous envoyez aux abonnés.

Car le HTML que contiendra vos e-mails ne doit pas être un HTML tout beau - tout propre conforme aux standards du Web. Mais un HTML hybride destiné à être interprété de la même façon dans les logiciels de messagerie et dans les webmails. Ce qui n'est pas une mince affaire... Car même si leur usage se répand, tous les webmails et, dans une moindre mesure, tous les logiciels de messagerie, ne sont pas capables d'interpréter les feuilles de style CSS correctement.

La mise en page

Vous désirez un e-mail sur plusieurs colonnes ? Oubliez les feuilles de style CSS pour le colonnage et utilisez les bons vieux tableaux HTML (<table></table>) si vous voulez que vos messages ressemblent à quelque chose dans des webmails comme Gmail par exemple.

Respectez quelques consignes :

  • La largeur : aujourd'hui la taille standard des écrans permet l'affichage de newsletters mesurant 620 pixels de large. Cependant, si vous voulez permettre à tout le monde d'afficher intégralement votre e-mail, vous devez opter pour du 530 pixels (lire l'étude d'Adviso.ca).

  • La hauteur : pas de limite. N'oubliez pas cependant que les premiers 300 pixels s'affichent dans le panneau de visualisation des logiciels : vous y concentrerez donc ce qui donnera envie à vos lecteurs d'aller plus loin.

Notez que pour obtenir un fond de couleur sur Yahoo! Mail et Gmail, il vous faudra englober le contenu de votre mail dans une balise <div style="background-color:#FFFFCC;"></div>. Sinon, ce sera fond blanc dans ces 2 webmails !

L'enrichissement du texte

Vous pouvez utiliser des feuilles de style CSS pour mettre en forme le texte.

Mais attention :

  • préférez les déclarations CSS à l'interieur du code (et non pas avec appel à un fichier CSS externe).

  • utilisez des CSS inline (style précisé dans chaque balise). Sachez que Gmail ignore tout ce qu'il y a entre les balises <style> et </style>.

  • ne jouez pas trop sur la couleur des liens : la plupart des webmails imposent leurs propres couleurs. Vous n'y pourrez rien changer.

Les images

évitez d'envoyer les images en pièce jointe ou incorporées (embedded). Mettez-les donc en ligne sur votre site Web et utilisez les adresses absolues (http://www.bidule.fr/img/img1.gif) dans le code source de votre courriel.

La validation

N'oubliez pas de placer un doctype ( <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) et n'hésitez pas à valider votre document auprès du Validator du W3C.

Testez impérativement l'affichage de votre logiciel de messagerie dans les principaux logiciels de messagerie (Outlook Express, Outlook, Windows Live Mail et Thunderbird) et dans Gmail, Hotmail et Yahoo! Mail.

Idéalement, pour le poids, faites en sorte de ne dépasser pas 30 Ko (hors images). Votre newsletter sera ainsi rapidement chargée.

Enfin n'oubliez pas de placer votre fichier HTML sur votre serveur Web pour pouvoir placer un lien de secours dès le début de votre newsletter.

Pour la pratique, consultez la page Composer un e-mail au format HTML

optimiser le message


Publicité
Sur Arobase.org
• Composer un e-mail au format HTML
Sur le Web
• 33 templates gratuits de newsletters [Campaign Monitor]
• Quand CSS et Courriel s'embrassent sous le gui sur Pompage.net
• HTML emails, taming the beast sur ThinkVitamine.com.