Comment créer un email, une newsletter en HTML?

Réaction d’un web-designer lambda avant de créer son premier email: « Pwahaha! Laisse moi 5 minutes que j’te code ça rapidos! »… Mais 3 div, 1 float left et 10px de margin plus tard, il commencera à comprendre que… créer un email n’est pas si simple!

Voici les thèmes que je traiterai:
1) Les Styles CSS
2) Les Paragraphes et les Liens
3) Les TABLES
4) Les IMAGES
5) Tester, tester et tester!

Si vous venez de lire un tuto sur l’HTML5 et le CSS3, oubliez tout et reprenez vos livres d’HTML3 de 1997… Comme je le disais il y a exactement un an jour pour jour, l’email c’est old school!

L'e-mail c'est Old School!

Prêts pour la séquence Nostalgie? Proust avait sa madeleine, nous on a nos tables et nos styles inline… D’ailleurs créer des e-mails propres et compatibles sur tous les clients de messagerie, c’est un peu comme préparer un bon petit plat traditionnel, n’est-ce pas Mercotte:P:

  • des ingrédients peu nombreux, simples et authentiques
  • un peu d’HTML et de CSS à l’ancienne
  • goûter, goûter et goûter avant de servir.

Après la recette du SEO, c’était la recette de l’email! Mais passons aux choses pénibles sérieuses et laissons le tablier et les gourmandises aux experts…

1) Les Styles CSS

Tout d’abord, je vous conseille de jeter un coup d’œil au formidable tableau récapitulatif (de Campaign Monitor) des styles supportés par chaque client de messagerie:

campaign monitor css guide

Certains clients de messagerie ignorent l'<head> et les feuilles de styles externes (Gmail par exemple) donc:

  • Ne pas utiliser de styles dans la partie <head>, quelques webmails la coupent. Commencer donc à coder après le tag <body>.
  • Utiliser des CSS INLINE (des outils tels que Premailer existent pour vous aider à traduire vos styles externes en styles inline.)
  • Ne pas utiliser de CSS « shorthand » mais favoriser les styles « longhand » (voir exemple ci-dessous).
A éviter:
<p style="font:bold Arial, Helvetica, sans-serif 12px">blabla… </p>
A privilégier:
<p style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;">blabla… </p>

2) Les Paragraphes et les Liens

Le tag <p> est supporté par tous les clients de messagerie donc vous pouvez l’utiliser mais personnellement je préfère écrire le code le plus neutre possible… C’est pourquoi je vous conseille d’utiliser des <span> et non des <p>. Si vous souhaitez une précision optimale, gérez la hauteur de ligne dans votre <td>:

<td width="350" style="font-weight:bold; font-size:12px; line-height:16px; font-family: arial;">blabla…</td>

Pour que vos liens se visualisent bien sur tous les clients de messagerie vous allez devoir écrire une première fois vos styles dans le tag <a>, puis une deuxième fois dans un tag <span> à l’interieur du tag <a>::

<a href="http://www.tonsite.fr/" style="color:#cccccc"><span style="color:#cccccc">blabla stylé ;-)</span></a>

3) Les TABLES

Des clients tels que Gmail, Outlook 00/07, Lotus ne supportent pas les float, les margin, les padding… Je vous déconseille d’utiliser des <div> mais plutôt des <table>… et surtout de suivre ces conseils utiles:

  • Créer une <table> « conteneur » de 100% de largeur
  • Définir la couleur de fond dans le <td> avec « bgcolor » et non style= »background-color »…
  • Définir la Largeur dans chaque <td> (et non dans la <table>)
  • Ne pas utiliser le padding pour chaque <td> mais cellpadding pour chaque <table>
  • Utiliser plusieurs <td> et éviter d’utiliser padding/margin pour créer des espaces aux extrémités de votre <td>.
  • Ne pas spécifier l’unité en PX dans le <td> (width= »95″)
  • Il est préférable d’imbriquer vos Tables jusqu’à 5 niveaux maximum.
  • Colspan est supporté par de nombreux clients de messagerie, mais malheureusement Rowspan ne l’est pas. Si par exemple, vous souhaitez insérer une image de 250px de hauteur et à sa droite une image ou une marge de 50px au dessus d’un texte de 200px de haut, vous pouvez créer une <table> dans votre second <td> avec 2 <tr> dont une image ou un spacer de 50px dans votre premier <tr><td>.

