L’art de coder un email en HTML / CSS

Les emails sont codés en langage HTML et incorporent du CSS, comme toutes les autres pages web. Mais coder un email HTML n’est pas la même chose que coder une page web. C’est plus complexe. De fait, il n’est pas facile de réussir à afficher un email sur tous les appareils / logiciels de messagerie comme vous aimeriez qu’il s’affiche. Pour optimiser l’affichage de vos emails, il y a plusieurs règles et un certain nombre de bonnes pratiques à respecter, que vous conceviez vos emails à partir d’un template existant ou à partir de rien. Voici un guide complet sur le sujet pour que vous puissiez coder vos emails HTML en toute sérénité !

Pourquoi coder un email en HTML / CSS ?

Il y a finalement très peu de personnes qui se posent la question de savoir comment coder une page web HTML – à part les développeurs. Par contre, coder un email HTML est d’emblée source de problèmes et d’interrogations. Il est très difficile d’afficher correctement vos emails sur tous les webmails et tous les clients emails. Les problèmes d’affichage sont plus que récurrents. Mais pourquoi au juste ?

Chaque messagerie / client email interprète les emails à sa façon

Il est assez difficile de répondre à cette question et de donner des raisons précises. Une des raisons est l’absence de conventions techniques standardisées au niveau international. Mais, au-delà de cet aspect, la situation actuelle, c’est que le code HTML d’un email est interprété de manière différente selon les clients email utilisés (Gmail, Yahoo, Hotmail, Outlook, etc.). Chaque webmail / logiciel de messagerie lit les emails à sa façon. Certains attributs HTML sont interprétés sur certaines messageries mais pas sur d’autres. Certaines propriétés CSS sont interprétées sur certaines messageries, mais pas sur d’autres.

Nous vous renvoyons vers l’excellent tableau de Campaign Monitor qui répertorie un grand nombre de propriétés CSS et indique si elles sont interprétées ou non, selon votre client-email / messagerie.

Les emails sont ouverts sur des devices différents

L’affichage d’un email codé en HTML dépend aussi des devices utilisés pour la lecture. Un email peut s’afficher très bien sur desktop, mais poser problème sur téléphone ou tablette. Aujourd’hui, plus de 50% des emails dans le monde sont ouverts sur un appareil mobile (smartphone ou tablette). Le codage HTML / CSS doit être particulièrement soigné pour que l’email s’affiche de manière aussi performante sur ordinateur, tablette ou smartphone.

Le code de vos emails HTML doit respecter des règles et des bonnes pratiques pour optimiser au maximum leur affichage. Voici les 5 règles à suivre.

Règle #1 – Anticiper les contraintes de l’HTML email dès la phase de design

Coder de manière satisfaisante un email HTML suppose de travailler sur vos attributs HTML et sur vos propriétés CSS. Mais il est essentiel d’anticiper les contraintes d’affichage de votre email dès la phase de design de l’email. Il faut que votre travail sur le design soit mené en connaissance de cause des contraintes techniques à prévoir lors de la phase de développement. Pour avoir bien à l’esprit les principales contraintes, voici quelques recommandations.

Construisez l’email sur une seule colonne

Evitez tant que possible de multiplier les colonnes dans votre email. Allez au plus simple : un design construit qui n’intègre qu’une seule colonne est largement suffisant pour beaucoup d’emails. Opter pour une colonne unique réduit considérablement les risques de problème d’affichage (sur les mobiles notamment). Ce n’est bien sûr pas possible pour tous les types d’emails. La majorité des templates de newsletters utilisent plusieurs colonnes par exemple.

L’argument qui tue : L’utilisation d’un design à une colonne améliore le confort de lecture et rend plus facile le scan de votre contenu !

De manière plus générale, essayez autant que possible de construire des emails simples. Plus l’architecture de votre email est complexe, plus vous risquez de vous retrouver en face de problèmes d’affichage.

Ne dépassez pas 700px de largeur

Faites en sorte dans la mesure du possible que la largeur de vos emails ne dépasse pas les 700px de largeur. Cette largeur est optimale. Au-delà, cela risque de poser problème pour l’affichage de vos emails sur mobile. Vous pouvez même viser un peu en-dessous des 700px pour optimiser au maximum l’affichage sur mobile. Si 80% de vos destinataires lisent vos emails sur mobile, rapprochez-vous même des 600px de largeur.

Renseignez la balise alt pour vos images

Certains clients de messagerie bloquent par défaut les images. Lorsque ce n’est pas le cas, certains utilisateurs changent leurs paramètres de messagerie pour bloquer l’affichage des images. En cas de blocage d’une image, seule la balise ALT apparaît. La balise ALT est une balise HMTL qui décrit le contenu de l’image. Le fait que vos images ne s’affichent pas réduit considérablement la compréhension de votre email par les destinataires concernés. Pour palier en partie cet inconvénient, pensez à renseigner la balise alt pour toutes vos images.

