Outlook est l’un des clients de messagerie les plus utilisés, mais ses différentes versions affichent les emails de manière différente. Les anciennes versions, comme Outlook 2000–2003, utilisaient Internet Explorer comme moteur de rendu. Avec la sortie d’Outlook 2007, le moteur de rendu est passé à Microsoft Word, qui ne prend pas en charge de nombreuses propriétés HTML et CSS standard et présente ses propres bugs.

Internet Explorer et Microsoft Word ont tous deux des limitations distinctes, qui peuvent entraîner un affichage incorrect ou déformé des emails.

Problèmes courants de rendu dans Outlook et solutions

Lors de la conception de vos emails, gardez à l’esprit les problèmes courants suivants :

Images d’arrière-plan et style des boutons dans Outlook

• ⚠️Problème : De nombreuses versions d’Outlook — en particulier les versions classiques de bureau qui utilisent Microsoft Word comme moteur de rendu — prennent peu en charge les images d’arrière-plan basées sur CSS et les styles de boutons modernes, comme les coins arrondis. Pour afficher correctement ces éléments, Outlook classique s’appuie sur VML (Vector Markup Language). Sans VML, les images d’arrière-plan peuvent ne pas s’afficher et les boutons peuvent apparaître plats ou cassés.

  Bien que les versions web récentes d’Outlook, comme Outlook.com et le webmail Microsoft 365, prennent en charge les arrière-plans CSS, les versions classiques de bureau nécessitent toujours des solutions de secours.

• 📉Impact :
  • Les images d’arrière-plan peuvent ne pas s’afficher.
  • Les boutons peuvent perdre leur style et apparaître comme de simples rectangles.
  • Les emails peuvent sembler incomplets ou visuellement incohérents selon les versions d’Outlook.
• 🛠️Solution :
  • Utilisez une couleur d’arrière-plan unie comme solution de secours.
  • Pour une compatibilité complète, utilisez VML pour afficher les boutons et les images d’arrière-plan dans Outlook classique de bureau.
  • Vous pouvez aussi utiliser une image de bouton statique liée à une URL, ou insérer les visuels d’arrière-plan sous forme de blocs <img> classiques.

• Exemples d’images d’arrière-plan :

  • ❌ CSS standard, fonctionne dans les clients modernes mais pas dans Outlook classique de bureau :

  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Ceci est une image d’arrière-plan (méthode CSS).
      </td>
    </tr>
  </table>

  • ✅ Solution de secours VML, fonctionne dans Outlook classique de bureau :

  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;">
      <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/>
      <v:textbox inset="0,0,0,0">
  <![endif]-->
  <table width="600" height="200" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" valign="middle" style="color: #fff; font-size: 24px;">
        Ceci est une image d’arrière-plan (VML pour Outlook).
      </td>
    </tr>
  </table>
  <!--[if gte mso 9]>
      </v:textbox>
    </v:rect>
  <![endif]-->

• Exemples de boutons arrondis :

  • ❌ Bouton CSS standard, non pris en charge dans Outlook classique de bureau :

  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
        <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;">
          Bouton arrondi
        </a>
      </td>
    </tr>
  </table>

  • ✅ Bouton VML pour Outlook classique de bureau :

  <!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
      Bouton arrondi
    </center>
  </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-- -->
  <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;">
    Bouton arrondi
  </a>
  <!--<![endif]-->

Blocage des images par défaut

• ⚠️Problème : Outlook peut bloquer les images sauf si l’expéditeur est considéré comme fiable.
• 📉Impact : Les emails peuvent sembler vides ou cassés lors du premier affichage.
• 🛠️Solution : Ajoutez toujours un texte alternatif descriptif et envisagez d’utiliser des couleurs d’arrière-plan ou du contenu HTML de secours.

Redimensionnement des images dans Outlook

• ⚠️Problème : Outlook classique peut afficher les images à leur taille native d’origine, en ignorant les largeurs définies via CSS. Cela pose particulièrement problème lorsque vous essayez de réduire de grandes images haute résolution uniquement avec CSS, une pratique courante pour prendre en charge les écrans haute densité.
• 📉Impact :
  • Les images peuvent apparaître trop grandes dans Outlook classique.
  • Les mises en page peuvent se casser ou devenir incohérentes selon les clients de messagerie.
• 🛠️Solution : Pour garantir une taille d’image cohérente dans Outlook, utilisez toujours l’attribut HTML width directement sur la balise <img>. Outlook respecte cet attribut et ajustera automatiquement la hauteur pour conserver les proportions.

