HTML coder pour l’e-mailing

L’emailing est un sujet assez vaste. Je l’avais déjà abordé au travers d’un article plutôt axé marketing, qui traitait des meilleurs jours et plages horaires pour l’envoi de mailing. Dans un autre article, toujours orienté webmarketing, j’avais expliqué les différentes notions à bien appréhender pour construire une landing page efficace.

Ce post-ci sera un peu plus technique. En effet, on va passer en revue les bonnes pratiques à mettre en oeuvre pour créer un template HTML dédié à l’envoi par mail. Qu’il s’agisse donc d’un emailing de prospection, d’une newsletter ou encore d’une notification automatique d’un site internet (confirmation d’inscription, confirmation de commande etc.) si vous désirez envoyer autre chose que du texte brut, il va falloir adapter vos pratiques au media email. Sans quoi vos destinataires ne recevront rien d’autre qu’une bouillie de mise en page, s’ils reçoivent quelque chose tout court d’ailleurs. Allez, c’est parti !

Pourquoi une manière spécifique à l’email ?

Avant toute chose, tentons de clarifier la situation. Etant donné que les mails HTML – comme l’indique si bien leur nom – sont écrits en HTML et ont recourt aux CSS, celui qui connaît ces deux technologies peut légitimement se demander pourquoi les pratiques diffèrent dans le cadre d’un email. Pourquoi donc changer ses habitudes alors qu’elles fonctionnent à merveille sur le web ? A cela, je n’ai qu’une seule réponse : testez par vous-même. Ecrivez votre template tel que vous le feriez pour une page web, puis envoyez-vous le, on en rediscute quand vous aurez admiré le résultat…

Maintenant que chacun a fait sa propre expérience, soulevons la bonne question voulez-vous. Pourquoi ce qui marche sur le web ne marche pas pour l’email ? C’est très regrettable je dois l’admettre, mais la réponse est simple. Les navigateurs, qui permettent d’afficher de manière convenable les documents HTML/CSS que vous lisez sur le web, se sont adaptés aux technologies au cours de leurs évolutions, et de leur adoption au fil des années. En revanche, du côté des clients mails, cette assertion n’est pas vraiment valable. Pourquoi la plupart des clients mails ont-ils délaissé les technos récentes ? On peut imaginer plusieurs raisons à cela, parmi lesquelles on trouvera, pêle-mêle :

  • Contraintes technique en ce qui concerne les webmails,
  • Faible priorité à développer l’affichage correct des mails HTML étant donné que la plupart des mails sont en texte brut,
  • Jemenfoutisme aigüe du respect des standards du web concernant les mails (?)
  • etc…

Les remèdes

Fort de ce constat, nous allons maintenant nous appliquer à intégrer les « bonnes pratiques » pour avoir un rendu correct dans le maximum de clients mail et webmails. Si je mets bonnes pratiques entre guillemets, c’est justement parce que les bonnes pratiques pour l’email sont aujourd’hui totalement proscrites dans le dev web.

En effet, ici, les CSS sont restées à l’age de pierre, les arrondis sont faits avec des images et le placement de tout ce beau monde se réalise à l’aide de tableaux. Wahou, gros flashback ! Je sais, mais c’est comme ça : mail ain’t web, baby.

Avant d’entrer dans les détails, voici ce dont nous allons parler par la suite. L’email HTML est donc constitué de tableaux, les CSS seront minimes et ils seront inline, oubliez tout de suite la feuille de style CSS. En ce qui concerne les images, elle devront être hébergées sur un serveur, le mail se contentant de faire pointer un lien vers les images à incorporer. Le JavaScript, j’espère que vous n’y pensiez pas. Enfin, en ce qui concerne les images, préférez découper votre layout en plusieurs petites images qu’en mettre quelques grosses, le chargement et le rendu n’en seront qu’accélérés.

J’ai eu il y a quelques temps à faire un emailing pour la société Alphapole, qui est spécialisée dans les médecines douces. Le mailing final, dont je vous laisse admirer le splendide résultat ci-dessous, nous servira d’exemple. On va donc préciser point par point, un peu sous la forme d’une étude de cas, quels sont les écueils à éviter et ce qu’il faut mettre en place pour que ça marche.

exemple d'emailing pour alphapole