Choisissez des polices d’écriture simples

Ne cherchez pas à faire original en choisissant une police de caractère qui sorte de l’ordinaire. En particulier, plusieurs polices Google Fonts ne sont pas supportées par tous les clients de messagerie. Allez au plus simple et choisissez des valeurs sures : Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Ces polices, connues de tous, s’affichent correctement sur toutes les messageries.

Pensez à l’affichage mobile en premier

Il s’agit là d’une règle générale qui doit conduire la manière dont vous concevez vos emails. Beaucoup de designers commencent par élaborer le design des emails sur ordinateur, avant de chercher à l’adapter pour les mobiles. Vous devez adopter l’approche inverse : pensez d’abord mobile et vérifiez ensuite que votre email s’affiche correctement sur ordinateur. Ce n’est pas toujours évident. Travaillez comme cela au moins pour vos emails les plus simples (vos emails transactionnels par exemple).

N’oubliez pas le lien de désinscription

…et ne cherchez pas à le dissimuler ! De toute manière, dites-vous que les personnes qui cherchent à se désabonner de votre liste ne sont pas des personnes intéressantes pour vous. Afficher clairement le lien de désinscription permet de maintenir une liste de contacts qualifiés (vos mauvais contacts se nettoient eux-mêmes, si l’on peut dire). Pour revenir aux choses sérieuses, nous vous rappelons que l’affichage d’un lien de désinscription est obligatoire dans un email commercial. Le lien de désinscription est traditionnellement intégré dans ou sous le footer.

Evitez les éléments Flash ou JavaScript

Eviter d’utiliser du JavaScript ou du Flash dans vos emails. Ces langages sont rarement supportés par les messageries. Si vous souhaitez introduire des éléments en mouvement dans vos emails, utilisez du .gif.

Règle #2 – Structurer l’HTML de l’email par des tableaux

Pour optimiser l’affichage de vos emails, nous vous conseillons vivement de structurer le code de vos emails HTML par des tableaux. L’utilisation de tableaux dans le codage est une vieille technique, considérée comme passablement old-school pour le codage des pages web. Le CSS est passé par là. Mais les choses sont différentes concernant le codage des emails HTML. Dans ce cas, les tableaux constituent la meilleure méthode. L’utilisation de tableaux est même la seule manière d’avoir une structure un peu complexe, en multi-colonnes, lisible sur toutes les messageries. Evitez d’utiliser la balise <div>, qui implique l’emploi de propriétés CSS (float, margin, padding). Bref, choisissez la balise HTML <table>. Elle permet de structurer votre email sans recours aux propriétés CSS. C’est une valeur sure.

Voici maintenant quelques conseils techniques pour structurer vos emails avec des tableaux.

1. Définissez la largeur au niveau de chaque cellule

Lorsque vous combinez à l’intérieur d’un email des table widths, des td widths, des td padding et des CSS padding, vous obtenez quasiment un résultat différent pour chaque messagerie. Pour éviter ce problème, nous vous conseillons de définir la largeur de votre tableau au niveau de chaque cellule…et non pas au niveau du tableau lui-même.

<table cellspacing="0" cellpadding="10" border="0">  

N’utilisez pas des largeurs basées sur des pourcentages. Les vieux logiciels de messagerie comme Outlook 2007 ne les respecte pas. Si vous souhaitez ajouter pour chaque cellule des padding, utilisez soit l’attribut de cellpadding de votre tableau ou le padding CSS pour chaque cellule. Ne combinez jamais les deux.

2. Utilisez des tableaux en cascade plutôt que des propriétés margin / padding

Si vous avez besoin d’une structure d’email complexe, utilisez des tableaux en cascade plutôt que de configurer des margins ou des padding pour les cellules de votre tableau. Cela optimisera considérablement l’affichage de vos emails.

De nombreuses messageries ignorent les couleurs d’arrière-plan spécifiées dans votre CSS ou dans votre balise <body>. Pour résoudre ce problème, structurez votre email avec une largeur de tableau de 100% et spécifiez votre couleur d’arrière-plan.

    <table cellspacing="0" cellpadding="0" border="0" width="100%">    <tr>    <td bgcolor=”#000000”>    <Votre code email>    </td>    </tr>    </table>    

3. Evitez les espaces blancs inutiles à l’intérieur de vos cellules

Autant que possible, évitez les espaces blancs entre vos balises <td>. Sinon, il y a le risque que certains clients de messagerie ajoutent des padding additionnels au-dessous ou au-dessus du contenu des cellules. Cela peut impacter directement le design de votre email.

