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!

email old school

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/5. From 1 vote.
Please wait...
Voting is currently disabled, data maintenance in progress.
32 Comments
  • […] Mise à jour: N’oubliez pas de lire l’article publié le 19/05/2011: Comment créer un email, une newsletter en HTML? […]

  • Jean Mi

    20 mai 2011 at 12 h 43 min Répondre

    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 🙁

    • Léonard

      20 mai 2011 at 13 h 58 min Répondre

      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.

    • aformaclic

      13 décembre 2012 at 14 h 06 min Répondre

      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

  • Jean Mi

    20 mai 2011 at 16 h 44 min Répondre

    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 🙂

  • Mercotte

    20 mai 2011 at 17 h 12 min Répondre

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

    • Léonard

      20 mai 2011 at 18 h 11 min Répondre

      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!

  • Philou

    1 juin 2011 at 17 h 46 min Répondre

    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?

    • Elie

      11 avril 2012 at 7 h 36 min Répondre

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

      Et sinon… très bon article !!

    • Leonard

      12 avril 2012 at 0 h 05 min Répondre

      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.

  • Elo

    7 mai 2012 at 15 h 25 min Répondre

    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

    • Leonard

      8 mai 2012 at 8 h 28 min Répondre

      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 😉

      • Elo

        9 mai 2012 at 8 h 25 min Répondre

        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

  • Pascal C

    6 décembre 2012 at 21 h 44 min Répondre

    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 !

    • Leonard

      6 décembre 2012 at 23 h 12 min Répondre

      Merci Pascal et bon lancement!

  • Nathalie

    11 janvier 2013 at 12 h 02 min Répondre

    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

  • Laurence

    8 mai 2013 at 17 h 47 min Répondre

    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

    • Leonard

      9 mai 2013 at 21 h 08 min Répondre

      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

      • laurence

        10 mai 2013 at 14 h 03 min Répondre

        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…

        • Leonard

          10 mai 2013 at 18 h 51 min Répondre

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

          • laurence

            10 mai 2013 at 19 h 13 min

            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…

          • Leonard

            10 mai 2013 at 20 h 32 min

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

  • laurence

    11 mai 2013 at 14 h 15 min Répondre

    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

  • Newsletter | Pearltrees

    25 novembre 2013 at 12 h 57 min Répondre

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

  • Guandi

    20 août 2014 at 18 h 12 min Répondre

    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.

    • Leonard

      31 octobre 2014 at 16 h 38 min Répondre

      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

  • Nicholas

    16 février 2015 at 12 h 48 min Répondre

    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?

    • Leonard

      6 mai 2015 at 10 h 40 min Répondre

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

  • JgandelinNom

    5 avril 2015 at 23 h 51 min Répondre

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

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

  • Web design - helioz | Pearltrees

    19 avril 2015 at 23 h 12 min Répondre

    […] Why Users Aren’t Clicking Your Home Page Carousel. 10 Consejos para Optimizar la Velocidad de su Sitio Web – Blog Hostdime Colombia. Cómo perder peso (en el navegador) Who Designed the Hamburger Icon? Comment créer un email, une newsletter en HTML? […]

  • Cédric

    11 décembre 2017 at 17 h 42 min Répondre

    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 !!!

  • Mauro

    5 novembre 2020 at 1 h 16 min Répondre

    Très bien ton article, très bien expliqué

Post a Comment