Avant d’aller plus loin, j’arrête tout de suite les malins qui vont se dire : « bof, y’a cas n’envoyer qu’une grande image et comme ça plus de problème de mise en page ». En effet, je trouve parfois ce genre d’e-mailing publicitaire… quand je purge ma boite spam. Je vous déconseille donc cette pratique pour trois raisons principales :

  1. La première c’est qu’un mail avec une image comme seul contenu aura du mal à passer la barrière du filtre anti-spam, nous reparlerons d’ailleurs plus loin de ces derniers,
  2. Si par magie votre mail arrive à son destinataire, vous aurez sans doute constaté que les lecteurs de mails bloquent souvent les images, ou du moins, ne les chargent pas tant que vous n’avez pas cliqué sur le bouton prévu à cet effet. Si votre email n’est constitué que d’une image, votre destinataire ne verra absolument rien tant que celle-ci ne sera pas chargée, c’est quand même dommage,
  3. Dernier point, dans le meilleur des cas, tout se passe bien, votre destinataire reçoit votre email et l’image s’affiche. Vous êtes limités par le nombres de liens. Une seule image signifie n’avoir qu’un seul lien, sur quoi d’autre voudriez-vous appliquer ce dernier ?

Je pense que la démonstration est convaincante. Dans le cas contraire, je ne peux plus rien pour votre salut :-| .

Dans les détails

Doctype et head

On va commencer doucement par quelque chose d’assez simple et épuré. Simple parce qu’il s’agit simplement de mettre un doctype adéquat. Le doctype c’est cette balise qui précède la balise head et qui vient préciser avec quel type de document on travaille (en l’occurence HTML), et la version que l’on utilise. J’ai eu quelques problèmes avec certains doctypes, donc je recommande le XHTML transitionnel 1.0.

Épuré parce que la balise head ne contient rien. J’y place quand même une balise title, mais elle ne sert pas à grand chose, c’est au choix. Si certains ont fait des tests et ont des retours d’expériences à ce sujet, je suis preneur. En résumé, voici à quoi ressemble le début de mon template :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> 

<title>Vidal : une medecine douce et efficace anti-douleurs</title>
</head>

Vous constatez qu’il n’y a ici aucun lien vers un quelconque fichier CSS. Comme je l’ai mentionné plus haut, le CSS sera inline. Par ailleurs, les CSS ne doivent surtout pas figurer avant la balise body comme il est possible de le faire sur le web. Les raisons sont assez simples, d’une part, le client mail n’ira pas forcement charger votre fichier CSS (s’il s’agit d’un lien vers une feuille de style), c’est donc problématique, de plus les clients webmail sont déjà dans une page web, afficher votre balise head amènerait la page à avoir deux balises head, avec deux spécifications différentes, deux titres etc, ce qui pose de sérieux problème de compatibilité et de syntaxe. Dans ces cas là, tout ce que contient votre document jusqu’à l’élement body sera souvent supprimé ou mis en commentaire. Donc si vous comptiez mettre des choses tels que des styles (avec la balise style) ou autre là dedans, ils ne seront pas pris en compte.

Les CSS

Au niveau des CSS, il n’y a pas grand chose à dire hormis le fait qu’elles ne sont pas bien supportées. Je le répète donc, n’imaginez pas employer des propriétés CSS3, des float, etc. Il va falloir vous astreindre au strict minimum : width, height, margin, padding, border, font-family… Je ne vais pas tout énumérer, mais cantonnez-vous aux grands classiques. En ce qui concerne les tailles et dimensions, laissez tomber les tailles variables telles que % ou em, utilisez des valeurs en pixels.

De surcroit, évitez d’utiliser les raccourcis tels que font ou background, spécifiez plutôt chaque chose séparément, avec font-family, font-size, background-color, background-repeat etc.

En outre, comme je l’ai rapidement abordé plus haut, il faut privilégier les CSS inline – bien qu’il soit tout de même possible de faire usage de la balise style – il s’avère judicieux de placer les styles toujours au plus prêt des éléments auxquels ils s’appliquent, c’est à dire au sein même de la balise html de l’élément en question, y’a pas qu’en politique qu’il faut décentraliser ! N’ayez pas peur d’être redondant, même si vous avez déjà précisé un style avec la balise style juste après l’ouverture de body, reprécisez-le dans la balise HTML de l’élément concerné. Voilà à quoi se résume ma déclaration CSS globale :

<body>

<style>body{width:650px; height:auto; text-align:center; margin:auto; font-size:16px; font-family:Arial, Helvetica, sans-serif;} 
img{margin:0; padding:0;} 
table{border-collapse:collapse;}</style>

Le html et les tableaux

