L’IA et l’e-mail HTML : ce que produisent ChatGPT, Claude et Gemini

Une question circule en ce moment dans les milieux de l’emailing, et elle ressemble à peu près à ceci : maintenant qu’une IA peut me construire un e-mail HTML en dix secondes, ai-je encore besoin d’un éditeur d’e-mails ?

La question est légitime. L’e-mail n’est pas un petit canal. Dans le monde, 376 milliards d’e-mails sont envoyés chaque jour en 2025 (Radicati), le canal rapporte encore environ $36 pour chaque $1 dépensé selon Litmus, et une majorité de marketeurs utilise désormais l’IA quelque part dans son flux de travail, d’après l’étude 2025 de HubSpot sur les tendances de l’IA. Si un outil sait générer un modèle fini à partir d’un prompt d’une ligne, se passer de l’éditeur ressemble à un gain évident.

Puis vous l’envoyez pour de vrai, et le tableau change vite. Sur les e-mails que nous contrôlons chez Unspam, 30 % seulement passent nos contrôles de bonnes pratiques HTML (les chiffres de benchmark cités ici viennent de notre benchmark de délivrabilité, sur les douze mois glissants arrêtés en juin 2026). Le corps HTML est la partie la plus faible de la campagne moyenne que nous mesurons, derrière l’objet, derrière les liens, derrière même les contenus déclencheurs de spam. Et c’est exactement celle que l’on confie aujourd’hui à un outil qui n’a jamais été conçu pour ça.

Cet écart, c’est toute l’histoire. Ces outils savent écrire un e-mail. Ils ne savent pas encore écrire du HTML d’e-mail, et ce sont deux choses très différentes. Cet article détaille ce que produisent réellement les principaux outils d’IA, pourquoi le HTML d’e-mail est une langue à part, où la différence se voit en boîte de réception, et comment un éditeur dédié comme Postcards comble l’écart. Il se termine par une grille de contrôle avant envoi applicable à n’importe quel e-mail, qu’il ait été écrit par un modèle ou par vous.

Une idée traverse tout le reste, autant l’énoncer clairement dès maintenant : paraître fini dans un navigateur et s’afficher correctement dans une boîte de réception sont deux choses différentes, et le seul test qui tranche entre les deux consiste à ouvrir le fichier dans un vrai contrôle en boîte de réception.

Voici ce que couvre cet article :

  • Pourquoi le HTML web et le HTML d’e-mail sont deux langues totalement différentes, et sur quelles règles précises l’écart se joue
  • Ce que produisent réellement v0, Bolt, Cursor, Replit, ChatGPT, Claude, Gemini et Lovable par défaut, et où chacun échoue
  • Ce que valent l’IA intégrée aux ESP et les éditeurs d’e-mails dédiés sur la portabilité et le rendu
  • Où un HTML cassé vous coûte du placement en boîte de réception, chiffres du benchmark Unspam à l’appui
  • Une grille de contrôle avant envoi en douze points que tout e-mail devrait passer
  • Le flux de travail qui met l’IA là où elle aide et un éditeur testé là où ça compte

Le HTML web et le HTML d’e-mail ne sont pas la même langue

Si les outils d’IA butent sur l’e-mail, cela n’a rien à voir avec l’intelligence du modèle. C’est que presque tous ces générateurs ont été entraînés à produire des pages web modernes, alors que l’e-mail repose sur un jeu de règles complètement différent et bien plus ancien.

Un navigateur, c’est un moteur ; une boîte de réception, c’est des dizaines

Un navigateur web est un moteur de rendu unique, moderne et conforme aux standards. Une boîte de réception, c’est des dizaines de moteurs incohérents. L’un des clients de messagerie les plus déployés en entreprise, Outlook sur Windows, affiche votre HTML avec le moteur de Microsoft Word, pas avec un navigateur. Gmail réécrit et supprime des parties de votre code avant de l’afficher. Le site de référence Can I Email suit plus de 300 fonctionnalités HTML et CSS dans environ 20 clients de messagerie, loin des 50 fonctionnalités couvertes à son lancement en 2019. Beaucoup de ses entrées n’ont pas été retestées depuis des années : les taux de support sont donc des estimations plutôt qu’un instantané, et l’écart entre le meilleur et le pire client est énorme.

Où vos lecteurs ouvrent réellement leurs e-mails

Voici où la plupart des gens lisent, et c’est ce qui rend le sujet important :

Client de messageriePart des ouvertures (Litmus, mai 2026)
Apple Mail (iPhone, iPad, Mac)64,7 %
Gmail24,1 %
Outlook (ordinateur)6,5 %
Yahoo Mail2,6 %
Tout le restemoins de 2 %

Apple Mail et Gmail réunis pèsent environ 89 % des ouvertures. (Le chiffre d’Apple est gonflé : sa Mail Privacy Protection compte beaucoup d’ouvertures qui ne sont peut-être pas humaines, donc traitez-le comme une borne haute, mais la concentration est réelle.) Le piège, c’est que Gmail, deuxième client le plus courant, est aussi l’un des plus agressifs quand il s’agit de réécrire votre CSS, et que l’Outlook classique, malgré sa faible part, reste très déployé dans les bureaux : c’est là que les mises en page cassent le plus. Les clients qui punissent le HTML de style web sont donc exactement ceux qu’on ne peut pas ignorer.

Les différences précises que l’IA rate

Voici les différences concrètes qu’un outil d’IA doit maîtriser, et qu’en général il ne maîtrise pas :

