Quand on crée un site web, on est souvent amené à développer des templates pour les différents e-mails émis du site à son administrateur ou à ses utilisateurs. Ces e-mails peuvent par exemple contenir les informations renseignées dans un formulaire de contact ou un formulaire d’inscription à une newsletter, ou encore pour notifier d’un nouveau commentaire sur un article. Dans tous les cas, il est important pour l’image de marque de l’entreprise, d’émettre des e-mails clairs, bien conçus et dont le rendu soit homogène sur un maximum de clients de messagerie.
Récemment, nous avons développé des e-mails en HTML pour le site d’un de nos client qui comptait plusieurs formulaires. Nous avons pris le temps de parcourir la toile à la recherche d’informations sur le développement des e-mails en HTML, en fonction des clients de messagerie utilisés. Et il y a un détail, qui paraît peut-être minime, mais sur lequel nous avons passé un peu plus de temps : styliser les liens des e-mails en HTML.
Dans cet articles, nous vous donnerons les bases pour intégrer un e-mail en HTML, puis nous ferons un focus sur les liens et leurs propriétés de style en fonction des clients de messagerie.
Les bases pour intégrer un e-mail en HTML
Ce qu’il est important de rappeler avant de se lancer dans l’intégration d’e-mails en HTML, c’est qu’à l’heure actuelle, les clients de messageries ne sont pas aussi avancés que les navigateurs internet en termes de rendu HTML.
Par exemple, on ne peut pas lier de feuille de style à un e-mail. Le style des éléments de l’e-mail doit être déclaré dans le fichier HTML. Pour cela, il existe plusieurs possibilités :
- Utilisez une balise
<style></style>directement dans l’en-tête de l’e-mail (balise<head></head>) et disposez y les éléments de CSS :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Le style ici */
p {
color: red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<p>Le paragraphe est coloré en rouge.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
- faites du style inline, c’est à dire assignez à chaque balise HTML ses propres propriétés CSS via l’attribut
style:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de HTML contenant du style inline</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<p style="color:red;">Le paragraphe est coloré en rouge.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Chez Com to Code, nous privilégions le style inline afin d’éviter tout souci avec les clients de messagerie qui n’interprètent pas les balises
<style></style> placées dans l’en-tête des documents HTML, mais il arrive que nous utilisions tout de même cette méthode dans certains cas. En réalité, tout dépend des besoins techniques. Pour obtenir un rendu similaire sur un maximum de clients de messagerie (et notamment sur les clients Office), nous utilisons ce qu’on appelle les commentaires conditionnels. Il permettent de dire à des clients comme Outlook de prendre en compte du style qui n’est pas inline.
Voici un exemple de commentaire conditionnel :
<!--[if mso]>
<style type="text/css">
p {
font-size: 15px !important;
}
</style>
<![endif]-->
Il faut toujours penser à finir la définition de la propriété par un !important afin qu'elle outrepasse les propriétés déclarées en inline.
Vous pouvez même aller plus loin en précisant la version pour la prise en compte de votre CSS, par exemple :
<!--[if mso 12]>Pour Outlook 2007<![endif]-->
<!--[if mso 14]>Pour Outlook 2010<![endif]-->
Ces exemple ne sont pas les seuls commentaires conditionnels qu’il existe, on peut aussi en trouver pour Internet Explorer notamment.
La différence de rendu entre les clients de messagerie et les navigateurs web signifie aussi que certaines propriétés de style et balises HTML que vous utilisez au quotidien lorsque vous développez des pages web ne sont pas interprétées par certains les clients de messagerie. Donc contrairement aux pages web, il est recommandé de construire vos e-mails en HTML sous forme de tableaux, avec des colonnes et des cases contenant les différents éléments du contenu.
Nous avons donc répertorié pour vous quelques ressources qui pourraient s’avérer utiles lors de la création de vos e-mails en HTML :
- The Ultimate Guide to CSS : un guide référençant l’ensemble des propriétés CSS existantes ainsi que les différents clients de messagerie sur lesquelles elles sont ou non interprétées.
- HTML Email Boilerplate : un exemple de structure de base pour les e-mails en HTML contenant des explications sur quelles balises / propriétés CSS utiliser et dans quel cas.
- CSS inliner : un outil permettant de générer automatiquement le style inline sur vos e-mails
Styliser les liens des e-mails en HTML
Les liens présents dans vos e-mails sont des éléments importants pour générer du trafic sur votre site web. Les graphistes / web-designers font souvent en sorte qu’ils soient plus impactants visuellement que les autres éléments de contenu, pour inciter le lecteur à cliquer dessus (boutons colorés, transparents ou avec bordures, plus ou moins hauts, larges etc.).
Mais lorsqu’il s’agit de les intégrer dans un e-mail en HTML, la tâche peut parfois s’avérer délicate, car comme nous l’évoquions plus haut, les clients de messagerie n’interprètent pas tous les mêmes propriétés CSS.
Par exemple le client de messagerie Outlook ne reconnaît pas les balises
<div>, ce qui rend toutes les spécifications de remplissage telles que
padding ou
margin inutilisables. Mais alors comment faire lorsque vous devrez intégrer un lien ayant l’apparence d’un bouton avec de l’espace entre le texte et les bordures et / ou le fond qui le composent ?
Il existe deux propriétés CSS permettant de configurer des
padding sur le client de messagerie Outlook :
- La première est
mso-padding-alt. Elle permet d’outrepasser la propriétépaddingqui n’est pas interprétée par Outlook. Lorsque vous aurez besoin de définir un espacement sur les liens de vos e-mails, vous pourrez donc ajouter cette propriété en plus de la propriétépaddingtraditionnelle en y mettant les mêmes valeurs. - Si votre lien comporte des bordures et un fond coloré, vous vous rendrez vite compte que la seule propriété
mso-padding-altne suffira pas pour le styliser. En effet, Outlook n’interprétera pas la couleur de fond de votre bouton et n’affichera que les bordures de celui-ci. Il vous faudra donc ajouter la propriétémso-border-altpour pallier à ce problème.
Voici par exemple lien comprenant un fond et des bordures, qui fonctionne sur Outlook et les autres clients de messagerie :
<a href="#mon-lien"
target="_blank"
title="Le titre de mon lien"
style="color: #333333; border: 3px solid #333333; text-decoration: none; padding: 12px 15px; mso-padding-alt: 0px; mso-border-alt: 15px solid white; text-transform: uppercase; font-weight: bold; display: inline-block; text-align: center; width: auto; max-width: 100%; background-color: white;">
Mon lien
</a>
Nous avons combiné les propriétés reconnues par la plupart des clients de messagerie à celle reconnues par Outlook afin d’obtenir un lien ressemblant à un bouton avec fond blanc et bordures grises. A vous maintenant d’adapter ce code en fonction du rendu de vos liens !