4. Ajoutez l’attribut align dans chaque cellule (plutôt que float)

Pour l’alignement, nous vous conseillons d’utiliser l’attribut align dans toutes les cellules de votre tableau.Pour une raison simple : l’alignement par défaut diffère d’un client email à l’autre. L’attribut HTML align pose moins de problèmes que la propriété float CSS.

    <td align=”right”>    

5. Evitez certaines balises HTML

Nous vous conseillons d’éviter d’utiliser les balises rowspan et tbody dans vos tableaux. La balise tbody envoie un signal négatif aux clients de messagerie et dégrade votre score spam. Quant à la balise rowspan, elle n’est pas lue par toutes les messageries et provoque souvent des problèmes d’espacement. Préférez-y la balise colspan. Captcha permet d’éviter le spam.

<td colspan="2">Sum: $180 </td>  

Règle #3 – Mettre le CSS en inline de l’email & développer les propriétés CSS

La plupart des clients de messagerie comprennent encore mal le langage CSS. Ce qui peut nuire à la qualité d’affichage de vos emails. Voici deux techniques pour limiter les risques d’affichage défectueux.

1. Insérez votre CSS en inline

Plusieurs clients de messagerie, dont Gmail, ne lisent pas correctement les feuilles de style. Ils ne prennent pas en compte le code CSS lorsqu’il est placé dans la base <head> de votre email. Raison pour laquelle nous vous recommandons d’insérer votre CSS en inline. C’est un peu laborieux, car vous devez insérer vos propriétés CSS dans chaque élément sans pouvoir utiliser de classes. Mais sachez qu’il existe plusieurs outils pour mettre votre CSS automatiquement en inline, donc l’inliner gratuit de MailChimp.

2. Utilisez le style longhand CSS

Eviter d’utiliser le style shorthand CSS. Les shorthands ne sont pas acceptés / compris par toutes les messageries.

    <p style="font-size: 15px; font-weight: bold; font-family: arial, times, serif">    

 

Vous devez développer vos propriétés CSS. Définissez toutes vos valeurs, ne comptez pas sur les valeurs par défaut. En particulier, évitez les shorthands pour la police et les valeurs hexadécimales (pour les couleurs). Par exemple, évitez d’écrire ceci :

p { font:bold 1em/1.2em georgia,times,serif; }  

Vous devez au contraire définir individuellement toutes les propriétés CSS :

p { font-weight: bold;     font-size: 1em; line-height: 1.2em;    font-family: georgia,times,serif; }  

Pour les propriétés de couleur dans votre CSS, évitez les shorthands hexadécimaux :

color:#f60; instead of color:#ff6600  

 

Enfin, pour les marges évitez d’utiliser la balise <br /> ou les balises div dans votre CSS. Nous vous conseillons plutôt de configurer la propriété CSS margin inline pour espacer chacun des paragraphes de votre email. Exemple :

p { margin: 0 0 1.6em 0; }  

Pour bien faire ressortir les textes clés de votre email, intégrez ces textes en inline dans la cellule concernée. Evitez la balise <p>. Exemple :

<td width="200" style="font-weight:bold; font-size:1em; line-height:1.2em; font-family:georgia,'times',serif;">votre texte </td>  

Règle #4 – Respecter les bonnes pratiques en matière d’images HTML de l’ email

Vous en avez déjà surement fait l’expérience à de nombreuses reprises : les images des emails ne s’affichent pas toujours. Comme nous l’avons rappelé dans la Règle #1, la plupart des logiciels de messagerie bloquent par défaut l’affichage des images des emails d’expéditeurs inconnus. Il faut toujours avoir en tête cette réalité et ne pas placer tout votre contenu / message dans les images. Vous devez équilibrer la répartition texte / image. Voici les principales recommandations techniques concernant les images des emails.

1. Evitez les images d’espacement

Autrefois, la combinaison des images d’espacements et des tables en cascade était très fréquente et très utilisée par les développeurs. Mais ça, c’était avant. Le fait qu’aujourd’hui beaucoup de messageries bloquent les images rend cette combinaison risquée. A éviter :

<img src="spacer.gif" width="1" height="10">

2. N’utilisez pas de format PNG

Nous vous conseillons d’utiliser le format GIF pour les petites images peu colorées, et le format JPG pour les photos. Evitez le format PNG et les GIF transparents, même si cela conduit à alourdir un peu le poids de votre email. Lotus Notes 6 et 7 par exemple ne supportent pas les images PNG en 8-bit ou 24 bit.

3. Incluez toujours les dimensions de vos images

Nous vous recommandons vivement de bien définir les dimensions de vos images à l’aide des attributs width et height à l’intérieur de vos balises img. Si vous ne le faites pas, certains clients de messagerie ne tiendront pas compte de votre code et utiliseront de mauvaises dimensions. Ce qui peut impacter évidemment votre design.