Ce qu’utilise le HTML webCe dont l’e-mail a réellement besoinPourquoi
Mise en page avec des div, flexbox, CSS gridDes tableaux imbriquésOutlook sur Windows utilise le moteur de Word et ignore les mises en page modernes. Flexbox et grid n’y fonctionnent pas.
Styles dans un bloc de style ou une feuille CSS externeDes styles en ligne sur presque chaque élémentGmail peut jeter un bloc de style entier pour une seule erreur CSS, et l’application Gmail ignore les styles embarqués pour les comptes non Google.
Coins arrondis, ombres, images de fondVML et commentaires conditionnels réservés à Outlook en repliLe moteur de Word ignore border-radius et les images de fond en CSS : les boutons deviennent carrés et les fonds disparaissent.
N’importe quel poids de fichierGarder le HTML sous environ 100 KoGmail tronque les messages autour de 102 Ko et masque tout ce qui suit, y compris votre lien de désabonnement.
Une seule règle prefers-color-schemeDes couleurs défensives et des balises meta color-schemePlusieurs clients inversent les couleurs de force et ignorent complètement votre media query de mode sombre.

Rien de tout cela n’est exotique pour un développeur e-mail. C’est simplement invisible pour un outil conçu pour le web, et pour la personne qui le sollicite. Pour un tour plus détaillé des règles elles-mêmes, notre guide des bonnes pratiques du HTML pour l’e-mail couvre en profondeur le codage à la main.

Pourquoi les pourcentages de support mentent

Il est facile de chercher une fonctionnalité, de voir un taux de support élevé et d’en conclure que tout va bien. En général, non, parce que les chiffres cachent l’endroit où les trous tombent. D’après Can I Email, display: flex et display: grid affichent chacun environ 83 % de support, ce qui paraît rassurant jusqu’à ce qu’on se rappelle que le moteur de Word dans Outlook ignore les deux : une mise en page bâtie sur flex ou sur grid s’y effondre en silence. La propriété CSS position tourne autour de 80 %, mais un tiers seulement de ce chiffre correspond à un support complet, le reste est partiel : la plupart des clients n’honorent que certaines valeurs, et Outlook sur ordinateur aucune. Les polices web via @font-face sont proches de 24 %, et les propriétés CSS personnalisées (les variables) de 45 %, l’Outlook classique ne prenant en charge aucune variable et Gmail autorisant l’usage de var() mais pas les déclarations qui les définissent. Ce dernier couple explique pourquoi une sortie d’IA qui s’appuie sur une police web et sur un système de couleurs piloté par variables, exactement la façon dont un modèle habille une page web moderne, perd sa typographie et ses couleurs de marque dès qu’elle arrive dans une vraie boîte de réception. Un pourcentage affiché en tête de fiche est une moyenne sur des clients qui pèsent tous pareil. L’e-mail, non.

Ce que produisent réellement les outils d’IA généralistes

Commençons par les outils vers lesquels on se tourne d’abord : les générateurs de sites et d’applications, et les chatbots. L’essentiel à comprendre, c’est qu’aucun n’est un produit e-mail. Ce sont des générateurs web qui produisent aussi du HTML, alors on les détourne.

Les générateurs d’applications : bon outil, mauvais métier

OutilConçu pourSortie par défautPrêt pour l’e-mail par défaut ?
v0 (Vercel)Interfaces web React et Next.jsDiv, Tailwind, JavaScriptNon
Bolt.newApplications web full-stackHTML web moderneNon
Cursor / ReplitCoder des applications et des sitesHTML de style web produit par le modèle sous-jacentNon
ChatGPT (Canvas)Chat généralisteHTML web à base de divNon
Claude (Artifacts)Chat généralisteHTML web à base de divNon
GeminiChat généralisteMélange de tableaux et de div, incohérentNon
LovableApplications webReact Email (tableaux, CSS en ligne)En partie

v0, Bolt, Cursor et Replit sont des générateurs d’applications. Leur demander un e-mail, c’est comme demander un tableur à un traitement de texte : on peut forcer, mais on lutte contre l’outil du début à la fin, et le résultat est un HTML web moderne qu’une boîte de réception n’allait jamais afficher comme la prévisualisation le promettait.

Les chatbots et le piège de la prévisualisation

Les chatbots méritent un avertissement à part, parce qu’ils créent un piège. Canvas chez ChatGPT et Artifacts chez Claude affichent tous deux une prévisualisation en direct du HTML qu’ils génèrent. Cette prévisualisation utilise un moteur de navigateur. Votre e-mail généré par IA paraît donc fini et soigné à l’écran, et c’est précisément pour cela que la casse reste invisible jusqu’à l’envoi vers une vraie boîte de réception. C’est la première raison pour laquelle les gens se font piéger : la prévisualisation ment, non par malice, mais parce qu’un navigateur n’est pas Outlook.

Le même e-mail généré par IA dans trois environnements : une prévisualisation navigateur où il paraît soigné, Gmail où la police du titre a disparu, et Outlook où la mise en page en deux colonnes s’est réduite à une seule Les modes de défaillance sont constants. Une mise en page qui paraît nette en prévisualisation s’appuie sur des propriétés qu’Outlook ignore, comme max-width sur un tableau ou flexbox : les colonnes s’effondrent ou débordent. Les polices web retombent sur une valeur par défaut comme Times New Roman. Les boutons arrondis redeviennent carrés. Et tout style qui n’a jamais été mis en ligne disparaît simplement dans une partie de Gmail.