Je l’ai déjà dit, on va devoir bouffer du tableau. Pour rappel, un tableau en HTML se compose des balises table, mais ça, je pense que c’est bon. On va néanmoins rappeler comment faire la mise en page avec les tableaux.

Ici, avant de se lancer dans le code à proprement parler, essayons de nous poser deux minutes, et réfléchissons à la manière d’organiser les choses. Normalement, vous avez votre design en mode image, qui sort fraichement de photoshop ou whatever, et il va s’agir de découper tout ce petit monde de manière judicieuse afin d’avoir le moins d’images possible, et surtout que le maximum de texte soit en texte et non en image. Attention, je ne veux pas dire par là avoir de grandes images au lieu de plusieurs petites, non, je veux dire, inutile d’utiliser une image à un endroit où il suffit d’avoir un texte avec un background-color.

bien découper les images pour un contenu coherent
Découpage du mailing d’Alphapole pour s’adapter aux tables et avoir le moins d’images possibles

Une fois notre schéma de découpe en tête, on conçoit tout de suite mieux comment va se présenter notre code. Ici, notre header n’est constitué que d’une seule image, il nécessitera donc une ligne de tableau constituée d’une seule colonne uniquement. En dessous en revanche, nous avons sur la gauche l’image du dictionnaire Vidal et sur la droite quatre petits paragraphes de texte.

Concrètement, j’ai découpé le tableau en sept colonnes. La première image, le header, est donc constitué d’une ligne de sept colonnes de large (il faut utiliser la propriété colspan='x' pour fusionner plusieurs colonnes). En dessous, l’image de gauche est logée sur une seule ligne et dans une colonne de quatre lignes de haut, afin de pouvoir placer sur sa droite quatre lignes avec les paragraphes de texte (pour fusionner des lignes on utilisera rawspan='x'). Enfin, les paragraphes de texte quant à eux, se voient attribuer une ligne de haut et six colonnes de large. On arrive donc à une largeur de 6+1=7, qui est la même que celle attribuée à notre image de header. Le compte est bon !

C’est somme toute assez simple finalement. Il s’agit ensuite de jouer avec un peu de CSS. J’ai par exemple appliqué un background-color aux quatre lignes de paragraphe, ainsi qu’un background-image afin d’obtenir la petite ombre qui constitue le bord droit.

De manière plus générale, il vous faudra donc jouer avec les propriétés des tableaux telles que :

  • rawspan et colspan,
  • border='0',
  • cellspacing='0' et cellpadding='0',
  • align='left' ou right ou center,
  • valign='top'

Dans la majorité des cas, mis à part rawspan et colspan, les valeurs pour les bordures, les paddings et les margins sont à 0 puisqu’on ne désire pas les rendre visible. Quoi qu’il en soit, il peut être utile de mettre border='1' pendant le développement, ça permet de mieux visualiser comment s’agence le tableau – comme on le constate dans l’image ci-dessus. Voilà un petit bout de code pour l’exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> 

<title>Vidal : une medecine douce et efficace anti-douleurs</title>
</head>

<body>

<style>body{width:650px; height:auto; text-align:center; margin:auto; font-size:16px; font-family:Arial, Helvetica, sans-serif;} img{margin:0; padding:0;} table{border-collapse:collapse;}</style>
<div style="width:605px; height:auto;">
<p>Si cet email ne s'affiche pas correctement, affichez-le <a href="http://www.alphapole.com/emailing-pastilles/template-emailing.html">dans votre navigateur</a>.</p>

<table border="1" cellspacing="0" cellpadding="0" width="600" style="text-align:center; font-size:16px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; border-collapse:collapse;">
<tr style="line-height:0;">
<td colspan="7" cellspacing="0" cellpadding="0" align="left" style="line-height:0;"><a href="http://www.alphapole.com/emailing-pastilles/pastilles-landing.php"><img style="margin:0; padding:0; border:none; line-height:0;" src="http://www.alphapole.com/emailing-pastilles/images/header_orange.jpg" width="600" height="255" alt="la magnetotherapie pour soulager les douleurs"/></a></td>
</tr>

<tr>
<td rowspan="4" cellspacing="0" cellpadding="0" bgcolor="63bbdf" align="left"><a href="http://www.alphapole.com/emailing-pastilles/pastilles-landing.php"><img style="margin:0; padding:0; border:none; line-height:0;" src="http://www.alphapole.com/emailing-pastilles/images/vidal.jpg" width="135" height="171" alt="les pastilles physiomag figurent au vidal des pharmaciens"/></a></td>

