Campagne illisible sur mobile ou cassée dans Outlook ? Les causes techniques réelles, le symptôme propre à chaque client mail, et comment les corriger.
Un rendu cassé ne se voit jamais depuis votre poste. Vous validez la maquette sur un grand écran, tout est aligné, vous envoyez. Le lendemain un client vous transfère une capture d’écran avec les colonnes empilées de travers et un bouton coupé en deux. Le Baromètre du numérique 2026 de l’Arcep chiffre à 91 % la part des Français de 12 ans et plus équipés d’un smartphone. Cette capture d’écran, c’est donc le rendu réel d’une bonne partie de votre liste.
Le réflexe habituel consiste à accuser le template. Neuf fois sur dix, le template n’y est pour rien : c’est un client mail précis qui applique ses propres règles de rendu. Reste à savoir lequel, et pourquoi.
C’est la cause numéro un en B-to-B, et elle surprend encore. Depuis Outlook 2007, les versions bureau sous Windows n’affichent pas le HTML avec un moteur web mais avec celui de Microsoft Word. Microsoft le documente noir sur blanc dans sa page d’archive « Word 2007 HTML and CSS Rendering Capabilities in Outlook », qui liste les propriétés purement et simplement ignorées : float, position, max-width, background-position, entre autres.
Traduction pratique : toute mise en page construite sur des div flottantes s’effondre. Les colonnes passent les unes sous les autres, les largeurs explosent, les marges disparaissent. Le remède n’a pas changé depuis quinze ans, aussi peu élégant soit-il : structure en tableaux imbriqués, largeurs déclarées en attribut HTML width et pas seulement en CSS, et commentaires conditionnels MSO pour les cas particuliers. Vos destinataires en agence ou en grand compte sont massivement sur Outlook. Ignorer ce moteur revient à sacrifier votre cible la plus intéressante.
Le symptôme est reconnaissable entre tous : le message s’arrête au milieu, suivi d’un lien « Afficher l’intégralité du message ». Gmail coupe le HTML au-delà d’un certain poids, un seuil situé autour de 102 Ko de code. Précision utile, parce que ce chiffre circule partout comme une vérité officielle : Google ne le documente nulle part. Il vient de tests empiriques répétés par les plateformes d’envoi et la communauté technique depuis des années, ce qui le rend fiable en pratique mais pas opposable.
Les conséquences dépassent l’esthétique. Le pixel de mesure d’ouverture se trouve en général en pied de page, donc dans la partie coupée : vos statistiques deviennent fausses. Le lien de désabonnement aussi se retrouve derrière la coupure, ce qui vous met en difficulté sur le plan réglementaire et pousse les mécontents vers le bouton « spam ». Pour redescendre sous le seuil, chassez le CSS mort, les commentaires laissés par l’éditeur, et surtout les images encodées en base64 qui font gonfler le poids du code d’un coup.
Beaucoup de templates reposent entièrement sur @media pour basculer en une colonne sur petit écran. Le référentiel Can I Email donne un taux de support global de 80,48 % pour les media queries. Les 20 % restants ne sont pas anecdotiques : Outlook bureau sous Windows, Thunderbird et l’application Samsung Email les ignorent, et Gmail n’en supporte qu’une partie, sans imbrication ni requête sur la hauteur.
Un template qui n’est responsive que grâce aux media queries est donc un template qui casse chez ces clients-là. La logique à adopter est inverse : construisez une base fluide qui tient toute seule, largeur maximale de 600 à 640 pixels, dimensions en pourcentage, images en width: 100%. La media query vient ensuite peaufiner, elle ne porte pas la structure.
Voilà l’angle mort du moment. La requête prefers-color-scheme n’est supportée que par 41,86 % des clients mail selon Can I Email. Apple Mail, Gmail et Outlook la gèrent, Yahoo Mail et AOL non : ces derniers inversent les couleurs de façon autoritaire, sans vous laisser la main.
Les dégâts sont toujours les mêmes. Un logo noir sur fond transparent devient invisible. Un PNG à transparence se retrouve entouré d’un halo blanc disgracieux sur fond sombre. Un texte gris foncé passe en gris clair sur un fond qui l’est resté, et devient illisible. Rien de tout cela n’apparaît en prévisualisation classique. Il faut ouvrir la campagne sur un téléphone en mode sombre, ce que très peu d’équipes font avant l’envoi.
Le montage tout-en-un exporté depuis un outil graphique reste une pratique courante, et une mauvaise idée. Si l’image ne se charge pas, le destinataire reçoit un rectangle vide. Gmail affiche les images par défaut depuis 2013 via son proxy, mais conditionne encore l’affichage quand l’expéditeur lui paraît douteux, et les messageries d’entreprise appliquent souvent des politiques plus strictes.
Écrivez donc du vrai texte HTML pour tout ce qui compte : titre, argument, appel à l’action. Renseignez un attribut alt explicite sur chaque image, en soignant sa formulation, puisque c’est parfois le seul contenu que vos destinataires liront.
Un lien texte de 12 pixels au milieu d’un paragraphe se clique très bien à la souris. Au doigt, sur un écran de téléphone, c’est une loterie. Apple fixe dans ses Human Interface Guidelines une zone tactile minimale de 44 x 44 points. Google recommande 48 x 48 dp dans Material Design, avec 8 dp d’espacement entre deux cibles. Le W3C, avec le critère 2.5.8 des WCAG 2.2, retient un plancher de 24 x 24 pixels CSS.
Côté typographie, comptez 16 pixels pour un corps de texte confortable sur mobile, et considérez 13 pixels comme un plancher absolu. En dessous, Apple Mail sur iOS applique un zoom automatique qui décale toute la mise en page et fait déborder vos colonnes. La balise <meta name="x-apple-disable-message-reformatting"> neutralise ce comportement.
Les prévisualisations intégrées aux plateformes d’envoi simulent un rendu, elles ne le reproduisent pas. Avant chaque campagne un peu structurante, envoyez-vous une version de test et ouvrez-la sur cinq environnements réels : Gmail sur Android, Gmail sur iPhone, Outlook bureau, Apple Mail, et un webmail français type Orange ou Free. Un quart d’heure, pas davantage. Le mode sombre se teste dans la foulée sur le même téléphone.
Cette vérification systématique fait partie des réflexes qui évitent la plupart des erreurs qui pénalisent vos campagnes, bien avant les questions de segmentation ou d’objet du message. Un email illisible ne convertit pas, quelle que soit la qualité du ciblage derrière.
Dans la majorité des cas, le template repose sur des propriétés CSS que les clients mail n’appliquent pas, ou sur des media queries qu’une partie d’entre eux ignore. Les autres causes fréquentes sont un poids de code excessif, une largeur fixe supérieure à 640 pixels et une mise en page construite en div flottantes.
Outlook bureau sous Windows utilise le moteur de rendu de Word, qui ignore float, position et max-width. Repassez la structure en tableaux imbriqués, déclarez les largeurs en attribut HTML plutôt qu’en CSS, et isolez les correctifs propres à Outlook dans des commentaires conditionnels MSO.
Certains clients mail et de nombreuses messageries d’entreprise bloquent les images tant que le destinataire ne les autorise pas. Une réputation d’expéditeur dégradée accentue le phénomène. Renseignez systématiquement l’attribut alt et ne confiez jamais votre message principal à une image seule.
De 600 à 640 pixels de largeur maximale, une convention professionnelle stable liée à la taille des volets de prévisualisation. En dessous de cette limite, travaillez en pourcentages plutôt qu’en valeurs fixes pour que la mise en page s’adapte d’elle-même, même sans media query.
Visez 16 pixels pour le corps de texte, 13 pixels comme plancher à ne pas franchir. Apple Mail sur iOS agrandit automatiquement les textes trop petits, ce qui casse la mise en page. La balise x-apple-disable-message-reformatting désactive ce redimensionnement.
Gmail coupe les messages dont le code HTML dépasse environ 102 Ko. Le seuil n’est pas documenté par Google mais il est constaté depuis des années. Allégez le CSS inutile, supprimez les commentaires générés par votre éditeur et bannissez les images encodées en base64.
Oui, tant qu’Outlook bureau représente une part significative de vos destinataires B-to-B. Flexbox et Grid restent inutilisables de façon fiable en email. Les tableaux imbriqués demeurent la seule structure qui tienne sur l’ensemble du parc de clients mail.
Ce contenu est réalisé par Ediware. Consultez les sites officiels pour les informations les plus récentes.