Ce dernier point mérite d’être rendu concret, parce qu’il pèse plus lourd qu’il n’y paraît. Quand l’application Gmail affiche un message venant d’un compte non Google, une configuration assez répandue pour avoir son propre surnom (GANGA, pour Gmail App with Non-Google Accounts), elle ne prend pas du tout en charge la balise <style> : toutes les règles qu’un modèle a laissées dans un bloc de style d’en-tête sont perdues pour tout ce segment de lecteurs. Gmail fonctionne aussi en tout ou rien avec les styles embarqués : une seule erreur qui lui déplaît, par exemple une règle @font-face ou @media imbriquée dans une autre règle at-rule, lui fait supprimer le bloc de style entier, et il applique un plafond de taille strict par bloc (historiquement autour de 8 Ko). Un chatbot qui empile avec assurance tout votre CSS dans une seule grande balise <style> écrit exactement ce que Gmail a le plus de chances de jeter.

La seule exception partielle

Lovable est la seule exception partielle à nommer. Parce qu’il fait passer la génération d’e-mails par la bibliothèque React Email, il produit par défaut un balisage à base de tableaux avec des styles en ligne, et sa documentation mentionne même la limite de troncature de Gmail, autour de 102 Ko. C’est réellement plus proche du bon. Il ne gère toujours pas seul les commentaires conditionnels d’Outlook, le mode sombre ni les particularités d’Apple Mail, et il reste fondamentalement un générateur d’applications web, mais il montre à quoi ressemble un outil « conscient de l’e-mail » quand il essaie vraiment.

Orienter un chatbot vers du HTML compatible e-mail

Vous pouvez obtenir un résultat utilisable d’un chatbot généraliste, mais seulement en lui fournissant la connaissance e-mail qu’il n’applique pas de lui-même. En pratique, cela veut dire détailler chaque exigence dans le prompt. Le minimum pour obtenir un résultat utilisable :

  • Construire la mise en page sur des tableaux imbriqués, pas sur des div ni sur flexbox
  • Mettre chaque style en ligne sur l’élément, pas dans un bloc <style>
  • Envelopper les correctifs propres à Outlook dans des commentaires conditionnels MSO (<!--[if mso]>...<![endif]-->)
  • Donner à chaque police web une véritable pile de repli nommée (Arial, Georgia, une police système)
  • Garder tout le fichier sous la limite de troncature de Gmail, autour de 102 Ko
  • Inclure à la fois une version HTML et une version texte brut

Même là, deux choses restent vraies. Le modèle ne tient pas ce mode de façon fiable au fil des retouches : la troisième révision glisse discrètement vers ses habitudes web. Et le seul moyen de savoir s’il a obéi est de tester le résultat dans de vrais clients, pas de croire qu’il a suivi les consignes. Si vous utilisez déjà l’IA pour les mots, notre sélection de prompts ChatGPT pour l’emailing est un meilleur usage des mêmes outils.

« Mais ma plateforme e-mail a déjà l’IA intégrée »

La réponse suivante consiste à dire que votre ESP ou votre éditeur intègre déjà l’IA, donc que le problème est réglé. Parfois. Le piège, c’est que « l’IA pour l’e-mail » désigne trois choses très différentes, et que le marketing les confond volontiers.

Les trois sens possibles de « l’IA pour l’e-mail »

  • Une IA qui écrit le texte. Objets, corps du message, appel à l’action. C’est la variété la plus courante et la moins risquée, parce qu’un humain place encore les mots dans une mise en page testée.
  • Une IA qui assemble des sections modifiables. Elle vous donne une structure grossière, avec des blocs à remplir que vous terminez à la main. L’IA e-mail de Klaviyo fonctionne ainsi, et sa propre documentation précise que vous devez encore ajouter les boutons, les liens et les images à la main avant de pouvoir envoyer.
  • Une IA qui génère un modèle complet. Mise en page, texte, parfois images, à partir d’un seul prompt. C’est la démo impressionnante, et c’est aussi là que le balisage lui-même devient une sortie non vérifiée.

L’axe qui compte pour la délivrabilité : portabilité et tests

Vient ensuite un second axe, qui compte encore plus pour la délivrabilité : pouvez-vous emporter le HTML où vous voulez, et quelque chose teste-t-il son rendu ? Voici comment se comparent les éditeurs d’e-mails dédiés, ceux dont tout le métier est de vous remettre un HTML portable.

ÉditeurCe que fait l’IAHTML portable ?Test de rendu intégré
BeefreeTexte et images (la mise en page, c’est vous)Oui, export vers les ESPAperçus sur appareils réels
Postcards (Designmodo)Pile IA complète dans un chat de prompts : générer un e-mail de zéro, puis le modifier, le restyler, le redessiner et le traduireOui, export vers les ESPAperçus sur appareils réels
UnlayerModèle complet, texte, images, retouches par chat, import HTML ou capture d’écranOui, export vers les ESPAperçus sur appareils réels
StripoModèle complet, texte, images, retouches par chatOui, export vers les ESPAperçus sur appareils réels

Tous les quatre exportent un HTML portable que vous pouvez emporter vers n’importe quel ESP, ce qui est toute la raison d’être d’un éditeur. Ce qui les sépare le plus, c’est la part du travail que fait l’IA. Postcards, Unlayer et Stripo proposent un flux complet piloté par prompt, tandis que l’IA de Beefree écrit le texte et les images et vous laisse la mise en page. Tous les quatre affichent aussi un aperçu du rendu, mais un aperçu rapide n’est pas un test approfondi sur tous les clients : les équipes rigoureuses valident donc le HTML final dans un contrôle dédié avant d’envoyer. Le contraste avec un ESP à modèles complets comme Mailchimp ou HubSpot est plus net encore, parce que ceux-là ont tendance à enfermer le résultat dans leur propre envoi au lieu de vous remettre un code portable. Pour un classement complet de ces éditeurs dédiés sur les modèles, l’IA, la collaboration et la délivrabilité, voyez notre guide des meilleurs éditeurs de modèles d’e-mails pour 2026.

