Accueil » Pro » Emailing » Soigner la mise en forme HTML / CSS de campagnes e-mailing

Soigner la mise en forme HTML / CSS de campagnes e-mailing

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 et non au début du document). 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

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

Notez que si vous utilisez les images de fond, vous devrez faire attention au codage. En effet Outlook 2007 and Outlook 2010 n’interprètent pas du tout de la même façon le code que Gmail ou Hotmail.

Pour une image d’arrière-plan sur tout l’e-mail, la solution est d’appeler l’image à la fois dans la balise body pour Outlook et dans un tableau pour Gmail et Hotmail.

Vous avez ainsi 2 solutions :

<body background=”http://www.bidule.fr/image.png”> <table background=”http://www.bidule.fr/image.png”> ou <body style=”background-image:url(https://www.bidule.fr/image.png);”> <table background=”http://www.bidule.fr/image.png”>

L’utilisation d’images de fond sur des cellules de tableau est en revanche déconseillée. Si vous y tenez absolument, vous trouverez une solution décrite sur le site de Campaign Monitor : Applying background images to your email newsletters.

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.

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

Testez l’affichage de votre message

Vous devez impérativement tester l’affichage de votre message dans les principaux webmails – Gmail, Outlook.com, Yahoo Mail – et logiciels de messagerie (Outlook, Windows Live Mail, Thunderbird). Cela vous permettra de corriger les erreurs que vous commettrez immanquablement.

Vous pouvez à cet effet utiliser des outils de prévisualisation des e-mails comme Getinbox ou Litmus Email Previews ou bien utiliser les modules de prévisualisation de votre plateforme d’e-mailing, si celle-ci en dispose.

Getinbox Des outils comme Getinbox permettent une prévisualisation des messages sur les principaux webmails et logiciels

Nous vous recommandons également :

Bénéficiez du soutien de la communauté Arobase.org dans le forum Emailing

Abonnez-vous à Arobase.org

Messageries, logiciels, applications, services : Arobase.org explore l'univers du courrier électronique. Pour suivre l'actualité de l'e-mail et recevoir nos trucs & astuces, rejoignez-nous sur les réseaux sociaux et abonnez-vous à notre newsletter mensuelle.

Postez un commentaire

Vous voulez donner votre avis ou apporter une précision ? Laissez-nous un commentaire !
Attention : si vous avez un problème particulier à résoudre, cherchez de l'aide et attendez une réponse rapide et personnalisée, nous vous conseillons de vous rendre de préférence dans le forum Emailing.

Votre adresse email ne sera pas publiéeLes champs requis sont surlignés *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Au fait, vous aussi, vous pouvez afficher votre propre avatar dans les commentaires.


Toute l'actu de l'e-mail,
des astuces et des conseils pratiques
chaque mois dans votre boîte aux lettres.

Abonnez-vous à la lettre d'Arobase.org !

Votre adresse ne sera communiquée à aucun tiers. Promis !        En savoir plus