Modèle d’e-mail ChatGPT : pourquoi il s’affiche mal

Votre modèle d’e-mail ChatGPT est superbe dans la fenêtre de discussion : des colonnes bien alignées, un gros bouton, les couleurs de votre marque. Puis vous envoyez un test, et Outlook étire l’e-mail sur tout l’écran, Gmail fait sauter les styles, et le logo laisse place à un vide. Ça vous dit quelque chose ? ChatGPT n’y est pour rien en particulier. Claude, Gemini, Copilot et les autres outils d’IA font les mêmes erreurs, parce qu’elles ont la même cause.

Dans cet article, nous voyons pourquoi un e-mail HTML généré par une IA s’affiche souvent mal dans les clients de messagerie, nous passons en revue les erreurs typiques avec des exemples de code, et nous montrons comment transformer ce HTML en un e-mail qui arrive chez vos abonnés tel que vous l’avez conçu.

Pourquoi : l’IA a appris à coder sur des sites web

Un modèle d’IA écrit le HTML tel qu’il l’a vu le plus souvent. Or l’essentiel du HTML sur Internet, ce sont des sites web : des millions de pages construites selon les règles du web moderne, avec des blocs <div>, des grilles flexibles, des styles dans un fichier à part et des images SVG. Pour un navigateur, ce code est correct. L’IA le reproduit fidèlement dans votre e-mail aussi.

Mais un client de messagerie n’est pas un navigateur. L’e-mail a ses propres règles, et elles ont des années de retard sur le web. Le classique Outlook pour Windows affiche encore les e-mails avec le moteur de Microsoft Word, pas avec un moteur de navigateur, et Microsoft a promis de le prendre en charge au moins jusqu’en 2029. Gmail supprime une partie de vos styles. En Allemagne, GMX et WEB.DE, et en France, La Poste et SFR ignorent les styles écrits dans un bloc à part. Résultat : le HTML5 et le CSS3 sur lesquels repose un site moderne ne fonctionnent pas dans les campagnes d’e-mailing.

Un détail important : une campagne part chez tous vos abonnés en même temps. Vous ne choisissez pas qui l’ouvre dans Gmail et qui l’ouvre dans Outlook. Donc si une technique casse dans un seul grand client de messagerie, elle ne convient pas à l’e-mail. C’est l’étalon que nous utilisons pour les erreurs ci-dessous.

Erreur 1. Des div et du flexbox, comme sur un site

Voici à quoi ressemble typiquement un e-mail généré par une IA : deux fiches produit côte à côte, dans un bloc de 600 pixels centré sur la page.

<style>
  .container { max-width: 600px; margin: 0 auto; }
  .products { display: flex; gap: 24px; }
  .card { flex: 1; }
</style>

<main class="container">
  <section class="products">
    <div class="card"><img src="sneakers.jpg" alt="Sneakers"><p>New arrivals</p></div>
    <div class="card"><img src="jacket.jpg" alt="Jacket"><p>Best sellers</p></div>
  </section>
</main>

Pour un site, tout cela est juste. Pour un e-mail, presque chaque ligne pose problème. Le classique Outlook pour Windows ne comprend pas display: flex : les fiches s’empilent les unes sur les autres au lieu de rester sur une ligne. Il ne respecte max-width que sur les tableaux et ne gère pas du tout le centrage avec margin: auto, si bien que l’e-mail s’étire sur toute la largeur de la fenêtre. Outlook ne connaît pas non plus les balises <main> et <section>, et Gmail remplace certaines de ces balises par les siennes.

Tel que conçu

Blocks Store

À l’arrivée dans Outlook pour Windows

Blocks Store

Ce que cela signifie pour vous : dans un e-mail, la mise en page se construit avec des tableaux, pas avec des blocs. Ça paraît démodé, mais tous les clients comprennent les tableaux de la même façon, y compris Outlook avec son moteur Word. Voici les deux mêmes fiches en balisage d’e-mail :

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="288" valign="top">…</td>
    <td width="24"></td>
    <td width="288" valign="top">…</td>
  </tr>
</table>

Une IA sait écrire ce genre de code si vous le lui demandez. Mais par défaut, elle choisit le balisage des sites, celui qu’elle a vu le plus souvent. Si vous voulez savoir comment on code des e-mails à la main avec des tableaux et en quoi les frameworks aident, jetez un œil à notre comparatif des frameworks d’e-mail.

Erreur 2. Des styles dans un bloc à part, pas dans les balises

