Écrire un email qui s'affiche partout : les règles du jeu

Un email n'est pas une page web

Chaque logiciel de messagerie affiche le HTML à sa façon, et certains moteurs de rendu ont vingt ans. Le même code ne donne pas le même résultat sur Gmail, Outlook, Apple Mail ou Thunderbird, et il change encore entre l'application mobile et le webmail du même fournisseur. C'est la règle numéro un : ce que vous voyez chez vous n'est pas ce que voit votre destinataire.

MJML : écrire une fois, laisser la machine générer le HTML

Un email compatible partout s'écrit encore avec des tableaux imbriqués et des attributs HTML d'un autre âge. Personne n'a envie de maintenir ça à la main. MJML est un langage qui règle le problème : on écrit des balises lisibles, des sections, des colonnes, des blocs de texte, et le compilateur produit le HTML compatible correspondant, responsive compris.

C'est ce que nous utilisons pour les emails de nos clients : le gabarit reste modifiable, et la compatibilité n'est plus un travail d'orfèvre à chaque campagne.

Les limites techniques à connaître

• 102 Ko chez Gmail. Au delà, Gmail coupe le message et affiche un lien « Afficher l'intégralité du message ». Point important, souvent mal compris : cette limite ne concerne que le fichier HTML de l'email. Le poids des images n'entre pas dans le calcul. Ce qui fait exploser le compteur, c'est le code : styles recopiés sur chaque balise, commentaires, contenu dupliqué.
• 16 Ko pour la balise style. Gmail ne conserve les règles CSS que jusqu'à 16 Ko, le reste est supprimé, sans avertissement. Une feuille de style trop longue et c'est la fin de votre email qui perd sa mise en forme.
• La hauteur compte aussi. Un message très long peut être tronqué à l'affichage. Ce qui est coupé, c'est le bas, donc justement le lien de désabonnement et vos mentions légales.
• Le poids des images ne compte pas dans les 102 Ko, mais il compte pour votre lecteur. Badsender recommande de ne pas dépasser 800 Ko d'images pour l'ensemble d'une campagne.

La conséquence pratique : un email tronqué perd sa fin, et un email dont le CSS saute à la moitié fait mauvaise impression. Mieux vaut un message court et un lien vers une page du site.

Ce qui vous envoie directement en indésirable

• Les pièces jointes exécutables ou du code source. Un fichier .exe, .js, .scr, ou une archive contenant des sources, c'est exactement le profil d'un envoi malveillant. La plupart des passerelles bloquent le message avant même qu'il arrive. Déposez le fichier quelque part et envoyez un lien.
• Un email qui n'est qu'une grande image. Sans texte réel, les filtres ne peuvent rien analyser, et le lecteur qui bloque les images ne voit rien du tout.
• Du JavaScript ou des formulaires dans le message : ignorés par les messageries, et considérés comme suspects.
• Les liens raccourcis type bit.ly, très utilisés par les campagnes frauduleuses.
• Les majuscules et la ponctuation excessive dans l'objet, le grand classique.

Et bien sûr, tout cela ne sert à rien si votre domaine n'est pas correctement configuré : voir les 3 réglages SPF, DKIM et DMARC.

Les bonnes pratiques graphiques

• Une seule colonne, environ 600 pixels de large, c'est ce qui passe partout
• Du vrai texte plutôt que du texte en image, pour la lisibilité comme pour les filtres
• Un attribut alt sur chaque image, c'est ce que verra le destinataire dont les images sont bloquées
• Des boutons en HTML et non en image, ils restent cliquables et lisibles dans tous les cas
• Un contraste franc et un corps de texte d'au moins 14 pixels
• Une seule action principale par email, visible sans avoir à faire défiler

Tester avant d'envoyer

Envoyez vous le message sur Gmail, sur Outlook et sur un téléphone, puis relisez le en mode sombre. Vérifiez aussi la version texte, celle que personne ne regarde et qui compte pourtant dans le filtrage. Dix minutes de test évitent une campagne entière à refaire.

Vous envoyez des emails à vos clients et vous doutez du résultat ? Faites nous voir vos gabarits.