Comment faire un email responsive ? Partie 1 : les bases

Un email responsive est un email dont la mise en page s’adapte automatiquement à la taille de l’écran : sur ordinateur, il s’affiche en colonnes ; sur smartphone, ses blocs s’empilent et ses textes et boutons restent lisibles sans zoomer. Pour le construire, on combine une structure en tableaux, du CSS inline, une largeur maximale d’environ 600 pixels et des media queries pour les petits écrans.

Cet article est la première partie d’une trilogie consacrée à la création emailing côté technique. Nous y posons les bases : pourquoi le HTML d’un email est si particulier, quelles règles respecter et quel squelette de code utiliser. La partie 2 traite de la mise en page avec les tableaux et la partie 3 va plus loin dans l’adaptation aux mobiles.

Pourquoi le HTML d’un email est-il si différent d’une page web ?

Le HTML dans un email est assez complexe, car il n’est pas toujours interprété de la même façon selon le client de messagerie. Les logiciels installés comme Outlook ou Thunderbird fonctionnent très différemment des webmails comme Gmail ou des applications mobiles comme Apple Mail. Outlook classique pour Windows, par exemple, utilise le moteur de rendu de Microsoft Word, qui ignore une grande partie du CSS moderne.

Si vous ne voulez pas perdre la raison, mettez-vous tout de suite en tête que vous n’obtiendrez jamais un affichage identique sur tous les clients et tous les appareils. L’objectif est ailleurs : un email lisible, cohérent et cliquable partout. Pour cela, vous pouvez optimiser votre code en suivant quelques règles simples.

Les règles de base d’un email responsive

Des tableaux pour la structure

Le premier gros problème de l’email est que les propriétés CSS de mise en page comme display, float, flexbox ou grid ne sont pas prises en charge de manière fiable par tous les clients. Pour agencer votre email, vous devez donc utiliser des tableaux (<table>), avec l’attribut role="presentation" pour que les lecteurs d’écran ne les annoncent pas comme des tableaux de données.

Du CSS inline

Toujours côté CSS, certains clients mails ne prennent pas en compte la balise <style> placée dans l’en-tête, ou la retirent dans certains cas (par exemple lors d’un transfert). Il faut donc écrire les propriétés de style en ligne, directement dans l’attribut style de chaque élément. La balise <style> reste utile, mais uniquement pour les media queries et les améliorations progressives.

Une largeur maximale d’environ 600 pixels

La largeur de référence d’un email reste autour de 600 pixels. Elle s’affiche bien dans les volets de lecture sur ordinateur et se réduit proprement sur mobile si vous combinez width="100%" et max-width: 600px.

Peu de HTML5

Concernant le HTML lui-même, les clients mail ne font pas preuve de modernité. Restez sur des balises simples et éprouvées (table, td, p, a, img) et déclarez un doctype simple : XHTML 1.0 Transitional ou le doctype HTML5 court sont les plus utilisés. Évitez les balises sémantiques récentes, les vidéos intégrées, les formulaires, le JavaScript et les iframes, qui sont bloqués ou mal interprétés.

Des images qui ont toujours une alternative

Ne sautez pas sans parachute : prévoyez une alternative à l’affichage de votre mail en remplissant les attributs alt de vos balises images, car de nombreux clients bloquent les images par défaut. Donnez aussi une largeur à chaque image et ajoutez display: block pour éviter les espaces parasites. Pour aller plus loin, lisez notre article sur les attributs alt de vos emailings.

Une version en ligne et une version texte

Proposez un lien pour consulter l’email en ligne et une version au format texte brut. La version texte sert de secours aux clients qui n’affichent pas le HTML et elle est attendue par certains filtres anti-spam. Notre guide sur l’email en texte brut explique comment la rédiger.

Quel squelette de code utiliser pour un email responsive ?

Voici une structure de départ qui suit les règles ci-dessus : un tableau centré de 600 pixels maximum, des styles inline et une media query qui agrandit les textes et passe les colonnes en pleine largeur sur mobile.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    @media screen and (max-width: 600px) {
      .colonne { display: block !important; width: 100% !important; }
      .texte { font-size: 16px !important; }
    }
  </style>
