Intermédiaire8 min de lecture· 66 vues· Dossier : Faire passer tes mails en inbox

Créer une « letter » (template HTML email) avec Claude ou GPT

Lexique + méthode + mini-constructeur de prompt pour générer un HTML email propre et délivrable, en 5 minutes.

« Letter » = mot du métier pour désigner un template d’email HTML réutilisable (souvent : confirmation de commande, notification, newsletter, mail administratif imitant celui d’un service connu pour des opérations légales de vérification d’identité, etc.).

L’IA (Claude ou GPT) sait générer du HTML email propre… si tu lui donnes le bon prompt. Sans précautions, elle te sort du HTML façon site web, qui casse partout (Outlook surtout).

Le lexique de la letter

Inline CSS : tout le style dans style="..." directement sur les balises. Obligatoire car Outlook ignore les <style> externes.
Tableau : la mise en page se fait en <table> imbriquées (oui, comme en 2003). Pas de flex, pas de grid.
Bulletproof button : un bouton qui s’affiche correctement sur Outlook via une déclaration VML conditionnelle.
Préheader : le petit texte de prévisualisation qui s’affiche en boîte de réception, masqué dans le mail lui-même.
MSO conditional : code spécifique Outlook ().
Dark mode meta : <meta name="color-scheme" content="light dark"> pour Apple Mail / Outlook récents.
Plain-text version : version texte pure, indispensable pour ne pas tomber en spam (les filtres le vérifient).
Subject + Preheader : la combinaison qui décide si on ouvre.

Les particularités par fournisseur

Fournisseur	Particularité
Gmail	Strip les `<style>` redondants, supporte les media queries
Outlook (Word renderer)	Pas de `border-radius` sans VML, pas de `background-image`, ignore `max-width`
Apple Mail	Bon support, mais inverse les couleurs en mode sombre
Yahoo / La Poste	Pas d’iframe, pas de JS, sensible au DKIM
Orange / Free	Très sensibles au ratio image/texte (max 40% image)

La méthode

Décide qui envoie (la marque) et pourquoi (le sujet du mail).
Choisis un style visuel (sobre Apple, fintech, e-commerce, administratif).
Liste les boîtes mail prioritaires (en France : Gmail, La Poste, Outlook, Orange, Free).
Construis le prompt avec l’outil ci-dessous, copie, colle dans Claude ou GPT.
Teste l’output sur mail-tester.com d’abord, puis sur 3 boîtes réelles au minimum.

Pourquoi Claude > GPT pour ça

Anecdotique, mais : Claude (Anthropic) suit mieux les contraintes longues sans en oublier la moitié. Pour un brief de 500 mots avec 15 contraintes techniques précises, on a observé 90 % de réussite côté Claude vs 65 % côté GPT-4. À tester selon ton modèle dispo.

L’outil

L’outil ci-dessous remplit le prompt avec tes paramètres. Plus le prompt est spécifique, plus l’output est utilisable.

Mini-constructeur de prompt

Réponds à 4 questions, copie le prompt, colle-le dans Claude ou ChatGPT. Tu obtiens un HTML email propre, compatible avec les principales boîtes mail, prêt à expédier.

Nom de la marque (de qui vient le mail)Sujet du mail (de quoi tu veux parler)TonStyle visuelTexte du bouton (CTA)Boîtes mail visées

Précisions optionnelles (variables, contraintes…)

Prompt prêt à coller

Tu es un développeur HTML/CSS spécialisé dans les e-mails (letters) à fort taux de délivrabilité.

Génère un fichier HTML autonome (un seul fichier, pas de CSS externe) pour un mail :
- Marque : Ma Marque
- Sujet du mail : Confirmation de paiement
- Ton : Pro et neutre
- Style visuel : Fintech, cards et chiffres bien lisibles
- Texte du bouton principal (CTA) : Voir mon dossier
- Boîtes mail prioritaires : Gmail (gmail.com), Outlook / Hotmail (outlook.com, hotmail.fr, live.fr), La Poste (laposte.net)


Contraintes techniques OBLIGATOIRES :
1) Structure entièrement en <table role="presentation" cellpadding="0" cellspacing="0" border="0"> imbriquées (pas de flex, pas de grid).
2) Largeur fixe 600px max sur desktop ; design responsive via media queries simples (@media (max-width:600px)) avec width:100%.
3) CSS inline pour TOUTES les propriétés visuelles (color, background, font, padding, border-radius, etc.). Outlook ignore les <style> distants.
4) Inclure les <!--[if mso]>…<![endif]--> nécessaires pour Outlook : VML pour les boutons, fallback de fonts, et background sur <td bgcolor="...">.
5) Bouton CTA "bulletproof" : <a> stylé en bloc + VML <v:roundrect> pour Outlook.
6) Préheader (texte caché de 80–100 caractères) tout en haut, masqué visuellement (style="display:none;max-height:0;overflow:hidden;").
7) Police : stack web-safe (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif). Pas de Google Fonts (cassé sur Outlook).
8) Images : déclarer width/height en attributs HTML ET en style. Toujours alt="" descriptif. Privilégier des images hébergées en HTTPS.
9) Liens : ne JAMAIS utiliser de raccourcisseurs (bit.ly, t.co…) — La Poste/Free/Outlook les flag en spam.
10) Pas de JavaScript, pas de <form>, pas de <video>. Outlook les supprime.
11) Pour les utilisateurs Gmail (gmail.com) / Outlook / Hotmail (outlook.com, hotmail.fr, live.fr) / La Poste (laposte.net) : éviter les mots déclencheurs spam dans le sujet et le préheader (URGENT, GRATUIT en majuscules, $$$, etc.).
12) Mode sombre (Apple Mail / Outlook récents) : prévoir des couleurs qui restent lisibles. Ajouter <meta name="color-scheme" content="light dark"> et <meta name="supported-color-schemes" content="light dark">.
13) Doctype : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.
14) Encodage UTF-8 explicite, lang="fr".
15) Texte alternatif (version plain-text) pertinent à fournir séparément après le HTML, sous le titre "VERSION TEXTE".

Spécificités par fournisseur :
- Gmail : strip <style> dupliqué, donc inline obligatoire ; supporte bien les media queries dans <head>.
- Outlook (Word renderer) : pas de margin sur les <td>, utiliser padding ; pas de border-radius sans VML ; pas de background-image sans VML ; max-width ignoré → forcer en width fixe.
- Yahoo / La Poste : pas d’iframes, pas de JS, signature DKIM/SPF cohérente (tu n’as pas à la générer mais à le rappeler).
- Orange / Free : très sensibles au ratio image/texte. Pas plus de 40% d’image en surface. Texte alt riche.
- Apple Mail : respecte bien le HTML mais inverse souvent les couleurs en mode sombre.

Livre :
1. Le code HTML complet du mail.
2. Une checklist des tests à faire avant envoi (Litmus / Email on Acid / boîtes réelles).
3. La VERSION TEXTE simple correspondante.
4. 3 propositions de Subject (objet) ≤ 50 caractères + 3 préheaders ≤ 100 caractères.

Commence directement par le HTML.

Ouvrir Claude Ouvrir ChatGPT

#email#letter#html#ia#prompt