Sur le blog du mail : Gmail bientôt numéro un de la messagerie ?
newsletters Les newsletters > créer une newsletter

Créer une newsletter au format HTML

Nos consignes pour être affiché correctement partout

La façon la plus simple de composer une lettre d'information au format HTML est d'utiliser un 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. Autre solution : utiliser les fonctions d'édition de votre logiciel de messagerie habituel, mais vous risquez d'être limité.

La conception de votre newsletter s'apparente donc à de la mise en page HTML. Mais attention, pas 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

Le format MIME multipart/alternative

Le format texte brut


Publicité
Sur Arobase.org
• Composer un e-mail au format HTML
Sur le Web
• La newsletter, outil de communication associatif sur Educ-pop.org
• Comment améliorer l'ergonomie de sa newsletter [JdNet]
• Les 12 péchés capitaux du HTML pour l'Emailing sur Message Business
• 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.

Sur Aussitot.fr :
#so.cl, le réseau social de Microsoft qui ne s’assume pas [13/02/12]