✅ Correct, redimensionne l’image dans Outlook classique :

<img src="image.jpg" width="300" style="width:300px;">

❌ Incorrect, Outlook classique peut l’ignorer :

<img src="image.jpg" style="width:300px;">

Prise en charge limitée des GIF animés

• ⚠️Problème : Les versions 2007–2016 d’Outlook classique pour Windows n’affichent que la première image d’un GIF.

  L’animation GIF est prise en charge dans les versions plus récentes d’Outlook pour Microsoft 365, les applications mobiles Outlook et Outlook.com. Dans Outlook pour Microsoft 365, la lecture peut également dépendre des paramètres d’animation Windows de l’utilisateur.
• 📉Impact : Si les informations clés apparaissent dans les images suivantes, les utilisateurs ne les verront pas.
• 🛠️Solution : Assurez-vous que la première image contient votre CTA ou le message le plus important.

Rendu incohérent des polices

• ⚠️Problème : Dans de nombreuses versions de bureau d’Outlook, les polices personnalisées ne sont pas prises en charge. Lorsque vous placez une police personnalisée en premier dans votre pile de polices, Outlook peut ignorer toute la pile et utiliser Times New Roman par défaut, même si vous avez défini des polices de secours sûres.
• 📉Impact : Cela entraîne une typographie incohérente et peut perturber l’image de marque, la mise en page et la lisibilité de votre email lorsqu’il est consulté dans Outlook.
• 🛠️Solutions :

  • ✅ Utilisez des sélecteurs d’attributs pour remplacer les polices personnalisées :
    Écrivez votre pile de polices comme d’habitude, mais placez votre police personnalisée en dernier dans la liste. Ajoutez ensuite ce CSS :

    [style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }

    Ce code garantit que les clients de messagerie prenant en charge les sélecteurs d’attributs, comme Gmail, Apple Mail et la plupart des services de webmail, utiliseront votre police personnalisée si elle est disponible. Outlook classique ignore les sélecteurs d’attributs comme [style*="..."], il utilisera donc les polices de secours que vous avez spécifiées.

    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
        <style>
          div {font-family: Helvetica, sans-serif, 'Tangerine';}
    
          [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; }
        </style>
      </head>
      <body>
        <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Exemple de police personnalisée</div>
      </body>
    </html>

  • ✅ Appliquez du CSS conditionnel uniquement pour Outlook à l’aide de commentaires MSO :

    Vous pouvez également définir votre pile de polices personnalisées dans votre CSS et utiliser une instruction conditionnelle MSO pour la remplacer par des polices système standard spécifiquement pour Outlook.

    <style>
      div { font-family: 'CustomFont', Helvetica, sans-serif; }
    </style>
    
    <!--[if gte mso 9]>
      <style type="text/css">
        div { font-family: Helvetica, Arial, sans-serif !important; }
      </style>
    <![endif]-->

  • ✅ Ou utilisez simplement des polices système standard comme Arial, Calibri, Times New Roman ou Verdana, qui sont entièrement prises en charge dans les différentes versions d’Outlook.

Problèmes de style des listes dans Outlook

• ⚠️Problème : Les puces et les numéros peuvent ne pas s’afficher comme prévu. Outlook classique ne conserve pas toujours le style par défaut des listes, en particulier lorsque les listes sont imbriquées dans des tableaux ou des divs.
• 📉Impact : Les listes peuvent apparaître comme du texte brut, sans puces ni numéros.
• 🛠️Solution : Utilisez des styles inline ou du contenu de secours. Vous pouvez également ajouter manuellement des symboles, comme •, ou utiliser des cellules <td> pour créer un faux style de liste.

❌ HTML problématique, peut ne pas s’afficher correctement dans Outlook classique :

<table>
  <tr>
    <td>
      <ul>
        <li>Premier point</li>
        <li>Deuxième point</li>
      </ul>
    </td>
  </tr>
</table>

✅ HTML amélioré, fausse liste compatible avec Outlook :

<table>
  <tr>
    <td style="font-family: Arial, sans-serif; font-size: 14px;">
      • Premier point<br>
      • Deuxième point
    </td>
  </tr>
</table>

Colonnes fantômes : corriger l’alignement des colonnes dans Outlook