Exemple de structure:

<table><tr><td>1ère colonne</td>
<td>
<table><tr><td>2ème colonne ligne 1/2</td></tr>
<tr><td>3ème colonne ligne 2/2</td></tr></table>
</td>
</tr></table>

4) Les IMAGES

Par défaut, les images sont bloquées, il est donc essentiel d’essayer d’avoir une répartition texte/image équilibrée et essayez toujours de placer le « call to action » en version textuelle dans les premiers 250/350px de la hauteur.

email image display block
  • Éviter les images « spacer » servant uniquement à créer des espaces.
  • Insérer les dimensions exactes des images.
  • Ne pas oublier de renseigner l’attribut ALT.
  • Éviter les images gif/png transparentes.
  • Éviter les background-image, outlook07 et lotus notes ne les supportent pas…
  • Ne pas utiliser les float mais utiliser l’alignement… align= »right »…
  • Ne pas oublier de préciser DISPLAY:BLOCK; pour ne pas avoir des traits de séparation blancs sur gmail et hotmail comme sur l’image ci-dessus…

Exemple:

<img src="image.jpg" align="top" style="display:block;" alt="Image">

5) Tester, tester et tester!

Tester son email

Pour être sûre que votre email se visualise correctement sur tous les clients de poste, il n’y a qu’une seule solution: TESTER!

Si vous avez la possibilité de connaître les clients de messagerie utilisés par vos utilisateurs, optimisez votre e-mail sur les clients utilisés, si en revanche vous n’en avez pas la moindre idée, adaptez vous à votre cible…
Si votre cible est B2C, contrôlez bien vos e-mails sur les différents webmails (gmail, hotmail, orange…), si votre cible est B2B, vérifiez les différents software (Outlook, Thunderbird, Eudora, Lotus Notes, AOL), et pour finir n’oubliez pas les clients mobiles (Blackberry, Android, iPhone…).
Si vous n’avez pas d’ « email tester » comme Litmus ou EmailonAcid vous permettant de réaliser ces tests automatiquement, patience et courage!

Rating: 5.0. From 1 vote.
Please wait...