Là où ça vous coûte vraiment : la boîte de réception

Il est tentant d’affirmer qu’un mauvais HTML vous envoie droit dans les spams. Il est plus honnête, et plus utile, d’être précis sur la façon dont les dégâts se produisent, parce qu’exagérer est le meilleur moyen de perdre sa crédibilité.

Un mauvais HTML ne part pas droit dans les spams, il y arrive indirectement

Les filtres modernes de Gmail, Outlook et Yahoo reposent surtout sur la réputation d’expéditeur et l’engagement des destinataires, pas sur un score de propreté du HTML. Un balisage d’IA bâclé déclenche donc rarement une pénalité directe. Le vrai chemin est indirect, et c’est celui que Litmus décrit dans ses recommandations de délivrabilité de février 2026 : un e-mail qui s’affiche cassé fait douter, le doute fait baisser l’engagement et monter les plaintes, et un engagement faible plus des plaintes, c’est exactement ce qui abîme votre réputation d’expéditeur et pousse vos envois suivants vers les spams. Les règles de Google pour les expéditeurs en masse mettent un chiffre ferme sur le signal le plus destructeur : gardez les plaintes pour spam sous 0,1 %, soit une sur mille. Un modèle qui paraît cassé dans un quart des boîtes de réception est un moyen rapide de franchir cette limite.

Le corps HTML est la partie la plus faible de la campagne moyenne

Nous voyons ce schéma dans nos propres données. Sur les e-mails passés par Unspam au cours des douze mois glissants arrêtés en juin 2026, le corps HTML est systématiquement la zone la plus faible de tout le message :

Ce que nous contrôlonsPart des e-mails qui passent
Bonnes pratiques HTML30 %
Qualité de l’objet56 %
Aucun lien cassé78 %
Contrôles d’accessibilité84 %
Évite les contenus déclencheurs de spam89 %
Score dans la plage SpamAssassin sûre (de 0 à 3,0)89 %
Passe un contrôle de délivrabilité complet82 %

Relisez la première ligne. Le HTML est le contrôle que la plupart des e-mails échouent, de loin, et bien plus souvent que l’objet ou les mots déclencheurs de spam. C’est aussi celui que vous avez le plus de chances de confier à un chatbot.

Troncature, filtres heuristiques et autres prises concrètes

Il existe quelques autres prises concrètes qu’il vaut la peine de connaître, propres au HTML cassé :

  • Des filtres heuristiques plus anciens existent encore en aval. Des filtres open source comme SpamAssassin notent toujours les messages en HTML seul, sans partie texte brut (cela vaut quelques points), et les messages lourds en images et pauvres en texte. Ce n’est pas ce que fait tourner Gmail, mais cela décrit les schémas dans lesquels tombe une sortie d’IA négligée, et beaucoup de passerelles d’entreprise s’en servent encore.
  • La troncature masque votre lien de désabonnement. Si un balisage boursouflé vous fait dépasser le seuil de Gmail, autour de 102 Ko, Gmail coupe le message. Si votre lien de désabonnement se trouvait sous la coupe, les lecteurs agacés cliquent sur « signaler comme spam » à la place. À noter : les fichiers image externes ne comptent pas dans cette limite, seul le balisage compte, et c’est précisément ce que les outils d’IA ont tendance à surproduire.
  • Le mode sombre ne peut pas être servi uniformément. La media query @media (prefers-color-scheme) plafonne autour de 42 % de support, n’est honorée que partiellement par Gmail (qui applique sa propre gestion des couleurs plutôt que votre requête) et se voit réécrite en syntaxe invalide par Yahoo. Outlook sur Windows l’ignore et injecte à la place ses propres attributs, qu’il faut viser séparément, tandis qu’Apple Mail inverse automatiquement le texte en #FFFFFF pur, raison pour laquelle les designers avisés utilisent plutôt un blanc cassé. Un modèle qui émet une seule règle bien propre pour le mode sombre n’a couvert qu’une minorité des clients qui recoloreront réellement votre e-mail.
  • Un HTML cassé est la norme, pas l’exception. Ce constat ne vient pas seulement de nos chiffres. Le rapport d’accessibilité 2026 de l’Email Markup Consortium a analysé 376 348 e-mails réels et trouvé que 99,88 % étaient partis avec des défauts d’accessibilité graves ou critiques, 8 seulement passant tous les contrôles. Ces défauts (tableaux de mise en page sans rôle de présentation, texte alternatif manquant, langue du document absente) remontent aux mêmes habitudes venues du web, et la leçon vaut : un HTML d’e-mail propre est difficile même pour des professionnels, donc un jet non testé sorti d’un chatbot a peu de chances de faire mieux que cette base.

Ce que vaut un point de placement

L’enjeu n’est pas abstrait. Selon ce que vaut chaque e-mail pour votre programme, un seul point de placement en boîte de réception sur un envoi d’un million d’e-mails va d’environ $1,000, sur la base d’un e-mail valorisé à $0.10, jusqu’à $20,000 pour une liste à forte valeur. Dans tous les cas, un modèle qui casse en silence pour un quart de votre liste, c’est du chiffre d’affaires récurrent perdu, pas un défaut cosmétique. Pour voir comment votre propre domaine d’envoi et vos contenus se situent sur ces facteurs, le benchmark de délivrabilité Unspam présente des données agrégées issues de millions de tests, et vous pouvez passer votre message dans les contrôles ci-dessous avant d’envoyer.

