Voici les règles de bonnes pratiques à respecter pour s'assurer que votre ficher HTML marche correctement et qu'il s'affiche correctement dans la boîte de réception de vos destinataires.

Les liens

Toujours ouvrir les liens dans une autre page

Lorsque l’utilisateur clique dans votre e-mail, il est intéressant de le forcer à ouvrir une nouvelle fenêtre. Cela permet, lorsque l’utilisateur ferme la fenêtre qui vient d’être ouverte, de le ramener sur votre e-mail.

Comment :

Ajouter l’attribut target=”_blank” sur votre balise <a href="#" />

Example:

                    <a href=”http://www.actito.net"
                      target=”_blank”>actito.net</a>
                  

Définir une couleur sur le lien

La couleur par défaut des liens est le bleu web. Il est possible de modifier cette couleur.

Comment :

Ajouter l’attribut style=”” sur votre balise <a href="#" /> avec la propriété ‘color’ Ajouter la balise <span> autour du texte du lien (certains clients mails écrasent les propriétés de couleurs du lien mais pas du <span>).

Example

                    <a target="_blank" href="http://www.actito.net" style="color:#336699">
                  
                     <span style="color: #336699"> actito.net </ span>
                  
</a>

Définir un 'title' sur le lien

Afficher un texte explicatif au survol du lien.

Comment :

Ajouter l’attribut title=”” sur votre balise a avec le texte explicatif. Celui-ci sera également utilisé pour préremplir les informations de tracking au niveau d'Actito.

Example

                    <a target="_blank" href="http://www.actito.net" title="My link description">
                  
                     <span style="color: #336699"> actito.net </ span>
                  
</a>

Les images

Fixer la largeur des images

Pour garantir un visuel correct de l’e-mail, et pour éviter que les textes de remplacement sur certains clients mails ne déforment pas le lay-out, il faut fixer la largeur des images

Comment :

Ajouter l’attribut ‘width’ sur la balise <img />

Example

<img src"path" width="200"/>

Mettre l'attribut 'alt' sur les images

Pour permettre une lecture facile pour les malvoyants, il est plus que conseillé de mettre un texte de remplacement sur les images. Ce texte sera affiché dans l’e-mail si l’utilisateur n’accepte pas les images. Il permet également d'augmenter le ratio texte/image, ce qui permet de diminuer les points de spam. Pour la lecture sur mobile il est primordial de les utiliser car cela permet de générer de l’interaction car par default les images sont bloquées sur les mobiles.

Comment :

Ajouter l'attribut alt sur la balise <img src="" />

Example

<img src"path" alt="My alternative text"/>

Mettre les images en 'display block'

Ici, les display:block; sont utilisé pour éviter la génération d'espace blanc en dessous

Comment :

Ajouter l'attribut 'style' avec la propriété 'display:block' sur la balise <img />

Example

<img src"path" style="display:block;" />

Mettre l'attribut 'title' sur les images

Pour permettre une lecture facile pour les malvoyants, il est plus que conseillé de mettre un texte de remplacement sur les images. Ce texte permet également d'augmenter le ratio texte/image, ce qui permet de diminuer les points de spam.

Comment :

Ajouter l'attribut title sur la balise <img />

Example

<img src"path" title="My text remplacement"/>

En général

Les attributs des balises devront être mis avec des guillemets ""

L’idée ici est d’uniformiser le code

Comment :

Mettre les attributs entre des guillemets ""

Example

<img src="path" style="display:block;" />

Utiliser le doctype xhtml 1.0

Pour uniformiser le rendu de l'e-mail dans la plupart des clients mails, nous conseillons fortement de placer en haut de votre e-mail un doctype

Comment :

Mettre le doctype avant l'ouverture de la balise html.

Example

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

Utiliser des 'table' plutôt que des 'div'

Les table permettent d'assurer un bon rendu visuel des e-mails. Certains clients mails ont du mal à supporter les float, margin, padding,…

Comment :

Utiliser <table> … </table>

Example

                    <table>
                  
                      <tr> <td> My text </td>
                      </tr>
                  
                    </table>

Indenter correctement le code

Pour permettre une relecture facile du code, nous conseillons de toujours bien indenter votre code html.

Comment :