</head>
<body style="margin:0; padding:0;">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center">
        <table role="presentation" width="100%" style="max-width:600px;" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td class="colonne" width="50%" style="padding:16px;">Colonne 1</td>
            <td class="colonne" width="50%" style="padding:16px;">Colonne 2</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Sur ordinateur, les deux colonnes s’affichent côte à côte. Sur un écran de moins de 600 pixels, la media query les empile. Les clients qui ignorent les media queries affichent simplement la version ordinateur, réduite à la largeur de l’écran : c’est pourquoi le contenu doit rester lisible même sans adaptation.

Responsive, fluide ou hybride : quelle approche choisir ?

Pour une première newsletter, une maquette à une colonne, éventuellement complétée de blocs à deux colonnes qui s’empilent, couvre la grande majorité des besoins. Si vous voulez creuser la logique mobile, consultez nos conseils pour penser mobile first.

Les bonnes pratiques de lisibilité sur mobile

• Taille de texte : au moins 14 à 16 pixels pour le corps du texte et 22 pixels environ pour les titres.
• Boutons : des zones cliquables d’au moins 44 pixels de haut, bien espacées, plutôt que des liens texte serrés.
• Hiérarchie : le message principal et l’appel à l’action visibles dans le premier écran.
• Images légères : compressées, avec une largeur adaptée, pour un chargement rapide en 4G.
• Contraste : suffisant pour une lecture en extérieur, et pensé aussi pour le mode sombre, qui inverse parfois les couleurs.

Comment tester un email responsive avant l’envoi ?

Pour savoir qui interprète quoi et choisir au mieux votre méthode de création, appuyez-vous sur les guides de compatibilité CSS, comme celui de Campaign Monitor ou le site Can I Email, qui indiquent pour chaque propriété son support dans les principaux clients mails. Ensuite :

1. Envoyez-vous des emails de test sur plusieurs boîtes (Gmail, Outlook, Apple Mail, un webmail français).
2. Ouvrez-les sur ordinateur, sur un smartphone et sur une tablette.
3. Désactivez les images pour vérifier que les textes alternatifs suffisent.
4. Vérifiez chaque lien et la lisibilité en mode sombre.

Notre liste de vérification QA pour les emails HTML détaille tous les points à contrôler.

Faut-il coder soi-même son email responsive ?

Coder à la main est formateur et utile pour des besoins très spécifiques. Mais pour la plupart des campagnes, un éditeur qui génère du code compatible vous fait gagner beaucoup de temps. Avec Mailpro, l’éditeur de newsletter en glisser-déposer produit des newsletters responsive sans écrire une ligne de code, à partir de plus de 600 modèles de newsletters prêts à personnaliser.

Questions fréquentes sur l’email responsive

Quelle est la largeur idéale d’un email responsive ?

Autour de 600 pixels pour la version ordinateur, avec une largeur à 100 % sur mobile. Au-delà de 650 pixels, l’email risque d’être coupé dans certains volets de lecture.

Gmail prend-il en charge les media queries ?

Oui, Gmail accepte aujourd’hui la balise <style> et les media queries dans la plupart des cas. Le rendu reste toutefois variable selon l’application et le type de compte, d’où l’intérêt de garder des styles inline comme base.

Pourquoi mon email s’affiche-t-il mal dans Outlook ?

Outlook classique pour Windows utilise le moteur de rendu de Word, qui ignore notamment max-width, les images de fond CSS et de nombreuses propriétés. On contourne ce problème avec des tableaux à largeur fixe placés dans des commentaires conditionnels réservés à Outlook.

Un email responsive améliore-t-il les résultats ?

Un email illisible sur smartphone est souvent supprimé sans être lu. Un affichage adapté facilite la lecture et le clic, ce qui soutient vos taux de clics et limite les désinscriptions.

➙ À suivre, partie 2 : la mise en page avec les tableaux.