• E SYSTEMES LIVE • par Jean-Pierre / Google + • ~ 11 mn

Des bonnes pratiques du HTML pour les emails

Alpha Mail Routage email en nombreVotre solution 100% simplifiée pour le routage et l’envoi de vos emails en nombre
Par E SYSTEMES

La qualité du code HTML d’un email a un impact considérable sur la délivrabilité et l’affichage dans les logiciels de messagerie. Quelles sont les bonnes pratiques pour mettre toutes les chances de son coté ? Comment optimiser son code HTML pour éviter de voir ses messages reçus dans les emails indésirables ?Un codage “de base”, quasi “à l’ancienne” s’impose ! Petit tour des spécificités du codage HTML pour l’emailing

Un code HTML spécifique, pourquoi faire ?

Un schéma classique : et voici la belle maquette de votre prochain e-mailing validée par le patron, le marketing… Une grande photo, de belles typos… Bref, le message déchire !
Comme souvent la maquette est conçue par votre graphiste, certes réactif et créatif. Elle est ensuite codée par votre webmaster polyvalent, certes avec passion et célérité…Mais sans prise en compte du média mail, et votre campagne s’avère finalement être une catastrophe en terme d’impact et de résultats.

Assurer une délivrabilité maximale coté messageFranchir les logiciels antispams :
Mettons toutes les chances de notre coté pour ne pas voir nos messages se retrouver directement dans les courriers indésirables de nos destinataires ! Un code HTML optimisé augmente considérablement nos chances de passer les barrières des anti-spams.

Augmenter ses taux d’ouverture, diminuer les désabonnements :
Même si le message réussi à éviter la boite à SPAM, il apparaît vide en ligne, ou les images sont toutes décalées, ou encore le logiciel du destinataire affiche des messages d’alerte inquiétants et finalement les destinataires suppriment le message sans chercher à comprendre ou, dans le meilleur des cas, ils se désabonnent de votre liste. Là encore, le codage HTML spécifique à l’email joue son rôle… Un rôle de premier plan !

Les bons points pour réussir son message par email

Le test de votre message dans un navigateur web n’est PAS suffisant !
On avait pourtant testé le message dans Explorer, dans Firefox.. Et même dans Opéra !… Comme les messages HTML de votre campagne sont lus à la fois dans des logiciels de messagerie qui interprètent le code à leur façon, mais aussi dans des “webmails“ qui vont proposer des affichages différents des navigateurs web, sans parler des téléphones… Le test du navigateur ne suffit pas.
Vous devez impérativement tester le message sur les plateformes et les logiciels de vos destinataires. Ouvrez un compte GMail, créez des adresses de test sur Hotmail, installez Outlook… Ces trois dernières configurations sont parmis les plus “exotiques” pour leur interprétation du code HTML ! Vous pouvez aussi vous abonner à des plateformes de tests et de prévisualisation des emails comme Litmus dont l’abonnement s’avèrera repidement être un bon investissement.
Donc, point numéro 1 : TESTER ! Tester et tester encore…
Utilisez les fonctions de test d’envoi de votre plateforme de routage pour envoyer des messages sur les différentes configurations de votre cible.

HTML pour l’email : passez le contrôle technique !

Reussir le cadage HTML de son emailUne bonne créa, oui ! Encore faut-il imaginer le design en fonction du média. Et nos designers, bien souvent issus du monde du print, ne connaissent pas, ou mal, les contraintes liées au message diffusé par mail. Tout est permis, mais une optimisation de la création pour “le support” est incontournable, comme toujours. Intégrer dès la création les contraintes techniques du “média” email va permettre à votre campagne d’aller plus loin dans la conquête de sa cible pour “cartonner” comme elle le mérite surement !
Ci après quelques règles, qu’il faut bien appeller contraintes, à intégrer d’urgence dès la création graphique. Rien d’universel, mais pour le moins des points de contrôle de base pour mettre toutes les chances du coté du message…

• Viser un rapport texte / image à 50/50

C’est une pratique courante des spammers, ceux qui envoient des messages non sollicités en grand nombre que de formater le message dans une unique image. Et les logiciels anti-spam qui luttent contre ces pratiques l’ont bien intégré. Le score d’un message de ce type est sévèrement amputé. Sans parler de l’affichage de la plupart des logiciels qui par défaut n’affichent pas les images, ou des réseaux d’entreprise qui par sécurité ne permettent pas leur téléchargement… Il est essentiel que votre destinataire puisse identifier la teneur du message SANS les images. Préservez, dès la création, une place significative au texte ! Et pas du texte dans une image !-), du “vrai” texte, que tous les logiciels afficheront naturellement, que les images soient chargées ou pas. On visera un ratio minimal de 50% image / 50% texte.

• Version Texte OBLIGATOIRE dans un envoi “Multipart”

