Pourquoi votre email s’affiche mal dans Outlook

Mardi, 16 h. La newsletter part dans une heure. Elle a été validée par le marketing, par la marque, par le juridique. Sur Gmail, elle est parfaite. Puis le directeur commercial l’ouvre dans Outlook, sur son PC de bureau : les deux colonnes sont empilées de travers, le bouton a perdu ses coins arrondis et une ligne blanche coupe le visuel principal en deux.

Personne n’a fait d’erreur de design. L’email a simplement rencontré Outlook.

Outlook n’est pas un navigateur

La plupart des messageries affichent vos emails comme une page web. Outlook classique pour Windows, lui, utilise le moteur de rendu de Word. Un moteur pensé pour mettre en page des documents, pas pour interpréter du HTML et du CSS modernes.

Résultat : une bonne partie de ce qui fonctionne partout ailleurs est ignorée ou mal interprétée. Microsoft pousse aujourd’hui un nouvel Outlook au rendu plus moderne, mais la version classique reste installée dans beaucoup d’entreprises. Et en B2B, ce sont souvent vos lecteurs les plus importants.

Ce qui casse, concrètement

• Les mises en page en colonnes : les div et le CSS de positionnement ne sont pas fiables. Les colonnes se décalent ou s’empilent.
• Les largeurs : max-width n’est pas pris en compte, l’email s’étire ou se contracte selon la fenêtre.
• Les images de fond : elles disparaissent, sauf à les coder spécifiquement pour Outlook.
• Les boutons : coins arrondis, marges intérieures et zones cliquables sont à moitié respectés.
• Les polices : une police web non chargée est remplacée, parfois par Times New Roman.
• Les espacements : marges ignorées, interlignes recalculés, fines lignes blanches entre deux blocs.
• Les écrans haute résolution : avec une mise à l’échelle Windows à 125 % ou 150 %, certaines images et largeurs se décalent.
• Les GIF animés : seule la première image s’affiche. Si elle est vide ou peu lisible, le message disparaît.
• Le mode sombre : Outlook peut inverser les couleurs de tout ou partie de l’email, avec des logos ou des textes qui deviennent illisibles.

Pourquoi la réponse évidente ne marche pas

La réponse évidente, c’est de « corriger pour Outlook » une fois le problème constaté. Sauf qu’à ce stade, le design est validé, le planning est serré, et chaque correction en fait apparaître une autre ailleurs. Outlook ne se rattrape pas en fin de chaîne. Il se prévoit dès la maquette.

Ce qu’on fait sur le terrain

1. On dessine pour Outlook dès la maquette. Avant d’intégrer, on repère dans la maquette Figma ce qui posera problème : fond image sous du texte, bouton très arrondi, colonnes asymétriques. On décide avec le designer de la version dégradée acceptable, plutôt que de la découvrir la veille de l’envoi.

2. On structure en tableaux, et on cible Outlook à part. La structure repose sur des tableaux, que le moteur de Word comprend. Pour ce qu’il ne comprend pas, on ajoute du code réservé à Outlook grâce aux commentaires conditionnels :

<!--[if mso]>
<table role="presentation" width="600"><tr><td>
<![endif]-->
  … contenu responsive pour les autres messageries …
<!--[if mso]>
</td></tr></table>
<![endif]-->

Les autres messageries ignorent ce bloc. Outlook, lui, y trouve une largeur fixe et une structure qu’il sait afficher.

3. On construit les boutons pour qu’ils résistent. Un bouton codé en tableau, avec une zone cliquable sur toute sa surface, reste un bouton dans Outlook. Les coins arrondis, si la marque y tient, passent par un code spécifique (VML) qu’Outlook sait dessiner.

4. On prévoit le repli des polices. Chaque police web a une police système de secours choisie, déclarée aussi pour Outlook. Le lecteur ne verra pas votre typographie, mais il ne verra pas Times New Roman non plus.

5. On teste avant de valider, pas après. Chaque email passe sur Litmus ou Email on Acid, sur les versions d’Outlook que vos destinataires utilisent vraiment, en clair et en mode sombre. Les captures font partie du BAT : le comité valide ce que les lecteurs verront, pas ce que Gmail affiche.

La checklist avant envoi

• Structure en tableaux, largeur fixe déclarée pour Outlook
• Aucun texte important placé uniquement sur une image de fond
• Boutons codés en HTML, pas en image, cliquables sur toute leur surface
• Police de secours définie pour chaque police web
• Images en display:block, avec largeur et hauteur renseignées
• Première image des GIF animés lisible seule
• Logo et textes lisibles en mode sombre
• Rendu vérifié sur les versions d’Outlook de votre audience, captures jointes au BAT

Sur le terrain

C’est exactement ce travail qui permet à des templates de tenir dans la durée. Pour B&B Hotels, des emails transactionnels multilingues dans Marketing Cloud, chaque template a été vérifié sur Gmail, Outlook et Apple Mail avant mise en production. Et si vos emails doivent aussi être lisibles par tous, nous avons détaillé l’accessibilité des emails dans Salesforce Marketing Cloud.

Et chez vous ?

Outlook n’est pas un détail technique. C’est souvent là que lisent vos clients les plus importants, et là qu’une belle campagne devient une mauvaise expérience. Quelle est la dernière surprise qu’Outlook vous a faite ?

Vous voulez qu’on regarde vos templates ? Parlons-en, ou découvrez notre approche de l’intégration emailing.