Vous êtes à l’aise avec les technologies web, mais débutez en matière de emails HTML? Cet article a pour but de vous sauver bien des tracas.

Pourquoi serait-ce différent de ce que je connais?

Pour être en mesure d’afficher du contenu HTML, les logiciels email comportent un moteur de rendu HTML (tout comme les navigateurs utilisent pour interpréter le code et afficher les pages). Celui-ci est différent pour chacun et souvent limité selon le bon vouloir du logiciel en question. Résultat? Gmail n’aime pas les CSS. Outlook n’aime pas les images de fond. Hotmail veut styliser les titres par lui-même. Et j’en passe.

Comment coder

Évitez les mises en page en div.

Seuls les tableaux sont suffisamment supportés d’un logiciel à un autre pour vous assurer un bon affichage partout.

Ne vous fiez pas aux feuilles de styles.

Les CSS externes sont à bannir complètement. Les CSS intégrées à l’aide d’une balise style en début de code fonctionneront en partie (c’est-à-dire sauf sur gmail et android). Certains logiciels peuvent réécrire les noms de vos classes, ne répondre qu’aux sélecteurs les plus simples, etc. Et pour CSS3, bien, euh, un jour peut-être.

En matière de CSS, une chose fonctionne plutôt bien : les media queries pour les plateformes mobiles (leur support peut varier, mais est assez bon pour en valoir la peine).

Autrement, mieux vaut coder les styles directement sur les éléments concernés.

En savoir plus sur les media queries 

Appliquez vos styles sur les td.

Le padding, surtout, mais aussi les styles de police de caractère par défaut du bloc. Attention : si vous les appliquez à un td qui contient lui-même des tableaux imbriqués, les propriétés ne seront pas héritées par les tableaux de niveau inférieur! Par exemple :

<td style="font-family:Arial;">
<p>Ceci sera du Arial</p>
</td>
<td style="font-family:Arial;">
<table>
<tr>
<td><p>Ceci ne sera pas du Arial dans plusieurs logiciels…</p></td>

Padding et width ne font pas bon ménage.

Si vous spécifiez du padding sur un td, ne lui appliquez pas de largeur. La solution : un tableau imbriqué.

Oui Non
<td valign="top" width="200">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 10px;">…
<td valign="top" width="200" style="padding: 10px;">…

Oubliez les floats.

Ils ne sont pas supportés sur les versions récentes de Outlook (2007 et +). Utilisez plutôt l’attribut html align sur les tableaux et les images.

N’utilisez des images de fond que si elles sont uniquement décoratives.

Par exemple : derrière votre tableau de contenu (n’oubliez pas d’indiquer une couleur de fond pour celui-ci). Plus sur les images de fond

Gardez en tête que vos espacements peuvent varier.

Certains logiciels interprètent mal le margin, plusieurs ignorent le line-height, etc. Soyez flexible.

Les polices ne peuvent être incorporées.

En fait, tout ce qui est ressource externe ne fonctionnera pas bien. Si vous devez utiliser des polices non-web, intégrez-les en images. Mais n’oubliez pas de fournir un texte alternatif équivalent et faites-le avec parcimonie.

Javascript, formulaires, gif animés et états actifs non plus

Eh oui. Même le :hover ne fonctionne pas.

Conclusion

Le code de vos emails sera sans doute long, profondément indenté et parsemé de tableaux. Et vous devrez le tester avec autant de comptes emails que possible. C’est normal.

Si vous devez dire adieu à certains éléments de votre design, rappelez-vous que l’important, c’est que votre email fonctionne et que vous puissiez rejoindre vos lecteurs.

Et n’oubliez pas : keep it simple!

Lire aussi : Designer pour les lecteurs d’emails