Chaque client mail (Gmail, Outlook, Apple Mail, etc.) interprète le HTML et le CSS différemment. Connaître la compatibilité HTML email évite les mises en page cassées et les images ou boutons qui ne s’affichent pas.

Pourquoi la compatibilité varie

Les clients utilisent des moteurs de rendu différents : WebKit (Apple, Gmail app), Gecko (Thunderbird), ou même Word (Outlook Windows). Certains autorisent les media queries et le CSS dans la balise <style>, d’autres n’acceptent que le CSS inline.

Balises et propriétés à privilégier

Privilégiez les tables pour la structure, les balises sémantiques simples (p, strong, a, ul, li). Pour le style, l’inline reste le plus sûr ; les propriétés comme font-size, color, background-color, padding sont largement supportées. Évitez flexbox, grid et position fixed dans la majorité des cas.

En résumé

  • Structure en tables, CSS inline pour la compatibilité maximale.
  • Vérifier les spécificités Gmail, Outlook et Apple Mail avant envoi.
  • Utiliser un outil d’analyse (comme MailScan) pour détecter les problèmes de rendu.