Ce que « prêt pour l’envoi » veut vraiment dire : la grille de contrôle avant envoi

À ce stade, le schéma est clair : un brouillon d’IA peut sembler terminé sans être près d’être envoyable. Autant remplacer l’impression vague de « ça a l’air fini » par une norme explicite. Voici celle à laquelle nous soumettons un e-mail avant son départ, quel que soit son auteur, humain ou machine.

La prévisualisation est le signal le plus trompeur en e-mail

Autant être direct sur les raisons. Un code qui s’affiche parfaitement dans un onglet de navigateur, ou dans le volet de prévisualisation d’un chatbot, se désagrège régulièrement dans Outlook, dans l’application Gmail, dans les webmails de Yahoo et d’AOL, et sur les petits écrans mobiles. Aucune de ces défaillances n’apparaît dans un navigateur, puisqu’un navigateur ne fait tourner aucun de ces moteurs. Le seul test qui a du sens consiste à ouvrir le vrai HTML dans un contrôle de rendu multiclient et à regarder les captures d’écran. Tout ce qui figure dans la grille ci-dessous, ce contrôle peut le confirmer, une prévisualisation non.

La grille : douze conditions à remplir avant d’envoyer

Point de contrôleÀ quoi ressemble une réussite
Mise en page et structure des tableauxBâtie sur des tableaux imbriqués avec role="presentation" et des largeurs fixes en repli, pour que la structure tienne dans Outlook sur Windows au lieu de s’effondrer ou de déborder.
CSS en ligneChaque style critique est écrit en ligne sur l’élément. Rien de porteur ne vit uniquement dans un bloc de style, pour que l’e-mail survive aux clients qui suppriment le CSS embarqué.
Replis Outlook et MSOLes commentaires conditionnels, les ghost tables et VML sont en place là où il faut, pour que boutons, fonds et espacements s’affichent dans Outlook sans retour à Times New Roman.
Polices et pile de repliChaque police web se termine par une police système sûre, pour qu’un client qui bloque la police dégrade proprement au lieu de tomber sur une serif générique.
Poids et troncatureLe HTML reste bien en dessous du seuil de troncature, autour de 102 Ko, sans code boursouflé ni dupliqué qui pourrait couper le message ou le lien de désabonnement.
Mode sombreCouleurs, logos et éléments arrondis restent lisibles quand un client inverse ou recolore, sans texte qui disparaît ni coins cassés.
Liens et CTAChaque lien et chaque bouton pointe vers une URL réelle et complète, se touche proprement sur mobile et conserve ses paramètres de suivi.
Responsive et mobileLes sections multicolonnes s’empilent proprement sur petit écran, marges et alignements intacts, les zones tactiles restent grandes et le texte n’exige jamais de défilement horizontal.
AccessibilitéLes images portent un texte alternatif utile, les tableaux de mise en page utilisent des rôles de présentation, le document déclare une langue et le texte respecte les ratios de contraste.
ConformitéUn lien de désabonnement visible et fonctionnel et une adresse postale valide sont présents.
Hygiène du codePas de commentaires CSS oubliés, pas d’emojis ni de caractères spéciaux non encodés, un balisage propre, pour que les webmails les plus stricts analysent et habillent encore le message.
Contrôle de rendu en boîte de réceptionL’e-mail a été ouvert et confirmé dans un vrai test de rendu multiclient, pas seulement dans une prévisualisation de navigateur.

Pourquoi un e-mail presque parfait échoue quand même

L’important, dans cette liste, c’est qu’elle n’est pas une moyenne de points. Un e-mail peut réussir onze lignes et rester indéployable à cause de la douzième. Un seul lien de désabonnement manquant, une police sans repli, une feuille de style non mise en ligne suffit à couler l’envoi, et c’est pourquoi « ça a l’air fini à 90 % » et « c’est envoyable » sont deux affirmations sans rapport. Les brouillons d’IA échouent ainsi en permanence : le design est superbe, puis un seul défaut bloquant rend discrètement l’ensemble inexpédiable.

La plupart de ces défauts bloquants remontent à un seul client. L’Outlook classique pour Windows, c’est-à-dire les versions de 2007 à 2019 et le client de bureau Office 365 classique, s’appuie sur le moteur de Microsoft Word plutôt que sur un navigateur. Ce moteur a un ensemble de comportements que tout développeur e-mail connaît par cœur :

  • Il ignore les propriétés CSS width et height, il faut donc utiliser les attributs HTML width et height sur les images
  • Il retire padding et margin des images, on ajoute donc la marge intérieure sur la cellule de tableau environnante
  • Il ignore width et padding sur les div, et c’est pourquoi les mises en page utilisent des tableaux plutôt que des div
  • Il abandonne complètement l’état :hover
  • Il n’affiche que la première image d’un GIF animé

Il introduit aussi ses propres bugs. Sur les écrans Windows mis à l’échelle à 125 % ou plus, il déforme les mises en page à moins de déclarer l’espace de noms Office et de fixer PixelsPerInch à 96 dans un bloc conditionnel. Il revient à Times New Roman dès qu’une police web se trouve en tête de pile, à moins d’envelopper la règle @font-face pour qu’Outlook ne la voie jamais. Ce ne sont pas des cas limites. C’est le comportement par défaut du moteur qui affiche une grande part des e-mails professionnels, et un modèle entraîné sur des pages web n’a aucune raison d’écrire l’échafaudage qui contourne tout cela.

