Comment créer un email HTML compatible Outlook (Guide 2026)

Outlook est utilisé par plus de 400 millions de personnes, principalement dans les entreprises. Si votre email s'affiche mal dans Outlook, vous perdez une part énorme de votre audience cible.

Le problème ? Outlook n'utilise pas un moteur de rendu web comme Chrome ou Firefox. Depuis Outlook 2007, Microsoft a choisi d'utiliser le moteur de rendu de Microsoft Word pour afficher les emails HTML. Résultat : de nombreuses règles CSS modernes sont ignorées ou mal interprétées.

1. Pourquoi Outlook pose autant de problèmes

Les versions Outlook 2007 à 365 (sur Windows) utilisent le moteur de rendu de Word. Ce moteur a été conçu pour des documents bureautiques, pas pour du HTML web. Il ignore ou interprète incorrectement de nombreuses propriétés CSS.

Voici les versions concernées par ce moteur Word :

• Outlook 2007, 2010, 2013 — moteur Word 12/14/15
• Outlook 2016, 2019, 2021 — moteur Word 16
• Outlook 365 (Windows) — moteur Word 16 (en cours de migration vers un moteur Chromium)
• Outlook sur Mac, iOS, Android — utilisent un moteur webkit → bien meilleur support CSS

2. Règle n°1 : Utiliser des tables pour la mise en page

Oubliez div, flexbox, grid et float. Dans Outlook, la seule façon fiable de créer des colonnes et des mises en page structurées est d'utiliser des tableaux HTML.

✅ Structure recommandée :

1. Une table principale à 100% de largeur comme conteneur global
2. Une table interne (600–680px max) pour limiter la largeur du contenu
3. Des <tr> et <td> pour chaque ligne et colonne
4. Attributs cellpadding="0" et cellspacing="0" sur toutes les tables
5. Attribut border="0" pour éviter les bordures par défaut

3. Règle n°2 : Tout le CSS doit être inline

Outlook supprime les balises <style> dans le <head>. Chaque propriété CSS doit être appliquée directement via l'attribut style="" sur chaque élément.

CSS supporté en inline par Outlook :

• font-family, font-size, font-weight, color
• background-color (sur les cellules de table)
• padding, margin (partiellement)
• border, border-radius (ignoré dans Outlook)
• text-align, line-height
• width, height (préférer les attributs HTML)

4. Règle n°3 : Largeurs explicites partout

Outlook ne calcule pas automatiquement les largeurs de colonnes comme un navigateur. Il faut définir explicitement la largeur en pixels sur chaque <td>, à la fois via l'attribut HTML width ET le style inline style="width:Xpx".

Bonne pratique :

• Largeur totale du conteneur : 600px maximum pour éviter le scroll horizontal
• Pour 2 colonnes égales : width="280" (600 - 2×20px de marge = 560 / 2 ≈ 280)
• Toujours doubler : <td width="280" style="width:280px">
• Utiliser max-width avec une table à 100% pour le responsive

5. Commentaires conditionnels MSO

Les commentaires conditionnels HTML sont des blocs de code que seul Outlook lit. Ils permettent d'appliquer des styles ou du code spécifiquement pour Outlook sans affecter les autres clients.

Syntaxe :

• <!--[if mso]> ... <![endif]--> — lu par Outlook seulement
• <!--[if !mso]><!--> ... <!--<![endif]--> — ignoré par Outlook
• <!--[if gte mso 9]> — Outlook 2007 et supérieur
• <!--[if mso 16]> — Outlook 2016/2019/2021/365 uniquement

Cas d'usage typiques : forcer une largeur de table dans Outlook, ajouter des espacements, ou activer le VML pour des images de fond.

6. Images de fond avec VML (pour Outlook)

Outlook ne supporte pas background-image en CSS. Pour afficher une image de fond dans Outlook, il faut utiliser VML (Vector Markup Language), un format Microsoft supporté par le moteur Word.

La technique consiste à encapsuler l'image de fond dans un commentaire conditionnel MSO avec le code VML, et à placer le contenu par-dessus avec du positionnement VML. C'est complexe à écrire manuellement — c'est pourquoi les bons générateurs d'emails comme MailBuildr gèrent ça automatiquement.

7. Polices et typographie dans Outlook

Outlook supporte uniquement les polices système installées sur l'ordinateur de l'utilisateur. Les Google Fonts, Adobe Fonts et autres polices web ne fonctionnent pas.

Polices sûres dans Outlook :

• Arial, Helvetica, sans-serif
• Georgia, Times New Roman, serif
• Courier New, monospace
• Verdana, Tahoma, sans-serif
• Trebuchet MS, sans-serif

8. Images dans Outlook

Outlook bloque les images par défaut (affiche des petites croix rouges jusqu'à ce que l'utilisateur clique "Afficher les images"). Bonnes pratiques :

• Toujours définir un alt descriptif pour que le texte alternatif s'affiche
• Définir width et height en attributs HTML (pas seulement en CSS)
• Ajouter style="display:block" pour éviter l'espace blanc sous les images
• Héberger les images sur un serveur fiable avec une URL absolue (https://)
• Éviter les images supérieures à 100 Ko
• Ajouter border="0" pour éviter la bordure bleue sur les images linkées

9. Comment tester votre email dans Outlook

Ne déployez jamais un email sans l'avoir testé dans Outlook. Plusieurs options :

• MailBuildr (gratuit) — aperçu intégré dans l'éditeur + score de compatibilité Outlook
• Litmus — screenshots dans 90+ clients email dont toutes les versions Outlook (payant)
• Email on Acid — similaire à Litmus
• Outlook Desktop — si vous avez accès à un PC Windows avec Outlook installé
• Envoi test — envoyez-vous le vrai email depuis votre ESP (Brevo, Mailchimp…)

10. FAQ

Quelle largeur maximale pour un email Outlook ?

La largeur standard est de 600px. Outlook affiche les emails dans un panneau de lecture qui peut être étroit. Au-delà de 600px, des barres de défilement horizontales peuvent apparaître.

Outlook 365 va-t-il enfin supporter le CSS moderne ?

Microsoft travaille sur une migration vers un moteur Chromium pour la "Nouvelle Outlook". Certains utilisateurs utilisent déjà cette version. Mais les anciennes versions (2016, 2019, 2021) continueront d'être utilisées en entreprise pendant longtemps — notamment à cause des licences perpétuelles.

Peut-on utiliser des media queries dans Outlook ?

Non, Outlook Windows ignore totalement les @media queries. Pour le responsive dans Outlook, il faut utiliser des tables fluides avec des largeurs en pourcentage, pas des breakpoints CSS.

Pourquoi mon email s'affiche bien dans Gmail mais pas dans Outlook ?

Gmail et Outlook utilisent des moteurs de rendu totalement différents. Gmail (web) est Blink, Outlook est Word. Ce qui fonctionne dans l'un peut échouer dans l'autre. La clé est d'utiliser un HTML spécifiquement conçu pour les emails — tables, CSS inline, pas de JavaScript — comme celui que génère MailBuildr.