31 commentaires

  1. Exactement ce que je cherchais! J’ai suivi à la lettre mais j’ai toujours un soucis… Pourquoi mon background-image ne se voit pas sur Outlook? Il n’y a pas l’image mais un fond tout blanc 🙁

    Reply
    • Et oui, comme tu peux le voir sur le tableau de Campaign Monitor le bg image n’est pas supporté par outlook 07, Lotus Notes 6 et 7 et 8, Hotmail, Gmail, Android… Soit pas beaucoup de monde 😉

      Quelle est cette image de fond et est-elle indispensable?
      Si il y a du texte par dessus ton image tu peux faire une image unique avec le texte sur l’image de fond (RAPPEL: mais tu dois avoir une répartition image/texte équilibrée :!:)
      Si ce fond n’est pas si important que ça, laisse le et ajoute une couleur de fond (bgcolor) similaire à ton TD.

      Reply
    • Pour info, le top reste d’éviter les fonds de couleur, ne serait ce que pour la lecture au final, surtout éviter les couleurs sombres qui agacent au possible

      Reply
  2. Merci! J’ai opté pour la première solution vu que c’était une zone centrale et de petite dimension! Parfait ma newsletter est parfaite. Plus qu’à refaire tous les tests maintenant 🙂

    Reply
  3. Merci pour le clin d’œil mais le reste c’est carrément de l’hébreu pour moi !! aie aie aie …..

    Reply
    • Le but n’est pas d’apprendre à coder un email à Mercotte mais bien de recommander votre site aux Geeks gourmands qui consultent le mien! Je recommande votre blog pour vos recettes superbement illustrées (c’est moins de l’hébreu qu’ici…) et vos irresistibles macarons à la pistache! A bientôt!

      Reply
  4. Merci pour cet article très complet sur l’écriture technique d’un email! Pouvez-vous me conseiller une plateforme qui me permettrait d’écrire mon mail en HTML, l’envoyer et avoir les résultats?

    Reply
    • Tu peux tester Mailjet! C’est gratuit jusqu’à 200 emails par jour.

      Et sinon… très bon article !!

      Reply
    • Merci Elie et en effet j’ai entendu parler de la plateforme Mailjet sur le blog de Bruno Florence il me semble et il y a beaucoup de feedbacks positifs.

      Sinon Philou moi je te conseille Mailchimp que j’adore. J’ai testé 5 plateformes d’email marketing et Mailchimp est vraiment au dessus du lot. Je précise que je ne suis pas affilié 😉
      Tu pourras aussi envoyer jusqu’à 12.000 emails par mois à 2000 abonnés max.

      Reply
  5. Bonjour,

    J’ai un souci, j’ai intégrer quatre images dans ma news car j’ai voulu mapper ma news.
    j’ai bien mis le style= »display:block; » les bonnes tailles de mes images et j’ai toujours des bandes blanche dans ma créa….:(

    Si vous pouvez m’aider ce serait top !

    Merci encore pour cet article très intéressant.

    Elo

    Reply
    • Bonjour Elo, as-tu mis un border=0 sur tes images? Si oui, essaie d’heberger ton email en ligne et de me passer le lien je regarderai dès que j’ai le temps 😉

      Reply
      • Bonjour Leonard,

        Le problème venait du fait que je n’avais pas mis un border=0. j’ai fait la modification et cela fonctionne!!

        Merci !

        Elodie

        Reply
  6. Hello Léo,
    On lit souvent pas mal de conseils sur le net mais j’avoue que c’est une des rares fois que je lis des choses concrètes et pratiques à ce point. Bien joué et mille mercis !
    Je prépare un emailing pour lancer le site de ma petite société et les infos ici reproduites me semblent très très utiles !

    Reply
    • Merci Pascal et bon lancement!

      Reply
  7. Bonjour, merci pour cet article qui est vraiment intéressant!
    J’ai un gros souci pour ma newsletter, elle fonctionne sur tous les navigateurs, smartphones etc… à part sur les blackberrys!
    J’ai rajouté du meta newport et du @mediab etc… (je débute)
    Est-ce que quelqu’un aurait une solution toute simple ou est-ce que je suis la seule qui a des problèmes d’affichages sur blackberry? merci

    Reply
  8. Bonjour,

    Merci pour cet article qui donne de très bonnes informations.
    Il me reste un soucis à régler concernant la réception sur Outlook.
    Mon mail est créer de façon à se trouver en milieu de page. Cette fonction n’est pas prise en compte sur Outlook qui me place mon mail sur la gauche.
    Auriez-vous un conseil à me donner ?
    En vous remerciant

    Reply
    • Bonjour Laurence,
      je n’ai pas bien saisi votre soucis. C’est le contenu de l’email qui est sur la gauche ou la fenêtre de l’email dans Outlook?
      N’hésitez pas à me fournir un screenshot à info at leonard-rodriguez.com

      Reply
      • Bonjour Léonard,
        Mon premier soucis était dans la fenêtre de l’email. J’ai réglé ce problème en ajoutant deux TR de chaque côté de mon centre. à priori, Outlook ne lit pas le align center.
        J’avais aussi un soucis de décalage sur la gauche dans le contenu sur Outlook, des cellpadding et cellspacing à 0 ont réglé l’affaire.

        Voulant faire des arrondis en haut de mon mail, j’ai inséré une image (Outlook ne prenant pas en compte les border-radius).
        Maintenant que tout est ok pour Outlook, je fais un test avec premailer et zut de zut, mon image de haut aux bords arrondis est retrécie…

        Reply
        • Avez-vous bien spécifier width et height dans le td et dans les images?

          Reply
          • J’ai tout repris à la base afin que ce soit vraiment propre.
            Je pense que le soucis venait d’un manque de détails concernant les répétitions à faire dans toutes les pyramides (table, tr, td).
            J’ai aussi retravaillé au fur et à mesure en imbriquant des tables.
            Je suis assez satisfaite du résultat.

            Par soucis de perfection, je me renvoie un mail à partir de Outlook vers gmail. Au départ d’Outlook, la forme est bonne. Bonne aussi à l’arrivée sur Thunderbird mais présente encore des lignes blanches sur mon webmail alors que j’ai mis des display block…

          • Pour tes images et les bandes blanches, as-tu mis un border=0 sur tes images?

  9. Avant ta réponse, j’avais fait avec les border=0, ça ne fonctionnait pas mais aujourd’hui, c’est bon. Je suppose qu’il fallait juste vider mon cache…
    Merci beaucoup

    Reply
  10. Le site n’existe encore que dans ma tête, et à vrai dire n’est pas vraiment nécessaire, si ce n’est que pour l’image (site vitrine). Je vais essayer de le faire tout seul comme un grand. Mail pour un « bête » mail comme disent mes amis belges, je n’ai même pas envie de commencer à apprendre. A chacun ses talents. Les miens sont plutôt dans la créativité de bon sens au niveau de placements financiers pour « des vieux cons comme moi ».
    Comment faire pour solliciter votre aide. En échange si besoin de mon savoir faire juridique, fiscal et financier.
    J’en ai marre « d’être taxé un max », par des gens qui me prennent pour une bille.

    Reply
    • Si votre demande est encore d’actualités, contactez-moi en privé, je vous ferai un devis ou un échange de bons procédés car j’ai besoin d’une consultation d’ordre juridique pour un business que je suis en train de monter. Merci

      Reply
  11. Merci pour l’article! Une question: est-ce que vous avez essayé des logiciels pour la création des newsletters genre MailStyler? Apparamment il permet de composer des belles mises en page sans avoir à coder… Qu’est-ce que vous en pensez?

    Reply
    • Je ne connais pas Nicholas. Je laisse les autres lecteurs réagir à ma place. Bonne continuation

      Reply
  12. Voici un tuto sur la creation d’un email en html :

    http://www.mkdesign.fr/creer-un-email-html/

    Reply
  13. Bonjour,
    j’ai un problème au niveau des images, mes images ne s’affiche quand j’envoi mes newsletter j’ai mi le border= »0″ toujours rien c’est quoi le pb !!!

    Reply

Commentez cet article:

Derniers Articles

  • segments avancés
    Les Segments avancés de Google Analytics et 20 exemples

    Il existe plusieurs outils de Web Analytics qui vous permettent de segmenter vos données, moi j’utilise Google Analytics et ses segments avancés que je vais essayer de vous détailler en suivant ce plan : 0) Introduction I) Qu’est-ce que sont les segments avancés et pourquoi les utiliser? I-a) Qu’est ce que sont les segments avancés? […]

  • Netlinking
    Qu’est-ce que le Netlinking et comment faire?

    Voici le sommaire de cet article : 1/ Qu’est-ce que le Netlinking ? 2/ Qu’est-ce qu’un backlink de qualité ? 3/ Plutôt White, Grey ou Black Hat ? 4/ Restez Naturel et Variez 5) Quelles techniques et quels sites utiliser pour son Netlinking ? 6) Analyser 7) Etre organisé et planifier son Netlinking 8) Conclusion […]

  • Tout savoir sur le Temps de pose

    Il y a quelques semaines nous parlions d’ouverture du diaphragme et de profondeur de champ, aujourd’hui j’aborderai le deuxième chapitre lié à l’exposition : la vitesse d’obturation. Rappel : une photo bien exposée est une photo qui combine parfaitement les trois facteurs du « triangle de l’exposition » : – L’ouverture du diaphragme – Le […]

  • Tu savais que …?

    Vous retrouverez sur cet article plein d’anecdotes et de statistiques liées au web, aux réseaux sociaux, à Google, des geekeries… Pour les découvrir en avant-première, suivez moi sur Facebook , sur Google+, sur Pinterest ou sur Twitter! Cette page est mise à jour tous les jours, n’hésitez pas à partager ces images sur cos réseaux […]

  • Comment écrire ses articles et bien utiliser les mots clefs?

    C’est article est la suite de "Comment choisir ses mots clés pour référencer son site?", donc si vous avez la flemme n’avez pas eu le temps de lire ce précédent article, je vous rappelle que : – c’est essentiel de réfléchir sur quels mots clefs associer à chaque page… et donc éviter la cannibalisation SEO […]

  • Tout savoir sur l’ouverture du diaphragme

    En photographie si vous souhaitez sortir de l’ennuyeux mode « auto » pour faire de la photographie avec créativité et personnalité, il y a un concept qui est essentiel : l’exposition. Une photo bien exposée est une photo qui combine les trois facteurs du « triangle de l’exposition » : – L’ouverture du diaphragme – […]

  • Victoire de LRWEB lors du Concours « l’eau » organisé par Pentax

    Les quelques lecteurs fidèles se demanderont ce que vient faire un article qui parle de photographie sur mon blog… J’en profite donc pour vous annoncer un virage important pour ce blog. Dorénavant je ne parlerai plus uniquement de Web-marketing et de Web Design mais également de Photographie qui est depuis plus d’un an une vraie […]

  • Comment rédiger et publier un communiqué de presse optimisé SEO?

    Voici comment s’articulera cet article : Les communiqués de presse au cœur de votre stratégie SEO Comment rédiger vos communiqués de presse Choisir des bonnes plateformes de press release Comment Publier vos Article de presse Et après la publication je peux en remettre un coup ? Fichier Bonus à télécharger (liste de plus de 250 […]

  • Tutoriel : Intégrer un Onglet iFrame sur votre Fan Page Facebook

    La durée de vie d’un tutoriel sur Facebook et ses fonctionnalités est très courte vu que le site californien change constamment! Mais vous avez été si nombreux à me demander un tutoriel mis à jour sur la création et l’intégration d’un Onglet sur une Page Fan, que j’ai finalement craqué… Cet article est donc la […]

  • Site Multilingue: domaines, répertoires ou sous-domaines?

    La première règle est qu’il n’y en a pas! Un peu facile comme introduction… Disons qu’il y a de très bonnes techniques, des bonnes techniques et des techniques un peu moins bonnes! Décidemment cette intro est complètement nulle…Et pour conclure en mocheté cette inutile introduction, disons que chaque site multilingue aura sa propre stratégie en […]

  • Tutoriel iMacros et Exemples de macros

    Cet article t’intéressera si: – tu souhaites simplement gagner du temps en automatisant des opérations que tu répètes quotidiennement, – si tu es SEO et que tu souhaites automatiser des flux, poster plus rapidement, créer des backlinks ou rendre ta LinkWheel plus puissante, – si « Bookmarking Demon », « SenukeX », « Scrapebox » et autres softwares de BH te […]

  • Content Spinning: comment faire et quels logiciels utiliser?

    Le content spinning en SEO est une technique qui consiste à créer du contenu rapidement, mécaniquement en substituant des mots grâce aux expressions simples du langage PHP. Elle est très souvent utilisée par la communauté des SEO Black hat pour générer des backlinks. Le rendu peut être propre et ressembler à une reformulation manuelle ou […]

  • Comment ajouter le bouton Like de Facebook sur WordPress?

    Vous avez un site web? Que vous ayez une page Facebook ou non, le bouton « like » de Facebook peut être un vrai générateur de trafic si vous l’utilisez bien. Les avantages du bouton « Like » Le bouton Like est un outil très puissant qui permettra à vos lecteurs de vous indiquer qu’ils apprécient votre contenu mais […]

  • Comment intégrer Facebook Open Graph dans WordPress?

    Quand une personne « aime » votre contenu, un résumé de la page s’affichera sur son mur Facebook. l’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description comme sur cet exemple: Si vous avez un blog WordPress, c’est très simple, il suffit d’ajouter quelques meta […]

  • The Passion Project: l’initiative Facebook de Novoceram

    Depuis Avril 2011, je suis responsable Web chez Novoceram, un des leaders mondiaux du secteur céramique. Je souhaite vous faire partager une de mes expériences Web chez Novoceram. L’évènement de l’année pour les entreprises du secteur céramique est le Cersaie. Chaque année, le stand de Novoceram illustre un thème choisi l’équipe. L’année dernière, c’était « le […]

Devenez Fan de Léonard Rodriguez sur Facebook
Retrouvez moi sur Google
Suivez-moi sur Twitter
COntactez-moi