Une éclaircie existe. Le nouvel Outlook pour Windows, en bêta depuis 2022 et dans le Windows Store depuis 2023, utilise un moteur de rendu web au lieu de Word, et Microsoft a commencé à y pousser ses utilisateurs. Le client classique à moteur Word s’éteindra dans les prochaines années, mais Microsoft s’est engagé à le prendre en charge jusqu’en 2029 pour beaucoup d’offres : il faut donc encore coder pour le moteur de Word, parce que c’est ce qu’utilise encore une part non négligeable de vos destinataires.

Passez votre brouillon là-dedans avant l’envoi

La grille ne sert que si vous y passez vraiment un e-mail, et vous n’avez pas à le faire à l’œil. Envoyez le message fini dans un outil qui l’ouvre dans de vrais clients et contrôle ces facteurs pour vous. Notre test de spam Unspam couvre le contenu, l’authentification et la qualité du code, et le test de placement en boîte de réception montre où le message atterrit réellement chez Gmail, Outlook et Yahoo. C’est la différence entre croire qu’un e-mail est prêt et le savoir.

Ce qu’apporte un éditeur dédié, et où l’IA trouve sa place

Voici la réponse à la question de départ.

La frappe n’a jamais été le problème

Un éditeur d’e-mails n’a jamais servi à vous épargner la saisie du HTML. Le difficile, c’est de produire un HTML qui s’affiche de la même façon dans des dizaines de clients incohérents, en satisfaisant chaque ligne de cette grille à la fois, et c’est cette partie qu’un éditeur testé résout et qu’un chatbot ne résout pas.

La sortie d’un LLM face à un éditeur, norme par norme

Mettons les deux côte à côte face aux normes qui décident réellement si un e-mail s’affiche et arrive. D’un côté la sortie brute d’un LLM généraliste, de l’autre le HTML qu’émet un éditeur dédié, testé sur tous les clients.

Norme HTMLSortie brute de LLMÉditeur d’e-mails testé
Mise en pageDiv, flexbox et grid (mise en page web)Tableaux imbriqués avec rôles de présentation
Livraison du CSSSouvent laissé dans un bloc de style, mise en ligne inégaleEn ligne sur chaque élément
Outlook (moteur Word)Ni conditionnels MSO, ni VML, ni ghost tables, donc les mises en page cassentReplis MSO intégrés
Polices webSouvent aucun repli, donc retour à Times New RomanPiles de repli sûres
Mode sombreUne règle prefers-color-scheme au mieuxCouleurs défensives, vérifiées en mode sombre
Poids et troncature GmailBalisage verbeux qui peut franchir la limite, autour de 102 KoOptimisé pour rester en dessous
Responsive et mobileDu flexbox qui s’effondre ou se désaligne sur petit écranEmpilement mobile testé
AccessibilitéTexte alternatif, rôles de tableau et attribut de langue souvent absentsIntégrée aux modules
Conformité légaleLien de désabonnement et adresse postale souvent oubliésPrévus dans le modèle
Tests multiclientsAucun, juste une prévisualisation de navigateurTests sur appareils et clients réels

Le schéma est constant : le LLM optimise ce qui a l’air juste dans un navigateur, l’éditeur optimise ce qui survit à la boîte de réception.

Comment la grille est satisfaite par défaut

Prenons Postcards comme exemple travaillé. Ses plus de 100 modules sont construits à la main et, selon Designmodo, testés dans Litmus et Email on Acid sur 16 clients, y compris ceux qui cassent le HTML web : Outlook sur ordinateur, l’application Gmail, Apple Mail, Yahoo, et même des clients plus anciens comme Lotus Notes. Chaque modèle est vérifié en responsive et en mode sombre, et vous le voyez dans des aperçus sur appareils réels plutôt que dans une approximation de navigateur. Le code exporté est un HTML propre, prêt pour la production, que vous pouvez pousser en un clic vers les principaux ESP, dont Mailchimp, HubSpot, Klaviyo, SendGrid, Brevo, Constant Contact, Zoho et SendPulse, ou simplement télécharger en HTML brut. La tarification démarre à zéro, avec des offres payantes à $16 et $24 par mois.

Reportez cela sur la grille et la valeur devient concrète. Les replis Outlook et MSO, le CSS en ligne, le comportement en mode sombre et le rendu multiclient ne sont pas des points à vérifier après coup, ils sont déjà satisfaits, parce que les modules ont été construits et testés ainsi. Vous partez d’une base qui passe les contrôles au lieu de devoir y revenir.

Le même prompt, une sortie compatible e-mail

Voici la partie qui règle la question de l’IA au lieu de la combattre. Postcards vous donne le flux IA complet que les gens veulent vraiment : décrivez l’e-mail et il en construit un, puis modifiez le design, traduisez-le ou restylez-le, tout depuis un chat de prompts. La différence est dans ce qui sort. Un chatbot généraliste vous remet du HTML web brut et laisse le rendu au hasard. Postcards génère à partir de ses modules testés sur tous les clients, donc la même vitesse pilotée par prompt produit un HTML portable et compatible e-mail, qui satisfait déjà l’essentiel de la grille. Vous obtenez l’expérience IA sans hériter du problème de rendu de l’IA.

Le flux de travail qui marche vraiment

