← Tous les articles
· 14 min de lecture

Compatibilité des clients de messagerie : Ce qui fonctionne où

Savoir quelles fonctionnalités CSS et HTML fonctionnent dans quels clients de messagerie.

La compatibilité des clients de messagerie est le défi principal du développement d’emails HTML. Contrairement aux navigateurs web, qui ont largement convergé vers des standards, les clients de messagerie rendent le HTML et le CSS de manière incohérente. Ce guide documente ce qui fonctionne où.

Si vous voulez éviter de gérer la compatibilité directement, des constructeurs d’emails comme Sequenzy et des frameworks comme MJML gèrent ces problèmes pour vous. Mais comprendre le paysage vous aide à prendre des décisions éclairées.

Les principaux clients de messagerie

Outlook (Windows)

Le client le plus difficile. Outlook 2007-2019 utilise le moteur de rendu de Microsoft Word, pas un moteur de navigateur. Cela signifie :

  • Pas de flottants CSS
  • Pas d’images de fond sur les div (les cellules de tableau fonctionnent)
  • Support limité des marges/rembourrages
  • Pas de positionnement CSS
  • Les tableaux sont requis pour la mise en page

Outlook 365 (nouveau Outlook) est légèrement meilleur mais a toujours des limitations significatives.

Gmail

Gmail supprime les balises style sauf si elles sont dans la tête (pour certains clients). Il supprime aussi de nombreuses propriétés CSS. Limitations clés :

  • Supprime certains sélecteurs CSS
  • Pas de support pour les requêtes @media intégrées dans certains contextes
  • Styles en ligne requis pour la fiabilité
  • Bloque les images externes par défaut

L’app Gmail (mobile) a un meilleur support CSS que Gmail web dans certains domaines.

Apple Mail (macOS/iOS)

Le client de messagerie le plus performant. Utilise WebKit, similaire à Safari. Supporte :

  • Requêtes média
  • Animation CSS (cas d’utilisation limités)
  • Images de fond
  • Propriétés CSS modernes

Si votre audience est principalement composée d’utilisateurs Apple, vous avez plus de flexibilité en design.

Yahoo Mail

Support CSS modéré. Supprime certains styles mais moins agressivement que Gmail. Supporte les images de fond avec des solutions de repli.

Outlook.com (Hotmail)

Différent d’Outlook de bureau. Utilise un moteur de rendu basé sur navigateur. Meilleur support CSS qu’Outlook de bureau mais a toujours des particularités.

Support des propriétés CSS

Sûr à utiliser partout

/* These work in all major clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* on table cells */
width: 100%;
max-width: 600px;

Support partiel (test requis)

/* Work in most clients, issues in Outlook */
border-radius: 4px; /* No Outlook support */
background-image: url(...); /* Use VML for Outlook */
box-shadow: ...; /* Limited support */
margin: 10px; /* Inconsistent in Outlook */

À éviter ou utiliser avec précaution

/* These cause problems */
display: flex; /* No email support */
display: grid; /* No email support */
position: absolute/relative; /* Very limited */
float: left/right; /* Outlook issues */
transform: ...; /* Limited support */
animation: ...; /* Only Apple Mail */

Techniques de mise en page

Tableaux pour la structure

Les tableaux restent la méthode de mise en page fiable :

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Commentaires conditionnels Outlook

Cibler spécifiquement Outlook :

<!--[if mso]>
  <!-- Outlook-only code -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Content for all clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

VML pour les images de fond Outlook

Les images de fond sur les sections nécessitent VML pour Outlook :

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Content here
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Images

Code d’image de base

<img
  src="https://example.com/image.jpg"
  alt="Description"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Attributs clés :

  • width/height : Définir les dimensions (Outlook en a besoin)
  • display: block : Supprime l’espace sous l’image
  • max-width: 100 % : Échelle responsive
  • border: 0 : Supprime la bordure d’image liée

Formats d’image

  • JPG : Photos, images complexes
  • PNG : Transparence, graphiques simples
  • GIF : Animation (avec précaution)
  • SVG : Support limité, éviter dans les emails
  • WebP : Non supporté dans Outlook

Polices

Pile de polices web-sûres

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Polices personnalisées

Les polices web fonctionnent dans certains clients (Apple Mail, iOS, certains Android). Utiliser avec des solutions de repli :

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text with custom font
</p>

Outlook et Gmail utiliseront la police de repli. Apple Mail utilisera la police personnalisée.

Requêtes média

Le support varie considérablement :

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

Support des requêtes média :

  • Apple Mail : Support complet
  • iOS Mail : Support complet
  • Gmail App (iOS) : Support
  • Gmail App (Android) : Support
  • Gmail (web) : Limité
  • Outlook : Pas de support

Utiliser des constructeurs d’emails pour la compatibilité

Les constructeurs d’emails abstrayant les préoccupations de compatibilité. Sequenzy génère du HTML qui fonctionne dans tous les clients. Vous concevez visuellement, l’outil gère la sortie technique.

Des frameworks comme MJML compilent un balisage sémantique en HTML compatible. Vous écrivez du code propre, le framework génère les tableaux imbriqués et les styles en ligne.

Des outils de test comme Litmus montrent le rendu dans plus de 90 clients. Voyez les problèmes avant l’envoi.

Stratégie de test

  1. Tester dans Outlook en premier. S’il fonctionne là, il fonctionne probablement partout.
  2. Vérifier Gmail. La suppression de CSS peut causer des problèmes.
  3. Vérifier sur mobile. Plus de 60 % des ouvertures sont sur mobile.
  4. Tester sans images. Assurez-vous que le message est clair sans images.

Le mot de la fin

La compatibilité des clients de messagerie est complexe mais gérable. Restez aux techniques éprouvées : tableaux pour la mise en page, styles en ligne, polices web-sûres avec replis. Testez dans tous les clients avant l’envoi.

Pour les équipes qui veulent éviter la complexité, des outils comme Sequenzy et MJML gèrent la compatibilité automatiquement. La sortie est testée, et vous vous concentrez sur le contenu plutôt que sur les particularités de rendu.