Email responsive : guide technique des mises en page qui s’adaptent

La règle la plus utile tient en trois phrases. Construisez d’abord une mise en page fluide, avec des tables à 100 % de largeur plafonnées par un max-width, qui reste lisible sans aucun CSS avancé. Ajoutez ensuite des requêtes média pour polir l’affichage mobile là où elles sont prises en charge. Enfin, prévoyez une solution de repli pour Outlook sur Windows, qui ne lit pas le CSS comme un navigateur.

Ce que disent les chiffres de prise en charge

Avant de choisir une technique, regardez ce que caniemail.com estime pour chacune. Les pourcentages ci-dessous, relevés le 7 octobre 2026, portent sur les clients suivis par le site, pas sur votre liste d’abonnés : « complet » veut dire que le client la gère, « partiel » qu’il y a des limites ou des bogues.

Le message est simple : aucune de ces techniques n’est universelle, donc la structure doit reposer sur la plus répandue, la table fluide, et tout le reste doit être un bonus que l’on peut perdre sans casser la lecture.

Mises en page fluides : la base

Au lieu de largeurs fixes en pixels, donnez à la table une largeur de 100 % et plafonnez-la :

<table role="presentation" width="100%" style="max-width: 600px;">
  <tr>
    <td style="padding: 20px;">
      Le contenu s'adapte à la largeur disponible
    </td>
  </tr>
</table>

Sur un écran large, l’email occupe 600 px ; sur un téléphone, il se réduit à la largeur disponible. Aucune requête média n’intervient. Pensez à doubler l’attribut width d’une valeur en CSS, car, d’après caniemail, le comportement de max-width varie dans Outlook : selon les versions, il ne s’applique qu’aux tables, ou pas aux tables du tout.

Les requêtes média pour améliorer l’affichage

Une requête média permet d’empiler des colonnes, de réduire des marges ou de masquer un élément secondaire sur petit écran :

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

Le !important est indispensable, car les styles en ligne l’emportent sinon. Gardez à l’esprit une limite que la documentation de Maizzle rappelle : Gmail sur Android avec une adresse IMAP ignore les balises style. Dans ce cas, aucune de vos requêtes ne s’applique, et seule la mise en page fluide vous protège.

La méthode hybride : des colonnes sans requêtes média

Cette technique, aussi appelée « méthode éponge », s’appuie sur des commentaires conditionnels que seul Outlook lit, et sur des blocs inline-block avec un max-width pour tous les autres :

<!--[if mso]>
<table role="presentation" width="600">
<tr>
<td width="300">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
  Contenu de la colonne 1
</div>

<!--[if mso]>
</td>
<td width="300">
<![endif]-->

<div style="display: inline-block; width: 100%; max-width: 300px; vertical-align: top;">
  Contenu de la colonne 2
</div>

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

Outlook voit une table à deux cellules de 300 px. Les autres clients voient deux blocs qui se placent côte à côte quand la place le permet et s’empilent dès qu’elle manque. Le vertical-align: top évite que deux colonnes de hauteurs différentes se décalent. C’est plus verbeux qu’une requête média, mais cela fonctionne même là où la balise style est ignorée.

Images responsives

<img src="image.jpg"
     width="600"
     style="display: block; max-width: 100%; height: auto;"
     alt="Description de l'image">

L’attribut width donne la taille prévue, max-width: 100 % empêche de dépasser le conteneur et height: auto garde les proportions. Le display: block supprime l’espace parasite sous l’image. N’oubliez pas le texte alternatif : sur une image qui contient le message, il est la seule chose que verront les lecteurs dont les images sont bloquées.

Des boutons faciles à toucher

<table role="presentation">
  <tr>
    <td style="background-color: #007bff; border-radius: 4px; padding: 12px 24px;">
      <a href="https://example.com"
         style="color: #ffffff; text-decoration: none; font-weight: bold; display: block;">
        Voir l'offre
      </a>
    </td>
  </tr>
</table>

Sur mobile, on touche au lieu de cliquer. Apple recommande une cible d’au moins 44 par 44 points, d’où le padding généreux. Mettre le padding sur la cellule plutôt que sur le lien est un choix voulu : la documentation de Maizzle explique que l’Outlook classique ne gère pas le padding CSS sur les éléments en ligne comme a, ce qui oblige ses composants de bouton à recourir à des astuces propres à Outlook. La documentation de MJML signale pour sa part que son mj-button n’est pas entièrement cliquable dans certains clients : testez en touchant les coins du bouton.

Laisser un framework gérer l’empilement

Avec MJML, les colonnes d’une section s’empilent d’elles-mêmes sur mobile. La documentation indique que les colonnes sont des conteneurs responsives empilés verticalement sur un affichage mobile :

<mj-section>
  <mj-column>
    <mj-text>Colonne 1</mj-text>
  </mj-column>
  <mj-column>
    <mj-text>Colonne 2</mj-text>
  </mj-column>
</mj-section>

Pour garder deux colonnes côte à côte même sur mobile, par exemple une ligne prix et stock, enveloppez-les dans un mj-group, dont la documentation dit qu’il empêche l’empilement :

<mj-section>
  <mj-group>
    <mj-column>
      <mj-text align="center">Prix</mj-text>
    </mj-column>
    <mj-column>
      <mj-text align="center">Stock</mj-text>
    </mj-column>
  </mj-group>
</mj-section>

Le point de bascule se règle avec mj-breakpoint, qui contrôle la largeur à partir de laquelle la mise en page change. Maizzle, de son côté, fournit des composants Row et Column et réécrit les noms de classes Tailwind avec deux-points pour qu’ils survivent dans Gmail, de sorte que sm:text-lg devient sm-text-lg. Si vous hésitez entre les deux, notre comparatif Maizzle et MJML détaille les différences.

Trois patrons qui reviennent sans cesse

Colonne unique, mobile d’abord

Une seule colonne centrée de 600 px maximum fonctionne partout et demande presque aucun ajustement. C’est le bon choix pour une confirmation de commande ou un message transactionnel.

Deux colonnes qui s’empilent

Côte à côte sur bureau, l’une sous l’autre sur mobile. Utilisez la méthode hybride si vous voulez que cela marche sans requêtes média, ou MJML si vous préférez qu’on l’écrive à votre place.

Image principale suivie d’un appel à l’action

Une image pleine largeur, un titre, une phrase, un bouton. L’image s’adapte, le texte reste lisible, et le tout survit à l’absence de CSS.

Tester le rendu réel

• Envoyez-vous l’email sur plusieurs appareils réels, y compris un compte Gmail non-Google sur Android.
• Passez par un service d’aperçus comme Litmus ou Email on Acid pour la liste complète des clients ; leurs différences et leurs tarifs sont dans notre comparatif des deux outils.
• Testez en portrait et en paysage, et avec les images désactivées.
• Vérifiez le mode sombre, détaillé dans notre guide du dark mode.

Pour aller plus loin sur les limites du CSS, lisez le guide du CSS dans les emails, et pour choisir les clients à tester, le guide de compatibilité des clients.

En résumé

Un email responsive fiable commence par une table fluide, s’améliore avec des requêtes média là où elles passent, et garde la méthode hybride pour les colonnes qui doivent aussi marcher sous Outlook. Les chiffres de prise en charge montrent qu’aucune technique ne couvre tout : testez donc là où vos lecteurs ouvrent réellement leurs messages.