Laisser un commentaire

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 d’envoi. Dans un autre article, toujours orienté webmarketing, j’avais expliqué les différentes notions à bien appréhender pour construire une landing page efficace.

Qu’il s’agisse d’un emailing de prospection, d’une newsletter ou encore d’un email transactionnel (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 emails HTML – comme l’indique si bien leur nom – sont écrits en HTML et ont recourt au 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 ? À 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 :

Un peu de framework ?

Comme tout domaine du développement web, l’email n’échappe pas à quelques bons outils permettant de faciliter et d’accélérer notre travail. D’autant plus que développer from scratch pour l’email n’est vraiment pas une partie de plaisir.

Depuis la rédaction de cet article en 2012, quelques clients emails ont intégrés de nouvelles propriétés CSS. Cependant, bien qu’il soit possible d’utiliser des commentaires conditionnels, nous sommes souvent limité par l’élément les moins performant.

Afin de développer vite, je conseille donc l’usage d’un framework :

Dans la suite de cet article, nous allons créer un email from scratch. Que vous vouliez faire de même ou que vous soyez curieux quant au processus, let’s go!

Retour vers le futur

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 le détail

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.

Le CSS

Au niveau du CSS, il n’y a pas grand chose à dire hormis le fait qu’il n’est pas bien supporté. 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.

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 :

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é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;">• Pastilles magnétiques Physiomag® : 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;">• Micro-pastilles Physiomag® 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é de la magnétothérapie reconnue par<br/> plusieurs é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.

La question du spam

On entend souvent les SEO dirent qu’ils rédigent pour le référencement. Dans un emailing, 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. 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

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 !

Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```