Effectuer un retrait positif pour chaque enfant et un retrait négatif pour chaque parent. Ainsi, le couple balises fermantes et ouvrantes seront toujours à la même hauteur.

Fixer la taille des 'td' et des 'table

Pour assurer un rendu visuel sur la plupart des clients mails, il faut toujours fixer la taille des td et des table.

Comment :

Mettre l'attribut 'width' sur la balise avec une valeur sans spécifier le format.

Example

<td width="200px"> </td>

Utiliser une table de 100% pour avoir une couleur de fond sur votre e-mail

De nombreux clients mails ne tiennent pas compte des couleurs de fond définies dans les css ou sur le ‘body’. Pour contourner ce problème, vous pouvez créer une table de 100% avec un attribut bgcolor dessus.

Comment :

Créer une table de 100% autour de votre e-mail et en y plaçant la propriété bgcolor dessus.

Example

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000">
                  
 <tr>

                     <td width="100%" bgcolor="#000000">
                  
                     Rest of the email
                  
                     </td>
                  
                     </tr>
                  
                    </table>

Créer un espace entre deux zones horizontale

Afin d’assurer une uniformité du rendu sur les différents clients mails, les espaces entre 2 zones doivent être créés grâce à une table.

Comment :

Pour créer un espace entre 2 zones, il faut créer une ligne vide dans une ‘table’ avec les attributs ‘height’ et ‘line-height’ définis. Les deux attributs sont importants car certains clients mails ne tiennent compte que de l'un ou l'autre. Utiliser des <br /> pour créer des grands espaces entre les lignes n'est pas conseillé, car la hauteur d'un <br /> peut différer d'un client mail à l'autre.

Example

<tr>

                     <td valign="top" align="left" height="10" style="font-size:1px; line-height:10px;">
                  
                     </td>
                  
</tr>

Mise en forme du texte dans les <td>

Pour habiller du texte situé dans un <td>, il faut ajouter un attribut style sur la balise. Il faut absolument répéter toutes les propriétés d'habillage de texte car certains clients mails ne tiennent compte que de l'un ou l'autre.

Comment :

Ajout sur tous les <td> contenant du texte les propriétés css suivantes :

font-size
font-family
color

Exmaple

<td valign="top" align="left" style=" color: #336699;"> The text of td </td>

Utilisation de code couleur

It is possible to change the color of your text in your html.

How to do it?

Add the property color: xxxxx; in the style attribute.

Example:

                    <td valign="top" align="left" style=" color: #336699;">
                  
                     The text of td
                  
</td>

Convertir les caractères spéciaux en entité Html

Pour assurer l'affichage correct des caractères spéciaux et accentués, il faut les convertir en entité html.

Comment :

Le é deviendra é Voir le lien suivant : w3schools

Example

été = été

Utilisation de font spécifique

Pour garantir un affichage correct du rendu des polices, il faut utiliser uniquement des font web. L'affichage correct d'autres fonts web ne peut pas être garanti.

Comment :

Voici une liste non-exhaustive des fonts web disponibles :

Verdana
Arial
Courrier

Voir le lien suivant pour avoir la liste complète W3C : w3schools.

Utiliser la reset.css dans le head de l'e-mail

Pour résoudre certains problèmes d'affichage sur certains clients mails et permettre un meilleur affichage sur les clients mobiles il faut insérer les éléments de css ci-dessous.

Comment :

Ajout ce code dans un tag style dans le head

Example

                    <head>
                  
                     <style type="text/css">
                  
                     . ReadMsgBody {width: 100%;}
                  
                     . ExternalClass {width: 100%;}
                  
                      body {-webkit-text-size-adjust: none;-ms-text-size-adjust:
                      none;}
                  
                     </style>
                  
                    </head>

Définition de la largeur de l'e-mail

Idéalement, la largeur de l'e-mail devrait se trouver entre 550 et 730px pour permettre l'affichage dans la majorité des clients et browsers mails.

Test votre e-mail

Le meilleur moyen de valider le bon fonctionnement de votre e-mail, n'hésitez pas à le tester dans plusieurs outils tel que litmus.com ou e-mail on acid.

Comment :

Ces deux outils possèdent une version gratuite limitée, mais l'abonnement mensuel de base n'est pas fort onéreux.