Analyseur HTML email

Un navigateur, c'est un moteur de rendu unique et à jour. Un email, c'est des dizaines de clients qui interprètent votre code chacun à leur façon : Outlook Windows passe par le moteur de Word, Gmail réécrit le HTML avant affichage, les webmails suppriment ou renomment vos classes. D'où les deux règles historiques du métier : structure en tableaux, styles en inline. Le site caniemail.com recense, propriété par propriété, ce que chaque client supporte réellement.

Depuis 2007, Outlook sur Windows n'utilise plus un moteur web mais celui de Word. Conséquence : pas de Flexbox ni de Grid, pas de border-radius (vos boutons arrondis deviennent carrés), pas de box-shadow, un max-width ignoré et une gestion des marges imprévisible. La parade tient en deux techniques : structurer avec des tableaux imbriqués et du padding sur les cellules, puis utiliser VML (le langage vectoriel de Microsoft) dans des commentaires conditionnels <!--[if mso]--> pour les images de fond et les boutons « bulletproof ».

Au-delà d'environ 102 Ko de HTML, Gmail coupe le message et affiche « Message tronqué ». Tout ce qui suit la coupure disparaît : contenu, styles déclarés en fin de document, lien de désinscription et pixel de tracking — vos statistiques d'ouverture deviennent alors fausses. Les principaux coupables sont les éditeurs drag-and-drop qui génèrent du CSS dupliqué, les tableaux sur-imbriqués et les commentaires laissés dans le code.

Une part croissante des lecteurs consulte ses emails en thème sombre, en particulier sur Apple Mail et sur mobile. Selon les clients, le fond est simplement inversé, ou l'ensemble des couleurs est recalculé. Résultat classique : un logo noir sur fond transparent devient invisible, un texte gris foncé disparaît, un bouton blanc perd son contraste. La parade : déclarer <meta name="color-scheme" content="light dark">, prévoir une @media (prefers-color-scheme: dark), et utiliser des logos sur fond coloré ou avec un contour clair.

De nombreux clients bloquent les images par défaut, et une partie des lecteurs ne les débloque jamais. Un email conçu comme une grande image devient alors une page blanche. Deux réflexes : un attribut alt descriptif sur chaque image porteuse de sens (il s'affiche à la place de l'image), et un ratio image/texte équilibré — visez au moins 60 % de texte réel, ce qui améliore aussi votre score anti-spam.

Oui, si votre audience contient des utilisateurs Outlook Windows — c'est-à-dire quasiment toutes les audiences B2B françaises. Le CSS moderne donne un code plus court et plus élégant, mais il s'effondre sur le moteur Word. Le compromis retenu par les équipes CRM : tableaux pour la structure porteuse, CSS inline pour les styles, et améliorations progressives (arrondis, ombres, responsive) dans des media queries — visibles là où elles sont supportées, sans casser ailleurs.