Vous n’avez pas à choisir entre l’IA et un éditeur. Les équipes qui obtiennent de bons résultats utilisent les deux, dans le bon ordre.

Un flux en trois étapes : rédiger avec l’IA pour les idées et le texte, construire dans un outil e-mail testé pour un HTML sûr au rendu, vérifier dans de vrais clients avant d’envoyer

Rédigez avec l’IA

Faites émerger le concept, écrivez le texte et générez des options d’objet. C’est là que les modèles brillent, et il n’y a aucun risque de rendu dans un paragraphe de texte. Notre guide des prompts ChatGPT est fait pour cette étape.

Construisez le modèle dans un outil testé

Déposez ce texte dans un éditeur dont le HTML est déjà validé sur les clients, ou, si vous codez, convertissez la sortie de l’IA vers un framework e-mail plutôt que d’expédier du HTML brut de chatbot. Les frameworks partagent un même geste : une étape de compilation qui transforme une syntaxe moderne agréable en ce HTML à tableaux imbriqués, styles en ligne et commentaires conditionnels que les clients de messagerie savent réellement afficher :

  • MJML compile son propre balisage de composants en HTML responsive à base de tableaux, avec styles en ligne
  • React Email transforme React et Tailwind en une sortie testée chez Gmail, Apple Mail, Outlook et Yahoo
  • Maizzle compile Tailwind en HTML de production, styles mis en ligne et conditionnels mso intégrés

Cette étape de traduction est précisément le travail que la sortie brute d’une IA saute.

Vérifiez avant d’envoyer

Passez l’e-mail fini dans un contrôle de rendu et de délivrabilité, c’est là que vous le confrontez vraiment à la grille vue plus haut. Utilisez l’outil de prévisualisation des e-mails pour voir des captures d’écran au pixel près de votre HTML dans plus de 50 clients réels, en mode clair et en mode sombre, le test de spam Unspam pour l’authentification et le contenu, et le test de placement en boîte de réception pour voir où il atterrit chez Gmail, Outlook et Yahoo. Notre contrôle avant envoi en cinq minutes déroule toute la routine.

Cette séquence vous donne la vitesse de l’IA sur les parties où accélérer est sans risque, et une base testée plus un contrôle final sur celles où ça ne l’est pas.

Alors, avez-vous encore besoin d’un éditeur d’e-mails ?

Oui, mais la question plus utile est pourquoi, et la réponse change selon votre place dans la chaîne de production.

Si vous êtes designer e-mail

Votre souci, c’est la fidélité à la marque : la police du titre, la forme du bouton, le basculement des couleurs en mode sombre, l’espacement entre les sections. L’IA est utile au stade du brief, pour générer des directions de mise en page, itérer sur des concepts visuels, tester une gamme de couleurs avant de s’engager dans la construction. Mais dès que le design doit tenir dans de vraies boîtes de réception, l’écart s’ouvre vite.

Les polices retombent sur Times New Roman dans Outlook, parce que la déclaration de police web n’a jamais été enveloppée pour la cacher au moteur de Word. Les coins arrondis disparaissent, parce que la propriété CSS border-radius est ignorée. Les images de fond s’évanouissent, parce que le moteur de Word ignore les fonds CSS, et votre en-tête aux couleurs sombres de la marque arrive en bloc blanc vide. Une mise en page en deux colonnes soigneusement espacée s’effondre en une seule colonne empilée, parce que la structure reposait sur flexbox plutôt que sur des tableaux imbriqués. Rien de tout cela n’apparaît dans la prévisualisation de navigateur qui faisait paraître la sortie de l’IA terminée.

Un éditeur testé résout cela au niveau du module. Les composants ont déjà été conçus pour porter les éléments de marque à travers les clients qui vous combattent : le bouton reste arrondi parce qu’il utilise VML, le fond tient parce qu’une couleur de cellule sert de repli, la mise en page s’empile proprement sur mobile parce que la media query est écrite comme il faut. La vision de l’IA est le brief. L’éditeur est l’endroit où le brief devient quelque chose qu’un abonné peut réellement voir.

Si vous êtes marketeur e-mail

Pour un marketeur, la question se ramène aux résultats des campagnes. Les données rendent le coût d’un mauvais HTML concret : sur les e-mails contrôlés via Unspam ces douze derniers mois, 30 % seulement passent les contrôles de bonnes pratiques HTML, le taux de réussite le plus bas de tout ce que nous mesurons. La plupart des campagnes partent avec des défauts structurels dont l’expéditeur ignorait l’existence.

Ces défauts se voient dans vos indicateurs. Un e-mail qui s’affiche cassé fait baisser l’engagement, parce qu’il paraît de travers ou devient difficile à lire. Un engagement plus faible apprend aux filtres à orienter vos envois suivants vers les spams. Un message tronqué par Gmail parce que le balisage a franchi la limite de 102 Ko masque le lien de désabonnement, et des abonnés agacés cliquent sur « signaler comme spam » à la place. Un point de placement en boîte de réception sur un envoi d’un million d’e-mails représente un vrai montant de chiffre d’affaires, et il se cumule sur chaque envoi suivant.

L’IA rend les marketeurs plus rapides sur tout ce qui ne touche pas au balisage : variantes de texte, tests d’objet, tokens de personnalisation, idées de séquencement. Mais le modèle doit venir d’une base testée, parce qu’un brouillon rapide qui casse dans un tiers des boîtes de réception n’est pas vraiment plus rapide. C’est un chemin plus rapide vers un problème que vous ne verrez pas avant que la campagne ne soit partie.

Si vous êtes développeur e-mail

