Un email est lu sur un ordinateur, un smartphone, une tablette, dans Gmail, Outlook, Apple Mail ou une application mobile, en mode clair ou sombre. Le responsive design permet à un même message de rester lisible et cliquable dans tous ces contextes. Ce guide présente les principes, les techniques HTML et CSS, les bonnes pratiques de mise en page et la méthode de test.
Points clés à retenir
- Un email responsive adapte sa mise en page, ses images, ses textes et ses boutons à la taille de l'écran.
- Le code d'un email reste particulier : structure en tableaux, CSS inline, media queries en complément, ajustements spécifiques pour Outlook.
- Une seule colonne, une hiérarchie claire, des boutons faciles à toucher et des images légères font l'essentiel du travail.
- Le message doit rester compréhensible si les images ne s'affichent pas, grâce aux textes alternatifs.
- Rien ne remplace les tests sur les messageries et appareils réellement utilisés par votre audience.
Qu'est-ce qu'un email responsive ?
Un email responsive est conçu pour s'adapter automatiquement à l'écran sur lequel il est lu. Sur ordinateur, il peut afficher plusieurs colonnes ; sur smartphone, les blocs s'empilent, les textes restent lisibles sans zoom et les boutons sont assez grands pour être touchés du doigt.
L'objectif n'est pas seulement esthétique. Un email difficile à lire sur mobile perd l'attention du lecteur, réduit les clics et peut générer des désinscriptions. Le responsive design est donc un levier direct de performance pour vos campagnes emailing.
Un kit HTML prêt à router
Besoin d'un email testé sur les principales messageries ? Nos équipes s'en chargent.
Responsive, fluide, hybride : les approches de mise en page
| Approche | Principe | Avantages | Limites |
|---|---|---|---|
| Fixe | Largeur figée en pixels | Simple à coder | Illisible ou tronqué sur mobile : à éviter |
| Fluide | Largeurs en pourcentage | S'adapte à toutes les largeurs | Lignes trop longues sur grand écran |
| Responsive | Mise en page fluide + media queries | Contrôle fin de l'affichage par taille d'écran | Certaines messageries ignorent les media queries |
| Hybride (« spongy ») | Largeurs maximales + blocs qui s'empilent naturellement, avec code conditionnel pour Outlook | Fonctionne même sans media queries | Code plus technique |
En pratique, beaucoup d'intégrateurs combinent l'approche hybride, qui garantit un affichage correct partout, et des media queries pour affiner le rendu là où elles sont prises en charge.
Les techniques HTML et CSS
Une structure en tableaux
Les moteurs de rendu des messageries sont plus limités que les navigateurs web. Outlook pour Windows, notamment, s'appuie sur le moteur de Word et ne gère pas correctement Flexbox ou CSS Grid. La structure en tableaux HTML imbriqués reste la méthode la plus fiable.
Du CSS inline
Certaines messageries suppriment ou ignorent les styles placés dans l'en-tête. Les styles essentiels (couleurs, tailles, marges) doivent être écrits directement dans les attributs style des éléments. Les outils d'intégration et les plateformes de routage proposent généralement une conversion automatique en inline.
Des media queries en complément
Les media queries appliquent des styles selon la largeur de l'écran : passer de deux colonnes à une, agrandir la police, élargir les boutons, masquer un élément secondaire. Elles enrichissent l'affichage sur les messageries qui les prennent en charge, sans être indispensables au rendu de base.
Des commentaires conditionnels pour Outlook
Les commentaires conditionnels (<!--[if mso]>) permettent de donner à Outlook pour Windows un code spécifique, par exemple des tableaux de largeur fixe autour des blocs fluides.
Des largeurs maximales
Fixez une largeur maximale au conteneur principal (souvent autour de 600 pixels) et des largeurs en pourcentage aux éléments internes. Le contenu reste confortable à lire sur ordinateur et se resserre sur mobile.
Faites tester vos créations
Nous vérifions l'affichage et le routage avant diffusion.
Les bonnes pratiques de conception
Une colonne et une hiérarchie claire
Une mise en page à une colonne est la plus robuste sur mobile. Placez la promesse et l'appel à l'action principal en haut, puis développez. Le lecteur doit comprendre l'essentiel en quelques secondes de défilement.
Des textes lisibles
Choisissez une taille de police confortable sur smartphone, un interligne aéré et un contraste suffisant entre le texte et le fond. Utilisez des polices système ou des polices web avec des polices de secours, car toutes les messageries ne chargent pas les polices personnalisées.
Des boutons faciles à toucher
Un bouton doit être assez grand pour le doigt : Apple recommande une zone tactile d'au moins 44 × 44 points dans ses règles d'interface. Préférez des boutons codés en HTML (texte sur fond coloré) plutôt que des images, pour qu'ils restent visibles si les images sont bloquées. Espacez les liens pour éviter les erreurs de clic.
Des images fluides et légères
- Appliquez
max-width: 100%et une hauteur automatique pour que les images se redimensionnent. - Pour les écrans haute densité, utilisez des images deux fois plus larges que leur taille d'affichage, puis fixez la largeur dans le code.
- Compressez les fichiers pour accélérer l'affichage, notamment en connexion mobile.
- Ajoutez un texte alternatif informatif à chaque image et une couleur de fond aux blocs visuels, pour que l'email reste compréhensible quand les images ne s'affichent pas.
- Évitez un email constitué d'une seule grande image : il est illisible sans images et souvent moins bien traité par les filtres.
Le logo
Placez-le en haut du message, dans un format net et léger (PNG ou JPEG optimisé), avec une version lisible sur fond sombre. Voir notre guide pour optimiser le logo de vos emails.
Le mode sombre
De nombreuses messageries proposent un mode sombre qui inverse ou ajuste les couleurs. Vérifiez que vos logos, pictogrammes et textes restent lisibles, et prévoyez des contours ou des fonds transparents adaptés.
La vidéo
La lecture de vidéo dans l'email n'est prise en charge que par une minorité de messageries. La solution la plus sûre est une image d'aperçu avec un bouton de lecture, qui renvoie vers la vidéo hébergée sur une page web.
Tester avant chaque envoi
- Rendu : vérifiez l'affichage dans les principales messageries (Gmail, Outlook, Apple Mail, Yahoo) sur ordinateur et sur mobile, avec un outil de prévisualisation ou des comptes de test.
- Images bloquées : relisez l'email sans images.
- Mode sombre : contrôlez les logos et les contrastes.
- Liens : cliquez sur chaque lien et vérifiez les paramètres de suivi.
- Délivrabilité : un code propre et un bon équilibre entre texte et images participent à la réputation de vos envois. Voir notre guide de la délivrabilité.
Questions fréquentes
Quelle largeur choisir pour un email ?
Une largeur maximale autour de 600 pixels est une convention largement utilisée : elle reste lisible dans les volets de lecture sur ordinateur et se resserre facilement sur mobile.
Les media queries fonctionnent-elles partout ?
Non. Elles sont prises en charge par de nombreuses messageries, mais pas toutes. Une structure hybride garantit un affichage correct même lorsqu'elles sont ignorées.
Faut-il coder ses emails à la main ?
Pas nécessairement. Les éditeurs des plateformes de routage et les frameworks dédiés produisent du code compatible. Le codage manuel reste utile pour des designs sur mesure, à condition de tester systématiquement.
Comment savoir sur quels appareils mes emails sont lus ?
Les statistiques de votre plateforme de routage indiquent généralement la répartition par messagerie et par type d'appareil. Testez en priorité sur ceux que votre audience utilise le plus.
Lancez une campagne qui s'affiche partout
Parlez de votre projet avec un expert Leadiya.
