Guide d'intégration des courriels HTML

Un article de Courrielleur.

Jump to: navigation, search

Modèle:Guide d’intégration des courriels HTML

Sommaire

[modifier]

Contexte

On privilégie l’usage des courriels HTML pour les envois marketing. En effet, le HTML permet d’organiser graphiquement l’information de manière à ce qu’elle soit structurée et plus agréable à l’oeil. Le problème est que les logiciels avec lesquels les destinataires consultent leurs courriels sont variés et supportent le HTML différemment. De ce fait, l’affichage des courriels HTML est difficile à contrôler. Le guide suivant s’adresse aux intégrateurs HTML afin qu’ils puissent adapter leur code et ainsi obtenir un affichage uniforme pour tous les destinataires.

[modifier]

Contraintes

[modifier]

Design et accessibilité

À cause des limitations techniques, le codage des courriels HTML est loin d’aller dans le sens du Web sémantique, c’est-à-dire, utiliser les feuilles de style et structurer l’information pour la rendre le plus accessible possible. Ces courriels pourraient être difficiles à lire par des gens qui font bloquer par défaut l’affichage des images de leurs courriels et par ceux qui utilisent des logiciels de lecture spécialisés à cause de limitations physiques. Donc, ces courriels doivent être accompagnés d’une version textuelle.

Le multipart permet d’inclure à l’intérieur d’un même courriel une version HTML et texte. De cette façon, la version texte s’affiche seulement si le logiciel de courriels du destinataire ne supporte pas le HTML ou est configuré pour un affichage texte.

[modifier]

Les services de courriels web gratuits

Plusieurs destinataires lisent leurs courriels en utilisant des comptes courriels Web gratuits, tels que Hotmail, Yahoo Mail ou Gmail. Ces services affichent les courriels dans le navigateur Web de l’usager. Comme le code HTML du courriel est affiché à l’intérieur de celui de la page, cela tronque une partie du code du courriel afin qu’il n’entre pas en conflit avec le code de la page, rendant ainsi l’affichage du message difficile. Parmi le code tronqué, notons :

  • Tout ce qui se trouve dans entre les balises <head></head>,

effaçant ainsi toutes les feuilles de style internes ou externes;

  • La balise <body>, incluant tous ses attributs;
  • Les Javascripts.
[modifier]

Recommandations

Voici une liste de recommandations dans le but d’assurer un affichage le plus uniforme possible pour tous les destinataires :

[modifier]

Héberger les images sur un serveur externe

Afin de diminuer le poids du courriel pour l’usager et la bande passante lors de l’envoi, il faut héberger les images sur un serveur Web et y référer par un URL. Cela évite que le courriel soit identifié comme un pourriel à cause des fichiers attachés.

[modifier]

Utiliser les adresses absolues

Comme le message est lu à l’extérieur de la page Web, tous les liens HTML doivent être définis par des URL absolus et non pas relatifs afin d’assurer leur validité.

[modifier]

Le code doit être valide selon le W3C

