Aller au contenu principal

Respecter les bonnes pratiques

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.

Commentaire :

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

Exemple:

<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.

Commentaire :

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>).

Exemple

<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.

Commentaire :

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.

Exemple

<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

Commentaire :

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

Exemple

<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.

Commentaire :

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

Exemple

<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

Commentaire :

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

Exemple

<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.

Commentaire :

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

Exemple

<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

Commentaire :

Mettre les attributs entre des guillemets ""

Exemple

<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

Commentaire :

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

Exemple

<!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…

Commentaire :

Utiliser <table> … </table>

Exemple

<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.

Commentaire :

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.

Commentaire :

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

Exemple

<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.

Commentaire :

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

Exemple

<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.

Commentaire :

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.

Exemple

<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.

Commentaire :

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

  • font-size

  • font-family

  • color

Exemple

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

Utilisation de code couleur​

Il est possible de changer la couleur de votre texte dans l'HTML.

Comment faire ?

Ajouter la propriété d'attribut color: xxxxx; dans le style.

Exemple

<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.

Commentaire :

Le é deviendra é Voir le lien suivant : w3schools

Exemple

&eacute;t&eacute; = é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.

Commentaire :

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.

Commentaire :

Ajout ce code dans un tag style dans le head

Exemple

<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.

info

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