Vous avez validé votre campagne dans votre outil d’envoi, l’aperçu était parfait. Pourtant, une partie de vos destinataires reçoit un bouton sans couleur, des colonnes empilées les unes sur les autres, ou un email entièrement en texte noir sur fond blanc. Le HTML est le même pour tout le monde. Ce qui change, c’est ce que chaque client mail en fait avant de l’afficher.
Un email n’est pas une page web
Une page web s’affiche dans un navigateur qui applique votre code tel quel. Un email, lui, s’affiche à l’intérieur de l’interface d’un autre : la page de Gmail, l’application Mail de l’iPhone, le webmail d’Orange. Ces services ne peuvent pas laisser un message modifier leur propre interface ni exécuter n’importe quoi. Alors ils nettoient votre HTML avant de l’insérer dans leur page.
Ce nettoyage suit trois grandes logiques, et chaque client les applique à sa façon.
1. Isoler votre email de leur page
Votre email ne doit pas pouvoir restyler l’interface du webmail. La plupart des webmails remplacent donc votre balise <body> par un simple bloc, et limitent la portée de vos règles CSS à ce bloc. Conséquence directe : tout ce que vous posez sur le <body> est perdu, à commencer par la couleur de fond.
2. Filtrer le CSS
Chaque client tient sa propre liste de propriétés, de valeurs et de sélecteurs acceptés. Ce qui n’y figure pas est retiré silencieusement : un positionnement absolute, une marge négative, un sélecteur d’attribut, une police web chargée par @font-face.
3. Parfois, tout supprimer
Certains webmails ne gardent aucun bloc <style>. Seuls survivent les styles écrits directement sur les éléments, dans leur attribut style. Un email dont la mise en forme repose sur une feuille de style arrive alors totalement nu.
À cela s’ajoute un cas à part : Outlook pour Windows, dans sa version classique, n’affiche pas les emails avec un moteur de navigateur mais avec celui de Microsoft Word. Flexbox, grilles CSS, la plupart des fonds en image et des coins arrondis lui sont étrangers.
Client par client : ce qui casse le plus souvent
| Client | Ce qui pose le plus souvent problème |
|---|---|
| Apple Mail (iOS, macOS) | Très permissif. Le positionnement sticky et fixed n’est pas pris en compte, et un email trop large est réduit pour tenir dans l’écran de l’iPhone. |
| Gmail | <body> remplacé, donc fond perdu. Pas de positionnement, pas de police web, pas de marges négatives. Le bloc <style> est ignoré s’il est placé dans le <body> ou s’il dépasse 16 Ko. |
| Outlook.com et nouvel Outlook | <body> remplacé. Positionnement relative et absolute refusés, marges négatives retirées, certains sélecteurs limités. |
| Yahoo Mail | <body> remplacé. Media queries limitées à la largeur et à la hauteur, sélecteurs d’attribut restreints, positionnement absolute refusé. |
| Orange | display: flex et display: grid ignorés : les mises en page en colonnes modernes s’empilent. |
| SFR et La Poste | Blocs <style> supprimés : seuls les styles en ligne survivent. |
| Outlook pour Windows | Moteur de Word : pas de flexbox ni de grille, max-width partiel, fonds et boutons arrondis à reconstruire en VML. |
Ces comportements sont documentés publiquement, fonctionnalité par fonctionnalité, par le projet caniemail.com, la référence de la communauté de l’intégration email.
Concevoir un gabarit qui résiste à tous
Inutile de viser le plus petit dénominateur commun. Il suffit de construire une version de base solide et d’ajouter les raffinements par-dessus.
- Structurez avec des tableaux. C’est la seule mise en page comprise partout, Outlook pour Windows compris. Réservez flexbox et grilles à des améliorations qui peuvent disparaître sans casser l’email.
- Faites inliner vos styles. La plupart des outils d’envoi convertissent automatiquement la feuille de style en attributs
styleavant l’envoi. Activez cette option : c’est ce qui sauve vos emails chez SFR et La Poste. - Ne posez rien sur le
<body>. Placez votre couleur de fond sur un tableau qui englobe tout l’email. - Oubliez le positionnement. Un badge en
position: absolutese retrouve en haut à gauche, ou au milieu du texte, chez une bonne moitié des clients. - Gardez les media queries pour l’amélioration. Votre email doit être lisible sans elles, sur mobile comme sur ordinateur.
- Prévoyez Outlook pour Windows à part, avec des commentaires conditionnels
<!--[if mso]>qui lui servent une structure en tableaux et des boutons en VML. - Préférez PNG et JPG. Le SVG et le WebP ne s’affichent pas partout.
- Donnez toujours une police de repli à vos polices web : la plupart des webmails ne les chargeront pas.
Vérifier avant d’envoyer
Lire des tableaux de compatibilité ne remplace pas le fait de voir le résultat. C’est pour ça que Sender Audit propose, dans chaque rapport de test, un onglet Rendu :
- un aperçu de votre email tel que Apple Mail, Gmail, Outlook.com, Yahoo, Orange, SFR, La Poste et Free devraient l’afficher ;
- les zones modifiées surlignées, avec pour chaque client la liste de ce qu’il a retouché et pourquoi ;
- une analyse de compatibilité qui couvre aussi Outlook pour Windows et les applications mobiles.
Il suffit d’un compte gratuit : connectez-vous, envoyez votre email à l’adresse indiquée sur la page d’accueil, puis ouvrez l’onglet Rendu du rapport. Le guide de la documentation détaille comment lire chaque écran.