Un développeur connaît déjà la réponse, parce qu’il a écrit des blocs <!--[if mso]> et débogué pourquoi une mise en page nette dans Chrome s’effondre dans Outlook à 125 % de mise à l’échelle. Sa version de la question est plus précise : où l’IA a-t-elle vraiment sa place dans la chaîne ?

Le cadre utile, c’est l’entrée face à la sortie. L’IA appartient au côté entrée : rédiger le texte du modèle, prototyper des concepts de mise en page avant de les construire, écrire la version texte brut, et parfois ébaucher un premier jet en MJML ou React Email que vous nettoyez ensuite. La sortie, le HTML qui part réellement aux abonnés, doit venir d’un framework ou d’un éditeur testé qui gère déjà les replis du moteur de Word, la mise en ligne du CSS, les conditionnels MSO, la base d’accessibilité et le budget de poids. Ce que produit l’IA est un point de départ. Ce qui part est ce qui survit à un vrai test de rendu multiclient.

Des frameworks comme MJML, React Email et Maizzle sont, pour le développeur, la version de la réponse qu’un éditeur donne à un designer ou à un marketeur : une couche de traduction vérifiée entre une idée et une boîte de réception.

La réponse est la même depuis les trois sièges

Trois rôles, une conclusion. L’IA travaille à la couche du langage, les navigateurs affichent à la couche web, et les clients de messagerie opèrent sur une troisième couche que ni l’une ni les autres ne comprennent complètement. Un éditeur ou un framework dédié est la traduction entre le brouillon de l’IA et une boîte de réception qui le reçoit correctement.

Utilisez l’IA pour la vitesse là où la vitesse est sans danger : les idées, le texte, les objets. Utilisez l’éditeur pour le rendu là où elle ne l’est pas. Dans les deux cas, lancez le contrôle avant envoi. Une prévisualisation de navigateur vous dit qu’un e-mail a l’air fini, jamais qu’il s’affiche bien. C’est l’éditeur, plus le contrôle, qui comble cet écart.

Questions fréquentes

ChatGPT ou Claude peuvent-ils écrire un vrai e-mail HTML ?

Ils peuvent générer du HTML qui ressemble à un e-mail, mais par défaut ils produisent du HTML web bâti sur des div, sur flexbox et sur des blocs de style. C’est la mauvaise structure pour l’e-mail. Cela s’affiche bien dans un navigateur et dans Apple Mail, puis casse dans Outlook sur Windows et perd son habillage dans une partie de Gmail. C’est aussi le maillon le plus faible de la plupart des campagnes : sur les e-mails que nous contrôlons chez Unspam, 30 % seulement passent nos contrôles de bonnes pratiques HTML, le taux de réussite le plus bas de tous nos contrôles. Vous pouvez obtenir un résultat utilisable en donnant des consignes très précises (tableaux uniquement, CSS en ligne, commentaires conditionnels Outlook), mais il faut encore le tester dans de vrais clients avant d’envoyer.

Pourquoi un e-mail généré par IA est-il parfait en prévisualisation et cassé dans Gmail ou Outlook ?

Les prévisualisations en direct de ChatGPT Canvas et de Claude Artifacts s’affichent dans un moteur de navigateur, pas dans un moteur de messagerie. Outlook sur Windows utilise Microsoft Word pour afficher les messages, et Gmail supprime et réécrit des parties de votre CSS. Une prévisualisation de navigateur ne peut pas vous montrer ces défaillances, et c’est exactement pour cela qu’une sortie qui paraît finie arrive quand même cassée.

Un HTML bâclé envoie-t-il votre e-mail dans les spams ?

Pas directement, et il vaut la peine d’être précis là-dessus. Les filtres modernes de Gmail et d’Outlook reposent surtout sur la réputation d’expéditeur et l’engagement, pas sur un score de qualité du HTML. Le vrai chemin est indirect : un rendu cassé pousse les gens à supprimer ou à ignorer l’e-mail, un engagement faible et des plaintes abîment votre réputation d’expéditeur, et cela nuit au placement en boîte de réception. Un HTML boursouflé peut aussi vous faire dépasser le seuil de troncature de Gmail, autour de 102 Ko, ce qui masque du contenu, y compris votre lien de désabonnement, et peut provoquer des plaintes.

Quelle est alors la meilleure façon d’utiliser l’IA pour l’e-mail ?

Utilisez l’IA pour ce qu’elle fait vraiment bien : les idées, le texte et les objets. Ensuite, construisez ou terminez le modèle dans un outil qui produit un HTML testé sur tous les clients, ou convertissez la sortie de l’IA vers un framework e-mail comme MJML ou React Email. Enfin, lancez un contrôle de rendu et de délivrabilité avant d’envoyer. L’IA fait avancer le brouillon, elle ne résout ni le rendu ni le placement en boîte de réception.

Postcards est-il un éditeur d’e-mails à IA ?

Oui. Postcards de Designmodo associe un éditeur en drag and drop (glisser-déposer) à une pile IA complète : vous pouvez générer un e-mail à partir d’un prompt, puis le modifier, le traduire ou le redessiner depuis un chat. La différence avec un chatbot généraliste est dans ce qui sort. Postcards s’appuie sur des modules testés sur tous les clients et exporte un HTML propre et portable, et il montre votre design dans de vrais aperçus sur appareils, donc vous obtenez un balisage sûr pour l’e-mail plutôt que le HTML web non vérifié d’un chatbot.

Découvrez où votre campagne arrive vraiment.

Lancer un test antispam gratuit Test Inbox Placement