Vérifier le code avec le validateur du W3C (http://validator.w3.org). Un code invalide diminue l’uniformité de l’affichage et augmente les chances que le courriel soit rejeté par un filtre anti-pourriel.

[modifier]

Éviter les feuilles de style

Les feuilles de style ne devraient pas être utilisées car le code entre les balises <head></head>, là où est située la feuille de style, est tronqué par les services courriels Web gratuits et n’est pas toujours bien supporté par certains logiciels de courriels.

Chaque élément du texte doit être défini par un style (inline) : 

<table width=”400” cellspacing=”0” cellpadding=”0”>
 <tr>
 <td style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 150%; color: red”>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 <p>Vivamus ut sem. Fusce aliquam nunc vitae purus.</p>
 </td>
 <td style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; text-transform: 
 uppercase; color: black”>Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>
 </tr>
 </table>
</code>
Dans le même ordre d’idées, il est préférable de faire la mise en page à l’aide de la balise pour obtenir un affichage uniforme. Les styles utilisés pour la mise en page ainsi que le positionnement étant généralement mal supportés par les logiciels de courriels.
[modifier]

Ne pas définir d'attributs à la balise <body>

Cette balise est généralement supprimée par les services de courriels Web gratuits. Ainsi, il faut éviter

de donner des attributs tels que bgcolor ou background car ceux-ci seront ignorés. Si vous souhaitez définir une couleur ou une image de fond, il est préférable de créer une balise
</code> qui englobe tout le code et applique les attributs désirés à cette balise.
[modifier]

Définir une taille pour le texte

Hotmail utilise par défaut la taille de texte 11 px, Yahoo Mail 12 px et Gmail 16 px. Ainsi, il est préférable de définir une taille de texte si vous désirez que l’affichage soit uniforme.

[modifier]

Définir les valeurs des attributs alt et title de chaque image

Pour les destinataires ayant des connexions à basse vitesse, l’absence d’attributs alt et title peut faire que votre courriel se retrouve dans la poubelle avant même que les images soient téléchargées. Certains destinataires font bloquer par défaut l’affichage des images de leurs courriels. Dans ces cas, ceux-ci doivent activer manuellement l’affichage des images. Ainsi, il est préférable de limiter l’utilisation d’images lors de la création de l’aspect esthétique du courriel car si celles-ci contiennent des informations importantes, elles pourraient ne pas être affichées.

Définissez des valeurs pour les attributs alt et title. Ces derniers s’afficheront à la place des images, ce qui facilitera la compréhension de votre message et incitera les destinataires à activer l’affichage des images.

[modifier]

Utiliser les balises <br> plutôt que <p>

Le nombre de retour de lignes généré par la balise <p> varie selon les logiciels de courriels utilisés. Ainsi, il est préférable d’utiliser la balise <br>.

[modifier]

Éviter les Javascripts

Les Javascripts sont désactivés dans la plupart des cas. De plus, ils peuvent augmenter les chances que votre courriel soit considéré comme un pourriel par les filtres. Donc, il est préférable de ne pas les utiliser.

[modifier]

Éviter le DHTML

Le DHTML utilise une combinaison de Javascripts et CSS, des éléments qu’il ne faut pas utiliser.

[modifier]

Éviter le Flash

Tout comme les Javascripts, le Flash est généralement désactivé par les logiciels de courriels.

[modifier]

Éviter les formulaires

Les formulaires à l’intérieur des courriels sont généralement mal supportés. Par conséquent, il est préférable d’envoyer les gens les compléter sur un site Web. Par contre, si vous tenez à leur faire parvenir les formulaires par courriel, il est important de fournir une version alternative.

[modifier]

Définir une largeur maximale

Comme le logiciel de lecture de courriels affiche un menu qui occupe une partie de la largeur de la page, il est préférable de dimin uer la largeur du courriel HTML par rapport à celle d’une page Web. Pour qu’un courriel s’affiche au complet dans un écran 1024 x 768, la largeur doit être limitée à 750 px. Dans le cas d’un écran 800 x 600, il faut limiter sa largeur à 580 px. Donc, nous recommandons de limiter la taille du courriel à 580 px afin d’assurer une lecture optimale au plus grand nombre de destinataires.

[modifier]

Avoir une version web de votre message

Certains logiciels de courriels ont toujours de la difficulté à lire les messages HTML. Ainsi, faire une version Web de votre courriel avec un lien vers celui-ci au haut de votre message permettra, en dernier recours à l’usager, d’afficher correctement votre message dans un navigateur :

  • Si ce message ne s’affiche pas correctement, cliquez ici : http://...
[modifier]

Permettre le désabonnement

Un lien texte explicite est la meilleure façon d’assurer aux abonnés une façon simple de se retirer de votre liste d’envoi s’ils ne désirent plus recevoir vos courriels.

Sources et compléments d’information

Récupérée de « http://courrielleur.com/wiki/Guide_d%27int%C3%A9gration_des_courriels_HTML »