Le protocole SMTP qui opère dans l’envoi et la réception d’email a été originellement conçu pour traiter du texte. La possibilité d’envoyer des messages illustrés est permise avec un formatage spécial du message appellé MULTIPART/ALTERNATIVE qui améliore le protocole. En fait quand vous envoyez du HTML, vous utilisez cette évolution. Elle est censée proposer des moyens alternatifs pour afficher le message dans toutes les conditions de réception. Donc, la version HTML, mais aussi une version en texte “brut”…
L’une ou l’autre des versions s’affichera en fonction du contexte de réception. Certains appareils ne peuvent pas lire le HTML et affichent alors la version texte, par exemple certains modèles de BlackBerry. L’absence de version texte grève aussi le score du message dans les filtres antispams… Incontournable donc : prévoyez une version texte brut pour votre message, sans image, sans HTML, aucun…

• Attention au vocabulaire !

La plupart des filtres anti-spam enrichissent un dictionnaire de mots et de pratiques chers aux spammers. Les mots trouvés dans les messages en correspondance avec ce dictionnaire altèrent le score du message pour finir par le diriger vers la boite à courrier indésirable.
Un sujet trop long, tout en majuscule, ou qui comporte des points d’exclamation… Ou encore des mots comme “viagra”, “promo”, “shopping”, “régime” ou “sexe”, pour les plus évidents… La présence de certains idiomes ou de certains caractères typographiques dans le sujet ou dans le corps du texte est à proscrire.

PAS de CSS externes ni de positionnement CSS : Vivent les tableaux !

Plus technique, l’utilisation des CSS dans le code est problèmatique. Si leur utilisation est courante et incontournable pour la publication de contenu pour les navigateurs, elle est plus difficilement gérée et de façon très variable par les emailers et les webmails (consultation des mails en ligne : Gmail, Live…). Pour ces derniers, on peut facilement imaginer qu’ils utilisent déjà leur propre CSS pour afficher leur interface. La plupart suppriment purement et simplement toute feuille de style externe ou liée au message ainsi que toute instruction de style en dehors de la balise <body>.
Dans les faits, on se limitera donc aux styles dits INLINE, et ce uniquement pour la gestion du formatage du texte, et en aucun cas pour le positionnement des éléments à l’écran.

Bref, retour au sources et au web de papa ! A l’ancienne, avec un vieux positionnement grâce aux tableaux (<TABLE>) où l’on placera les images en “mosaïque” dans les cellules pour assurer la mise en forme du contenu avec force d’images “spacer” transparentes pour caler le tout…

<!-- Exemples de style inline -->
<table>
<tr>
<td>
<img src="http://monsite.fr/photo.jpg" width="100" height="50" alt="Bienvenue" style="display:block">
</td>
<td>
<font style="color:#333333; font-size:14px; font-family:arial">Voici mon texte de présentation... Bien présenté !</font>
</td>
</tr>
</table>

• A propos des tableaux dans le code HTML pour l’email

Un certain nombre de règles spécifiques à l’email, toujours dans l’optique d’assurer une compatibilité maximale, sont à prendre en compte pour le codage des tableaux…

Des images en BLOCK !

Ne pas oublier d’affubler les images du contenu d’un attribut style DISPLAY:BLOCK.

PAS de tableaux imbriqués

A éviter au maximum, bonne pratique : pas plus de deux imbrications maximum ! Ici encore un code “clean” améliore le score du message vis à vis des filtres anti-spam…

PAS d’images de fond dans les cellules des tableaux

L’attribut BACKGROUND est fort mal vécu, nottamment par Outlook. L’image n’est carrément pas affichée. Intégrez dès la création qu’une image en fond de texte doit être évitée. Par contre l’attribut BGCOLOR est parfait !

En général, l’idée est d’intégrer un texte sur un magnifique dégradé… On s’arrangera dès la conception pour que le fond coloré soit uni sous le texte pour assurer l’affaire.

Des dimensions cohérentes aux tableaux

Prenez votre calculette ! Un tableau de 550 pixels de large ne peut contenir 2 cellules de 300 pixels dans une même rangée… Faites vos comptes. Invisibles dans un navigateur comme Explorer ou Firefox, ces erreurs sont catastrophiques dans GMail ou Outlook, par exemple…

• Des attributs ALT, HEIGHT et WIDTH sur toutes les images

Largeur et hauteur indispensables pour les images, nottament pour assurer l’affichage médiocre de votre message avant le chargement des images ou quand leur affichage n’est pas possible.
Pour des raisons similaires, rédigez des textes signifiants dans l’attribut ALT du tag IMG des images. Ce texte sera affiché quand les images ne sont pas chargées, il aidera à inciter le destinataire à ouvrir les images et à recevoir votre message complet.

PAS de gifs animés…

Le gif animé n’est pas toujours… Animé ! Cela dépend du contexte de réception de votre message par email. Dans la plupart des cas, seule la première image est affichée… Eviter une première image blanche ou un texte sans sens sur cette première image de votre animation.

PAS de balise A pour les liens et les mailto

Les logiciels de messagerie transforment automatiquement les liens, URL de sites web et adresses mails en liens cliquables avec une couleur de lien par défaut (attention au fond). Autant écrire simplement par exemple :
Mon site web : www.e-systemes.com qui donnera automatiquement
Mon site web : www.e-systemes.com