<td colspan="6" align="center" cellspacing="0" cellpadding="0" bgcolor="63bbdf" style="background-image:url(http://www.alphapole.com/emailing-pastilles/images/bord-droit); background-position:right; background-repeat:no-repeat; font-size:18px; font-weight:bold">Une m&eacute;decine douce reconnue par le Vidal !</td>
</tr>

<tr>
<td colspan="6" align="left" cellspacing="0" cellpadding="0" bgcolor="63bbdf" style="background-image:url(http://www.alphapole.com/emailing-pastilles/images/bord-droit); background-position:right; background-repeat:no-repeat;">&bull; Pastilles magn&eacute;tiques Physiomag&reg; : soulagent sans les effets secondaires des anti-inflammatoires,</td>
</tr>

<tr>
<td colspan="6" align="left" cellspacing="0" cellpadding="0" bgcolor="63bbdf" style="background-image:url(http://www.alphapole.com/emailing-pastilles/images/bord-droit); background-position:right; background-repeat:no-repeat;">&bull; Micro-pastilles Physiomag&reg; pour points d'acupuncture et petites articulations...</td>
</tr>

<tr>
<td colspan="6" align="center" cellspacing="0" cellpadding="0" bgcolor="63bbdf" style="background-image:url(http://www.alphapole.com/emailing-pastilles/images/bord-droit); background-position:right; background-repeat:no-repeat;">Efficacit&eacute; de la magn&eacute;toth&eacute;rapie reconnue par<br/> plusieurs &eacute;tudes cliniques</td>

Il se peut que vous ayez remarqué certaines choses pour le moins étranges. J’applique les styles CSS margin et padding en plus des attributs cellpadding et cellspacing. Dans la même logique que ce que j’expliquais un peu plus haut, il ne faut pas avoir peur d’être redondant. Certains clients prendront plus facilement en compte ces attributs html que les CSS, donnons leur donc les deux, ça ne coûte rien.

En outre, vous avez peut-être constaté que j’utilise une div pour faire office de conteneur. Sans aller jusqu’à dire que les div sont à proscrire, mieux vaut quand même en faire usage avec parcimonie. On pourra palier à ce problème en incluant des tableaux dans d’autres tableaux. En revanche, les span quant à elles, sont plutôt bien supportées, pas de problème de ce côté là donc.

Les images

Il n’y a rien d’extrêmement complexe à appréhender concernant les images. Le plus important à retenir est qu’il faut impérativement placer les images sur un serveur, avec dans votre mail, un lien absolu pointant vers les images sur ce serveur. Dans le cas contraire, vous vous rendrez de toute manière compte assez rapidement que quelque chose ne va pas.

Bien que je ne l’ai pas fait dans l’email d’alphapole, il est parfois judicieux d’utiliser la propriété background de l’élément table en lieu et place du background-image CSS. Pensez à faire un test si vous rencontrez des difficultés.

Il peut arriver qu’une image découpées en plusieurs morceaux pour être répartie dans plusieurs cellules présente des défauts d’affichage. Dans ce cas là, essayez de créer une seconde table, en dessous de la première, qui ne contiendra qu’une background-image. Cela vous permettra de conserver votre image en un seul morceau.

Dernier point concernant les images, pensez à renseigner les attributs alt, height et width de ces dernières. Tandis que alt permettra – à l’instar de ce qui se fait dans les navigateurs – d’afficher une description en cas de non chargement de l’image, les attributs height and width améliorent le rendu dans certains clients mails. Il serait donc idiot de s’en priver.

Les polices

Incorporer des polices sur le web n’est pas toujours chose aisée, alors vous vous doutez bien que le @font-face n’est absolument pas envisageable dans un mail. De ce fait, en ce qui concerne les polices, il faudra se limiter aux plus courantes pour avoir la certitude d’un support correct. À savoir : helvetica, arial, tahoma et trebuchet. En outre, pour éviter de se faire passer en spam, il faudra éviter au plus de mixer différentes polices et tailles de polices. Bien qu’il n’y ait pas de règle intengible à ce sujet, je trouve sage de ne pas dépasser trois polices et tailles différentes.

La question du spam

On entend souvent les SEO dirent qu’ils rédigent pour le référencement (ne lançons pas de troll là dessus, ça n’en vaut pas la peine ;) ), dans un mailing, le but n’est pas de se faire bien positionner dans Google, mais bien de passer sous la barre du fameux spamcheck. Ça permettra ainsi à votre mail d’arriver directement dans la boite de réception de son destinataire, ce qui est, admettons-le, plutôt mieux que d’atterrir dans la spambox.