• ⚠️Problème : Outlook classique de bureau gère souvent mal les largeurs exactes de colonnes dans les mises en page côte à côte. Même les emails responsives construits avec deux colonnes, par exemple des mises en page à deux colonnes totalisant 600 px, peuvent apparaître désalignés ou empilés de manière incorrecte.
• 📉Impact :
  • Les colonnes peuvent bouger, s’empiler incorrectement ou afficher des espaces.
  • Les mises en page qui s’affichent correctement dans le webmail ou sur mobile peuvent se casser dans Outlook classique de bureau.
• 🛠️Solution : Encadrez vos tableaux de colonnes dans un tableau « fantôme » à largeur fixe, réservé à Outlook, à l’aide de commentaires conditionnels MSO. Outlook voit ce tableau fantôme et affiche les colonnes, tandis que les autres clients de messagerie l’ignorent, ce qui préserve le comportement responsive ailleurs.

🎯 Exemple HTML

<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="main_container">

      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center"><tr>
          <td width="450">
      <![endif]-->

      <table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Contenu de la colonne de gauche</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
          </td><td width="150">
      <![endif]-->

      <table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
        <tr><td>Contenu de la colonne de droite</td></tr>
      </table>

      <!--[if (gte mso 9)|(IE)]>
        </td></tr></table>
      <![endif]-->

    </td>
  </tr>
</table>

Résumé : Utilisez des colonnes fantômes enveloppées dans des commentaires MSO pour imposer les largeurs de colonnes dans Outlook classique de bureau sans affecter la mise en page ailleurs. Il s’agit d’une correction légère propre à Outlook qui préserve un design propre et responsive dans les autres clients.

Lignes blanches dans les emails Outlook

• ⚠️Problème : Outlook classique de bureau peut parfois insérer des lignes horizontales blanches inattendues entre les blocs de contenu en raison d’erreurs d’arrondi lors des conversions de pixels en points et d’une gestion incohérente des hauteurs de tableau.
• 📉Impact :
  • Des espaces indésirables apparaissent dans les mises en page.
  • Cela rompt le flux visuel et la cohérence de la marque.
  • Difficile à prévoir : ces lignes peuvent apparaître de manière aléatoire.
• 🛠️Solutions, essayez-en une ou plusieurs :

1. Utilisez des valeurs de pixels paires, de préférence des multiples de 4
   Définissez font-size, line-height, padding et height avec des nombres pairs, de préférence divisibles par 4, afin de réduire les erreurs d’arrondi.

2. Insérez des sauts fantômes spécifiques à Outlook
   Évitez les espaces avec un saut de ligne réservé à MSO :

   <!--[if gte mso 12]><br /><![endif]-->

3. Utilisez du code spécifique à Microsoft
   Cet extrait peut aider à réduire les espaces indésirables en forçant l’effondrement des bordures et de l’espacement des tableaux dans Outlook :

   <!--[if gte mso 9]>
   <style type="text/css">
     table {
       border-collapse: collapse;
       border-spacing: 0;
     }
   </style>
   <![endif]-->

   Ajoutez ce code à la section <head> de votre email et testez-le soigneusement. Selon votre mise en page, il peut affecter d’autres éléments. Pensez donc toujours à prévisualiser votre email dans Outlook avant de le finaliser.

4. Ajoutez une espace insécable comme tampon
   Une solution de contournement courante consiste à ajouter une espace insécable ( ) juste avant la fermeture de la balise <td> :

   <table border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td>
         Votre offre exclusive vous attend — cliquez ci-dessous pour profiter de votre réduction !<br>&nbsp;
       </td>
     </tr>
   </table>

   Cela peut ajouter un léger espace supplémentaire sous votre contenu. Veillez donc à prévisualiser et à ajuster votre mise en page si nécessaire.

5. Faites correspondre les couleurs d’arrière-plan
   Masquez les lignes en définissant le même arrière-plan pour le corps et les lignes de tableau problématiques :

   <!--[if gte mso 9]>
     <style>body { background-color: #123456 !important; }</style>
   <![endif]-->

🎯 Exemple combiné

<!--[if (gte mso 9)|(IE)]>
  <style>
    table { border-collapse: collapse !important; border-spacing: 0 !important; }
  </style>
<![endif]-->

<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
  <tr>
    <td style="font-size:16px; line-height:16px; padding:0;">
      Contenu au-dessus de la ligne
      <!--[if gte mso 12]><br /><![endif]-->
      &nbsp;
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Contenu sous la ligne</td></tr>
      </table>
    </td>
  </tr>
</table>

🛠 Aide-mémoire des solutions rapides