<img src="/images/poisson.gif" width="80" height="80">

4. N’oubliez pas la balise alt

Ce point a déjà été évoqué plus haut. Puisque certains clients bloquent vos images, vous devez bien renseigner la balise alt. Cela permettra de sélectionner des destinataires pour qui les images ne s’affichent pas de comprendre malgré tout leur contenu. En cas de blocage des images, la plupart des clients de messagerie affichent en effet la balise alt. Pensez à bien décrire le contenu des images dans la balise.

<img src="/images/soldes-vetements-enfant.gif" width="80" height="80" alt="soldes ete -50% sur tous nos vetements enfants">

5. Bloquez les paddings d’Outlook.com

Outlook.com (et quelques autres clients) ajoute automatiquement des padding additionnels sous les images des emails (traits de séparation). Nous vous conseillons de bloquer cet ajout en intégrant le shortcode suivant :

img {display:block;}

Ce shortcode n’impactera pas l’affichage de vos images sur les autres logiciels de messagerie.

6. Intégrez des fallback colors pour vos images de fond

Plusieurs clients emails, comme Outlook 2007, ne supportent pas les images de fond. Si vous en intégrez dans le design de vos emails, pensez à définir une couleur de fond en plus de l’image (fallback colors). Le client de messagerie pourra, de cette manière, afficher l’image de fond même s’il ne réussit pas à charger l’image.

7. Utilisez l’attribut HTML align plutôt que des floats CSS

Ce point ne concerne pas uniquement les images. Nous en avons parlé dans la Règle #3. De nombreux logiciels de messagerie ne rendent pas correctement les propriétés floats CSS. L’attribut HTML align a la même fonction que la propriété float. Utilisez-là pour aligner vos images.

<img src="image.jpg" align="right">

Ajoutez l’attribut align= »top » à vos images si vous constatez qu’elles ne s’affichent pas bien sur certaines messageries.

Règle #5 – Coder votre email en HTML pour modifier la couleur d’arrière plan dans un tableau

Comme nous l’avons dit tout à l’heure, certains clients de messagerie ne lisent pas (ou mal) les balises CSS. Raison pour laquelle il est préférable d’utiliser des tableaux pour structurer vos emails. De la même manière, un certain nombre de clients interprètent mal le contenu de la balise <body>, située en haut de votre code. Ce qui peut poser problème au niveau de l’affichage de la couleur d’arrière-plan.

Pour optimiser au mieux l’affichage de la couleur d’arrière-plan, il est recommandé de définir la couleur d’arrière-plan dans un tableau séparé enveloppant tout votre template de mail (tableau principal). Définissez pour ce tableau une largeur de 100%.

La plupart des clients emails affichent par défaut les mails sur un fond blanc. C’est le cas de Gmail par exemple. La quantité d’arrières-plans affichés varie en fonction des clients, mais aussi d’autres facteurs (bannières publicitaires, menus, toolbars, etc.) qui peuvent affecter la taille d’affichage du mail. Vous devez aussi activer le vpn sécurisé.

Un autre conseil pour vous assurer que votre template s’affiche clairement : ajoutez une bordure sur les côtés ou tout autour du template. Si le contenu de votre email à l’intérieur du template s’affiche sur un fond blanc, cela permettra de bien délimiter les contours du design et de créer un espace entre votre e mail sécurisé et le cadre d’affichage du client.

<td bgcolor=”#000000”>

Pour visualiser comment intégrer ce code dans votre tableau, voire Règle #2, 2ème paragraphe.

Comment coder votre email en HTML ?

Terminons ce guide pratique sur un conseil, sans doute évident pour beaucoup mais qu’il n’est pas inutile de rappeler : testez systématiquement l’affichage de vos emails sur les principaux clients de messagerie avant de les envoyer. Ouvrez dans moxilla votre logiciel d’emailing pour tester le serveur smtp pour envoyer. Si Votre logiciel ne le permet pas, vous pouvez utilisez un outil comme Litmus qui vous permettra de prévisualiser vos emails sur les principaux clients. Si vous ne connaissez pas ce logiciel très performant, nous vous invitons à découvrir notre test et avis complet sur Litmus. Il peut être pertinent aussi de proposer une version en ligne de vos emails et de faire un lien vers elle. Il garantie une bonne délivrabilité des emails.

Pour finir, voici une liste de ressources très complète pour vous aider dans le code de vos emails HTML. Il faut fournir également une adresse email valide.

Pour aller plus loin

• 10 techniques pour réussir votre campagne SMS marketing
• 5 idées pour fidéliser vos clients avec du SMS marketing
• Guide complet pour débutant en email marketing
• Les étapes de création d’une campagne emailing