Un email qui se déforme sur mobile ou qui oblige à zoomer fait fuir les lecteurs. Le email HTML responsive garantit une lecture confortable sur smartphone, tablette et desktop en adaptant la largeur, la taille des polices et la disposition des blocs.

Pourquoi le responsive est indispensable en email

Plus de 40 % des ouvertures d’emails ont lieu sur mobile. Sans adaptation, vos colonnes deviennent illisibles, les boutons trop petits et le taux de clic chute. Un code responsive repose sur des media queries supportées par la majorité des clients (Gmail, Apple Mail, Outlook sur le web, etc.), tout en prévoyant des fallbacks pour les clients plus anciens.

Structure de base d’un email responsive

Utilisez une table conteneur en width: 100% avec une max-width en pixels (souvent 600 px). À l’intérieur, les colonnes passent en display: block; width: 100% dans une media query max-width: 600px. Les images doivent avoir max-width: 100% et height: auto pour éviter le débordement.

Media queries et compatibilité

Les media queries dans les emails sont supportées par Gmail (app mobile et web), Apple Mail, Yahoo Mail, Outlook.com et d’autres. En revanche, les versions bureau d’Outlook (Windows) utilisent le moteur Word et ne les interprètent pas : il faut donc un design « hybride » ou à colonne unique qui reste correct sans media query.

En résumé

  • Table conteneur 100 % avec max-width 600 px.
  • Media query max-width 600 px pour passer les colonnes en bloc pleine largeur.
  • Images fluides (max-width: 100 %, height: auto).
  • Tester sur plusieurs clients (Litmus, Email on Acid ou MailScan) avant envoi.

Pour vérifier automatiquement le responsive et la compatibilité de vos emails, analysez votre code avec MailScan.