Lorsque l'on crée un site Web, on est souvent amené à envoyer des e-mails au format HTML. Le format HTML nous permet de personnaliser les e-mails avec la charte graphique de notre site et de les rendre plus facilement reconnaissables par les utilisateurs. On pourrait être tenté de se dire qu'envoyer un e-mail au format HTML n'est pas compliqué, il suffit de prendre le code source et de l'envoyer et le tour est joué ! Dans la réalité les choses ne se passent pas aussi facilement, le principal problème que l'on va rencontrer est un problème de compatibilité.
En effet, les e-mails que vous allez envoyer vont être ouverts de différentes manières, soit à travers un client e-mail installé directement sur la machine qui intégrera un moteur de rendu HTML propriétaire, ou un client e-mail en ligne qui passera vos e-mails dans une moulinette un peu particulière et qui retirera certains attributs HTML.
Le tableau des lamentations
Bien conscients de ce problème, certains essayent de créer un tableau afin de se rendre compte de l'état actuel des compatibilités des différents clients. Le tableau proposé par Campaign Monitor vous donne un aperçu assez rapide de l'étendue des dégâts et on remarque que, suivant les clients mail, les règles sont complètement différentes.
Le style tu n'utiliseras point
La première chose que l'on peut remarquer est l'absence de support des balises <style> et <link> par Gmail. Ce client étant relativement répandu, on ne pourra donc pas écrire de style CSS séparé du code HTML, lorsque l'on voudra styliser un élément il faudra nécessairement utiliser l'attribut HTML style pour mettre les règles CSS en ligne dans nos éléments. Oubliez tout de suite la possibilité d'utiliser des classes ou des sélecteurs CSS pour styliser rapidement vos éléments. Vous devrez systématiquement vous répéter si une règle est réutilisée plusieurs fois. Cependant il existe des outils tels que gulp-inline-css qui peuvent transformer votre HTML en rendant les styles "en ligne".
Au chiotte les float
Un autre point important est l'absence du support des float. Dans une page HTML standard, lorsque vous souhaitez placer deux éléments l'un à côté de l'autre, vous utilisez un float:left. Ce positionnement n'est malheureusement pas compris par les clients e-mail de Microsoft et il faudra donc trouver une solution alternative pour placer ses éléments. La solution la plus simple est de revenir aux bases de l'HTML en utilisant les table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table bgcolor="#343846" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- On travaille avec les tableaux, so 1995 -->
</td>
</tr>
</tbody>
</table>
</html>Resources utiles
Pour vous simplifier la vie voici quelques générateurs qui vous permettront de créer rapidement certains éléments.
Si vous avez d'autres liens, n'hésitez pas à les partager dans les commentaires, je les ajouterais à cette liste.