Un site sépare la présentation du contenu : les styles sont décrits une fois dans un bloc <style> ou dans un fichier à part, et les éléments y renvoient par des classes. L’IA fait pareil :

<style>
  .button { background: #2f54eb; color: #ffffff; padding: 14px 28px; border-radius: 8px; }
</style>

<a class="button" href="https://example.com/sale">Shop the sale</a>

Beaucoup de clients de messagerie jettent tout simplement ce bloc. La version web mobile de Gmail, GMX, WEB.DE, La Poste et SFR ne lisent pas du tout <style>. L’application Gmail l’ignore quand la boîte de réception n’est pas un compte Google, une adresse professionnelle par exemple. Gmail sur le web n’accepte les styles que dans l’en-tête de l’e-mail, le <head>, et seulement jusqu’à 16 Ko. Que le bloc grossisse un peu, et toute la mise en forme disparaît d’un coup. Gmail et Outlook.com ne gèrent pas du tout les feuilles de style externes liées avec <link>.

Tel que conçu

Blocks Store

Soldes d’automne

Jusqu’à 50 % de remise sur toute la collection, jusqu’à dimanche.

Voir les soldes

À l’arrivée, sans le bloc de styles

Blocks Store

Soldes d’automne

Jusqu’à 50 % de remise sur toute la collection, jusqu’à dimanche.

Voir les soldes

Ce que cela signifie pour vous : dans un e-mail, chaque règle de mise en forme s’écrit directement dans la balise, dans l’attribut style. On parle de styles en ligne (inline). Il y a plus de code, mais les styles ne se perdent pas en route :

<a href="https://example.com/sale" style="background:#2f54eb;color:#ffffff;padding:14px 28px;border-radius:8px;">Shop the sale</a>

Mais ne vous réjouissez pas trop vite pour ce bouton : il cassera quand même dans Outlook pour Windows. Nous expliquons pourquoi dans la quatrième erreur.

Erreur 3. Des images en SVG et en base64

Une IA ne peut pas joindre un fichier image à sa réponse, alors elle trouve une parade. Elle dessine le logo et les icônes directement dans le code, en SVG. Et si vous lui avez fourni une image, elle l’intègre au HTML en base64 : une longue suite de caractères au lieu d’un lien vers un fichier.

<svg width="120" height="32" viewBox="0 0 120 32">…</svg>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Fall sale">

Les deux fonctionnent dans un navigateur. Aucun des deux ne fonctionne dans un e-mail. Gmail, Outlook et Yahoo n’affichent pas le SVG dessiné dans le code. Gmail convertit en PNG un fichier SVG lié comme une image ordinaire : il perd sa netteté et son animation. Gmail et le nouvel Outlook pour Windows n’affichent pas les images en base64 : à leur place, vous obtenez un vide.

Tel que conçu

Blocks Store

Soldes d’automne

À l’arrivée dans Gmail

Le base64 a un second défaut : il alourdit l’e-mail. Une image écrite en caractères prend environ un tiers de place en plus dans le code que le fichier lui-même. Deux ou trois bannières, et l’e-mail devient si lourd que Gmail le tronque. Nous y revenons dans la cinquième erreur.

Ce que cela signifie pour vous : les images d’un e-mail doivent être hébergées sur un serveur, en fichiers PNG, JPG ou GIF, et le code ne doit contenir qu’un lien vers elles, avec leurs dimensions :

<img src="https://cdn.example.com/fall-sale.png" width="600" height="300" alt="Fall sale">

Erreur 4. Outlook pour Windows voit votre e-mail à travers Word

Le classique Outlook pour Windows mérite un chapitre à part. Il affiche l’e-mail non pas avec un navigateur, mais avec le moteur du traitement de texte Word. C’est pourquoi il ne comprend pas une bonne partie de ce que toute IA considère comme la base. Voici un premier écran d’e-mail typique fait par une IA, avec une image de fond, un titre par-dessus et un bouton :

<div style="background-image:url(hero.jpg);padding:48px;">
  <h1 style="color:#ffffff;">Fall sale</h1>
  <button style="border-radius:24px;padding:14px 28px;">Shop now</button>
</div>

Dans Outlook, tout cela casse d’un coup :

• Il n’affiche pas l’image de fond définie avec background-image. Le titre blanc se retrouve sur fond blanc et disparaît.
• Outlook pour Windows, Outlook pour Mac et Outlook.com ne gèrent pas la balise <button> dans les e-mails.
• Outlook ne respecte padding que dans les cellules de tableau. Un bouton fait d’un lien avec des marges intérieures se réduit à la taille de son texte.
• Il ne dessine pas border-radius : les coins restent carrés.

Tel que conçu

Soldes d’automne

Jusqu’à 50 % de remise, jusqu’à dimanche

J’en profite

À l’arrivée dans Outlook pour Windows

Soldes d’automne

Jusqu’à 50 % de remise, jusqu’à dimanche

J’en profite

Ce que cela signifie pour vous : pour Outlook, les e-mails se codent avec des techniques spéciales. Un bouton se construit à partir d’une cellule de tableau avec une couleur de fond, et un tel bouton tient partout :

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f54eb" style="border-radius:8px;padding:14px 28px;">
      <a href="https://example.com/sale" style="color:#ffffff;text-decoration:none;">Shop the sale</a>
    </td>
  </tr>
</table>

Une image de fond demande un code à part en VML, un langage de balisage dépassé que seul Outlook comprend. Les outils d’IA n’y pensent presque jamais. Et un marketeur n’a aucune raison de l’apprendre.

Erreur 5. Un e-mail trop lourd, que Gmail tronque

Gmail n’affiche un e-mail en entier que si son code pèse moins d’environ 102 Ko. Tout ce qui dépasse est caché derrière la ligne « [Message tronqué] Afficher l’intégralité du message ». C’est le code qui compte : texte, styles, adresses des liens et des images. Les images chargées par lien ne comptent pas dans ce poids, mais les images en base64, si.

Les outils d’IA sont bavards. Ils répètent les mêmes styles sur chaque élément, ajoutent des conteneurs et des commentaires inutiles, et intègrent les images dans le code. La coupure tombe sur la partie la plus importante : la fin d’un e-mail contient en général le lien de désinscription et le pixel invisible qui permet à votre service d’e-mailing de compter les ouvertures. Un abonné qui veut se désinscrire ne trouvera pas le lien et risque de cliquer sur « Spam » à la place. Et les ouvertures de cet e-mail n’apparaîtront pas dans vos statistiques.

Ce que cela signifie pour vous : surveillez le poids du code. Si l’e-mail dépasse 100 Ko, il faut l’alléger : supprimer les répétitions, mettre les images sur un serveur, couper ce qui ne sert à rien.

Erreur 6. Pas de pré-en-tête

Le pré-en-tête est le court texte que la boîte de réception affiche à côté de l’objet. S’il n’y en a pas, la boîte de réception reprend le premier texte qu’elle trouve en haut de l’e-mail. En général, c’est « Afficher dans le navigateur », les entrées du menu ou la légende sous le logo. Les outils d’IA n’ajoutent presque jamais de pré-en-tête, parce que les sites web n’ont pas ce genre d’élément.

Ce que cela signifie pour vous : le pré-en-tête est un second objet, et il influe sur l’ouverture de l’e-mail. Il s’ajoute sous forme de bloc masqué tout au début du code :

<div style="display:none;max-height:0;overflow:hidden;">
  Up to 50% off until Sunday — free shipping on every order
</div>

Pour en savoir plus sur ce qui fait un bon e-mail, lisez notre guide du design d’e-mail.

Erreur 7. Scripts, formulaires et vidéo

Sur un site, il est normal d’ajouter des éléments interactifs : un carrousel en JavaScript, un formulaire d’inscription, une vidéo. Par habitude, l’IA en ajoute aussi dans les e-mails. Dans un e-mail, rien de tout cela ne fonctionne :

• Les clients de messagerie n’exécutent pas les scripts et les suppriment pour se protéger du code malveillant. Certains services d’e-mailing refusent même d’enregistrer un e-mail qui contient un script.
• Gmail remplace la balise <video> par un emplacement vide, et Outlook pour Windows et Yahoo ne l’affichent pas. Elle se lit surtout dans Apple Mail.
• Les formulaires ne fonctionnent pas dans Outlook pour Windows, Yahoo sur iPhone, Proton Mail et GMX, et dans Outlook.com et Outlook pour Mac les données ne sont pas envoyées.

Ce que cela signifie pour vous : au lieu d’une vidéo, un e-mail utilise une image de couverture qui renvoie vers elle, et au lieu d’un formulaire, un bouton qui mène à une page avec le formulaire. Si vous avez vraiment besoin d’interactivité, il faut des techniques spéciales, que nous avons présentées dans notre article sur les e-mails animés.

Comment demander à une IA de bien coder un e-mail

Vous pouvez éviter bon nombre de ces erreurs en expliquant d’emblée à l’IA les règles du balisage d’e-mail. Voici un prompt à ajouter à votre demande :

Code un e-mail HTML pour une campagne d’e-mailing, pas une page web. Pour la mise en page, utilise uniquement des tableaux avec role=“presentation”, sans grilles de div, sans flex ni grid. L’e-mail fait 600 pixels de large. Écris tous les styles en ligne dans l’attribut style, sans bloc style et sans classes. N’utilise pas les balises header, main, section, footer ni button. Les images doivent être en PNG ou JPG, avec une URL complète, width, height et alt, sans SVG ni base64. Fais les boutons à partir d’une cellule de tableau avec une couleur de fond. Pas de JavaScript, de formulaires ni de vidéo. Ajoute un pré-en-tête masqué au début de l’e-mail. Garde le code sous 100 KB.

Avec un prompt comme celui-ci, le résultat s’améliore nettement. Mais soyons honnêtes sur ce qu’il ne règle pas.

D’abord, sur un e-mail long, l’IA commence à oublier les règles en cours de route. Les premiers blocs sont codés avec des tableaux, puis <div> et flexbox réapparaissent dans le pied de page. Ensuite, l’IA ne voit pas à quoi ressemble l’e-mail dans une boîte de réception. Elle écrira avec assurance « ce code est compatible avec tous les clients de messagerie », mais elle n’a aucun moyen de le vérifier : elle n’a jamais ouvert l’e-mail dans Outlook. Enfin, vous ne pouvez pas non plus vérifier le code vous-même, à moins de coder des e-mails pour gagner votre vie. Il faut pour cela une série de boîtes de test dans différents clients ou un service de test payant.

L’IA est excellente pour bâtir la structure d’un e-mail et en rédiger les textes, comme nous l’expliquons dans notre article sur l’IA en e-mail marketing. Mais le balisage final est plus sûr entre les mains d’un outil qui connaît les règles de l’e-mail.

Comment transformer le balisage d’une IA en e-mail qui fonctionne

C’est à cela que sert le convertisseur d’e-mails HTML de Blocks. Il prend le code écrit par l’IA et le reconstruit selon les règles du balisage d’e-mail. Il corrige seul tout ce que nous avons vu plus haut : il transforme les blocs et le flexbox en tableaux, place les styles dans les balises et remet en ordre les images, les boutons et Outlook.

Voici comment ça se passe :

1. Collez le code de l’e-mail dans Blocks ou importez le fichier.
2. Blocks voit que l’e-mail a été créé ailleurs et propose de le convertir.
3. La conversion prend en général moins d’une minute.
4. L’e-mail s’ouvre dans l’éditeur, prêt à être exporté vers votre service d’e-mailing.

Il y a un second avantage, facile à manquer. Après la conversion, l’e-mail n’est plus un mur de code auquel vous n’osez pas toucher. Il s’ouvre dans l’éditeur sous forme de blocs : titre, image, texte, bouton. Vous pouvez corriger n’importe quel endroit à la main, un détail à la fois : remplacer un mot, changer une image, recolorer un bouton, le tout sans code et sans nouvelle demande à l’IA. Et à l’export, Blocks produit de nouveau un code que les clients de messagerie comprennent.

Si vous n’êtes pas sûr qu’un e-mail HTML en vaille la peine, comparez-le à un e-mail en texte brut dans notre article « E-mail HTML ou texte brut ».

En bref

• Les modèles d’IA ont appris à coder sur des sites web : un modèle d’e-mail issu de ChatGPT, de Claude ou de Gemini est donc construit comme une page web.
• Une campagne part chez tout le monde en même temps. Si une technique ne fonctionne pas dans un seul grand client de messagerie, elle ne convient pas à l’e-mail.
• Les principales erreurs : des div et du flexbox au lieu de tableaux, un bloc de styles à part au lieu de styles en ligne, des images en SVG et en base64, des techniques qu’Outlook pour Windows ne comprend pas, un code trop lourd, l’absence de pré-en-tête, et des scripts, formulaires et vidéos.
• Un prompt détaillé aide, mais ne garantit pas le résultat, et vous ne pouvez pas vérifier le code sans tests.
• La méthode fiable : passer le balisage de l’IA dans un convertisseur et ajuster les détails à la main dans l’éditeur.