PAS de formulaires, ni de scripts, ni d’objets type vidéo ou “embed”

Premièrement le rendu est difficilement prévisible ou en tout cas difficilement cohérent en fonction du contexte de réception du message, deuxièmement la présence de ces éléments amende fortement le score anti-spam. Simulez plutôt le formulaire ou la séquence vidéo avec une image, et incitez au clic sur des boutons dans le genre “call to action“. Réservez le grand jeu des animations, vidéos et autres comportements multimédia pour les pages liées au message, les fameuses “landing pages“ que votre destinataire lira dans un vrai navigateur… Résultat garanti.

Et quoi encore ?!

Bonne pratiques HTML pour le mailEn marge du plan purement technique du codage HTML du message, quelques points complémentaires à observer ont aussi leur importance dans la conception et la configuration des messages…

Pensez à l’ergonomie, nottamment en ce qui concerne la largeur globale de votre message. Le “plus c’est grand, plus c’est beau“ ou encore le “size matters“ n’a pas sa place ici…

L’expérience montre qu’un message HTML est “confortable” pour la lecture avec une* largeur maximale de 550 pixels*. C’est l’interface des logiciels en général qui impose cette dimension moyenne. On évite ainsi l’apparition de scrolls ou de barres de défilement à manipuler pour appréhender le contenu du message au delà de la largeur de la fenêtre disponible pour le message lui-même…

Pensez aussi à l’identification rapide de l’émetteur du message (vous !). Même si votre mail a passé toutes les étapes de délivrabilité et qu’il se retrouve – enfin – dans la boite de réception de votre destinataire chéri, dans la multitude de messages qui envahissent sa boite, vous devez tirer votre épingle du lot et mettre toutes les chances d’être lu de votre coté…

- Une adresse mail avec un vrai nom de domaine. Evitez les adresses génériques type hotmail, par exemple, préférez un service@maboiteamoi.fr. Le formatage de l’adresse de l’expéditeur “en clair” est aussi possible, sous la forme “Ma boite à moi <service@maboiteamoi.fr>”, qui, dans certains contextes, n’affichera que la première partie dans la liste des expéditeurs.. Soit : “Ma boite à moi”…

- Un sujet qui incite à l’ouverture. On appliquera le fameux “tell, don’t sell“ : dans le sujet dites ce qu’on va trouver dans le message, ne vendez pas de coup ! Soyez clair, direct et concis.
Préférez un “Le nouveau tarif de MaboiteAmoi“ à un “Faites des économies sur vos achats
Des études le montre, carton sur les taux d’ouverture en prévision !

- Votre logo le plus possible en haut à droite, et si possible, pas trop large ! Certains logiciels affichent un aperçu du message avant de l’afficher et cet aperçu est tout petit… A prendre en compte…

- On pourrait parler aussi de la qualité de votre liste d’envoi. Rien de tel pour cartonner que d’envoyer des messages présentant un contenu riche et interressant à une cible motivée et volontaire, et surtout interessée par l’essence même de votre message. Plus le recrutement de vos adresses mails est honnête et sincère, basé sur le volontariat, plus le contenu que vous fournissez est en phase avec les attentes de votre liste, plus les taux d’ouvertures augmentent…
Dans cette optique, on n’oubliera jamais de proposer dans chaque message un moyen de quitter la liste ou de se désabonner des envois. Et surtout, de votre coté, de respecter les choix des désabonnés en ne leur envoyant plus de messages…

Transformez les contraintes en atouts !

Nous avons vu les 9 bons points et plus pour mettre un maximum de chances du coté de votre campagne pour lui assurer une délivrabilité maximale coté message.

  • Viser un rapport texte / image à 50/50
  • Version Texte OBLIGATOIRE dans un envoi “Multipart”
  • Attention au vocabulaire !
  • PAS de CSS externes ni de positionnement CSS : Vivent les tableaux !
  • A propos des tableaux dans le code HTML pour l’email
  • Des attributs ALT, HEIGHT et WIDTH sur toutes les images
  • PAS de gifs animés…
  • PAS de balise A pour les liens et les mailto
  • PAS de formulaires, ni de scripts, ni d’objets type vidéo ou “embed”

Cette liste n’est pas exhaustive, mais la considération et la mise en oeuvre de ces bonnes pratiques est déjà un bon point de départ.

Alpha Mail Routage emailNous tirons ces enseignements de la pratique quotidienne de l’envoi d’email que nous assurons pour les clients de notre solution de routage Alpha Mail. A nous d’assurer coté plateforme d’envoi la délivrabilité de vos messages !

Votre message est prêt ?
Nous vous proposons maintenant d’en assurer le routage …

La plateforme de routage d’email et de Newsletter Alpha Mail

A lire aussi :
e-mailing, faites la différence dès la boite de réception
L’email responsive c’est maintenant ! Nouveaux comportements mobiles et bonnes pratiques…

Web, applis & solutions