Pour poursuivre mon analogie avec le référencement et Google, il n’y a ici pas de recette miracle, tout repose sur l’empirisme. On peut étudier comment fonctionne la note spammassassin, quels sont les critères qui font passer les mails en spam, puis reste à expérimenter. Cependant, les pratiques permettant de passer entre les mailles des détecteurs de spams concernent beaucoup les conditions d’expéditions du mail (configuration du serveur, nom de domaine etc.) de ce fait, cela dépasse un peu le scope de cet article. Néanmoins, pour ne pas vous laisser sans réponse à ces questions primordiales, je vous laisse avec un petit article qui synthétise tous les aspects liés aux spams et aux filtres anti-spam.

Récapitulons :

  • Le code HTML
    • Utilisez le doctype du XHTML transitionnel 1.0,
    • Ne placez rien d’important dans la balise head, elle risque de sauter,
    • Privilégiez au maximum les tableaux,
    • Limitez l’usage des balises div,
    • Faites un usage sans limite des attributs rawspan, colspan, border, align, valign…
  • Le CSS
    • Utilisez des valeurs en pixels,
    • Proscrivez les raccourcis CSS,
    • N’ayez pas peur de répéter les styles dans chaque nouvelle balise td, tr, p etc,
    • Préférez l’utilisation du CSS inline plutôt que de la balise « style »,
  • Les images
    • Pensez à héberger les images sur un serveur,
    • Vous pouvez utiliser la propriété background des tables au lieu de backgroud-image du CSS,
    • Il est possible de créer une table ne contenant qu’une background image et de l’insérer sous la table renfermant le contenu,
    • Pensez à renseigner les attributs alt, width et height
  • Les polices
    • Limitez-vous aux polices les plus courantes
    • Evitez de trop mixer différents types de polices et tailles de polices

Pour les questions, les précisions et les remarques, les commentaires sont là pour ça. Il ne vous reste maintenant plus qu’à vous mettre au boulot, bossez bien !

Déjà 5 réponses, rejoignez la discussion !

  • Aurel

    dit  :

    Merci pour cette article intéressant.

    C’est vraiment une plaie de développer un emailing surtout pour Office 2007-2010 qui se permet de lire l’HTML avec le moteur de word….

    De plus il est vrai que pratiquement tous les webmails zappe la balise head pour aller lire la body.

    J’ai remarqué aussi que les background color dans la balise body ne sont pas toujours lu aussi.

    Ce qui est souvent pénible avec Outlook, c’est les spacer.gif que photoshop crée lors du découpage, une solution pour ça ? Car ça fout un bordel pas possible dans l’email.

    PS : si les industriels des clients de messageries (web et local) lisent mon post, soyez gentil demandez à Thunderbird de vous filer son moteur de rendu, le monde entier vous dira merci.

  • Buzut

    dit  :

    Salut Aurel

    oui photoshop créé un spacer.gif qui peut s’avérer assez contraingnant. La solution pour éviter ça ? Ne pas utiliser l’outil tranche de photoshop en lui faisant directement créer le design. Tout faire à la main à la place. J’utilise simplement l’outil recadrage (C) et j’enregistre chacune des images obtenues.

    Certes c’est un peu plus long et fastidieux, mais le résultat est meilleur !

    En ce qui concerne les clients, c’est certain qu’ils devraient intégrer de vrais moteurs de rendu. Celui de Thunderbird est bien, celui de Mail d’apple marche très bien aussi (webkit inside ?). En tout cas, outlook pourrait franchement emprunter le moteur de IE et celui de thunderberd est en open source donc bon, mis à part un manque de bonne volonté, je ne vois pas ce qui les retient…

  • John

    dit  :

    « Il n’y a rien d’extrêmement complexe à appréhender concernant les images. » Je ne suis pas d’accord là ! Outlook 2007 et supérieur n’interprètent pas les background-image, background-position et background-repeat, ni même la propriété « background » de l’élément table, donc impossible d’avoir ce dégradé bleu sur le coté de ta maquette, ou alors en simple image dans une cellule, mais pas en fond de cellule. Je bloque actuellement sur l’intégration d’une maquette que j’ai réalisé avec des dégradés et des bords arrondis. L’image en fond de cellule m’éviterait justement d’avoir a découper mon rectangle arrondi en 2 images (et faire 2 cellules), et du coup je peux aussi oublier l’usage d’un dégradé en fond de cellule. Damned Outlook, cela fonctionne bien sur hotmail, gmail, et le mail d’Apple !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *