Newsletter Email
Rédige et conçoit une newsletter HTML complète à partir d'un sujet ou d'un brief. Le résultat est prêt à être collé dans Loops, Mailchimp, Beehiiv, Resend ou toute plateforme email standard.
Règle impérative : HTML basé sur des tableaux avec styles inline uniquement. Pas de classes CSS, pas de flexbox, pas de grid, pas de blocs <style>. Chaque élément reçoit style="" directement. Ce n'est pas optionnel : les clients email suppriment tout le reste.
Étape 1 : Recueil du brief
J'ai besoin de trois éléments pour commencer. Si les trois sont présents dans le message, passez à l'étape 2.
Si un élément manque, demandez exactement :
« Pour commencer, j'ai besoin de trois choses :
- Sujet – de quoi parle cette newsletter ?
- Audience – qui la lit ? (rôle, taille de l'entreprise, comment ils vous connaissent)
- CTA principal – quelle est l'action unique que vous voulez que les lecteurs fassent ? »
Attendez les trois réponses avant de continuer.
Étape 2 : Recueil complet
Posez toutes les questions en un seul message, regroupées par catégorie. L'utilisateur peut passer certaines questions, des valeurs par défaut s'appliquent.
« Quelques questions avant que je rédige – répondez à ce que vous savez, ignorez le reste :
Contenu
- Longueur – brève (300 mots, percutante) / standard (500-700) / approfondie (800+ mots) ?
- Format – article éditorial / décompte numéroté / histoire personnelle / rapport de données ?
- Contexte du numéro – envoi unique / partie d'une série hebdomadaire / digest mensuel ?
- URL du CTA – quel est le lien réel ? (ou j'utiliserai un espace réservé)
Marque 5. Nom de l'entreprise / de la marque – pour l'en-tête et le pied de page 6. Slogan – description en une ligne (optionnel, pour le pied de page) 7. Ville et pays – pour le pied de page (ex : « Paris, France ») 8. Couleur principale de la marque – hexadécimal ? (ex : #856FE6) 9. Accent secondaire – garder le jaune-vert par défaut (#D8F90A) / utiliser la couleur de la marque / autre ?
Design 10. Arrière-plan – sombre (éditorial/SaaS) / clair (propre/corporate) / hexadécimal personnalisé ? 11. Police d'affichage – sérif éditoriale (Instrument Serif) / sans moderne et épurée / polices système uniquement ? 12. Style du bouton – pilule (très arrondi) / légèrement arrondi / coins droits ? 13. Style visuel – éditorial / technique+données / chaleureux+fondateur / audacieux+campagne ?
Plateforme et technique 14. Plateforme – Loops / Mailchimp / Beehiiv / Resend / autre ? 15. Ton – éducatif / conversationnel / audacieux+direct / formel / ludique ? 16. Personnalisation – aucune / prénom / prénom + entreprise ? 17. Ligne d’objet – vous en avez une / vous voulez 3 options ? 18. Sections secondaires – bloc sponsor / appel produit / événement / liens rapides / aucune ? 19. Version texte brut – oui (recommandé) / non ? »
Valeurs par défaut si ignoré :
| Question | Valeur par défaut |
|---|---|
| Longueur | standard (500-700 mots) |
| Format | article éditorial |
| Contexte du numéro | envoi unique |
| URL du CTA | espace réservé [CTA_URL] |
| Nom de l'entreprise | espace réservé [YOUR BRAND] |
| Slogan | aucun |
| Ville et pays | espace réservé [CITY, COUNTRY] |
| Couleur de la marque | aucun (utilise #D8F90A pour tous les accents) |
| Accent secondaire | #D8F90A (jaune-vert par défaut) |
| Arrière-plan | sombre |
| Police d'affichage | Instrument Serif (sérif éditoriale) |
| Style du bouton | pilule |
| Style visuel | éditorial |
| Plateforme | générique |
| Ton | conversationnel |
| Personnalisation | aucune |
| Ligne d’objet | générer 3 options |
| Sections secondaires | aucune |
| Texte brut | oui |
Étape 2.5 : Direction du design (interne – ne pas montrer à l'utilisateur)
À partir des réponses de l'étape 2, déterminez :
- Le caractère visuel (questions 13, ou déduit du ton et du format si ignoré)
- UN élément incontournable – identifiez-le avant l'étape 3
- Le chemin du template (voir étape 5)
Valeurs par défaut du caractère si la question 13 est ignorée :
- Ton éducatif / formel : Éditorial
- Contenu axé sur les métriques (stats, benchmarks, rapports) : Technique/données
- Lancements de produits, événements, campagnes : Audacieux/campagne
Ne demandez jamais à l'utilisateur une direction de design séparément – déduisez-la de ses réponses.
Étape 3 : Conception de la structure
Lisez references/html-email-guide.md pour les règles de mise en page avant de choisir les sections.
En fonction du sujet + de l'audience + du CTA + des sections secondaires demandées, sélectionnez des sections parmi cette bibliothèque :
| Section | Inclure quand |
|---|---|
| header | Toujours – espace réservé du logo + numéro de numéro ou date |
| hero | Toujours – grand titre + accroche de 1 à 2 phrases |
| intro | Ton conversationnel ou éducatif – courte note personnelle |
| main-content | Article ou insight principal (texte long) |
| stat-callout | Il y a une statistique, citation ou donnée convaincante |
| secondary-section | Un deuxième CTA a été demandé |
| product-cta | Contexte de marque présent et un placement produit subtil fonctionne |
| sponsor-block | Une section sponsor a été demandée |
| quick-links | Une section de liens organisés a été demandée |
| footer | Toujours – lien de désabonnement + nom de l'entreprise |
Affichez la structure choisie sous forme de liste numérotée avec un objectif par ligne :
Structure proposée :
1. En-tête – logo + Numéro #1 / [date]
2. Hero – titre + paragraphe d'accroche
3. Intro – courte mise en contexte personnelle
4. Contenu principal – analyse du [sujet]
5. Mise en avant statistique – donnée clé de l'histoire
6. CTA – [texte du CTA]
7. Pied de page – désabonnement + entreprise
Cette structure vous convient-elle, ou dois-je ajuster certaines sections ?
Attendez la confirmation avant l'étape 4.
Étape 4 : Rédaction du contenu
Rédigez le texte pour chaque section dans l'ordre. Pas encore d'HTML – uniquement de la prose propre.
Règles par section :
- En-tête : Numéro du numéro + date. Pas de texte nécessaire.
- Titre Hero : 8 mots max, axé sur le résultat, ne commence pas par « Je/Nous/Nos »
- Accroche Hero : 1 à 2 phrases, problème ou curiosité, attire le lecteur
- Intro : 2 à 3 phrases, personnelle ou contextuelle, pas de langage corporate, les contractions sont autorisées
- Contenu principal : 250 à 400 mots, facile à parcourir – utilisez des phrases en gras pour les points clés, paragraphes courts (1 à 3 lignes), pas de murs de texte, pas de surcharge de listes
- Mise en avant statistique : Une statistique ou citation, 20 mots max, percutante
- CTA produit : 2 à 3 phrases, axé sur la valeur, pas « Découvrez notre produit » – dites-leur ce qui change pour eux
- Texte du bouton CTA : 3 à 5 mots, verbe d'action + bénéfice (« Lire l'analyse complète », « Réserver ma place », « Télécharger le guide »)
- Pied de page : Espace réservé du lien de désabonnement + nom de l'entreprise
Lisez references/subject-line-formulas.md puis rédigez 3 options de ligne d'objet (si la ligne d'objet n'est pas fournie par l'utilisateur) :
- Option A : Formule de la curiosité
- Option B : Formule du bénéfice direct
- Option C : Formule du nombre/liste
N'utilisez pas de tirets cadratins. N'utilisez pas : « puissant », « transparent », « révolutionnaire », « optimiser », « innovant », « libérer », « transformer », « améliorer », « de pointe », « robuste ».
Étape 5 : Génération HTML
Lisez references/design-system.md et references/html-email-guide.md avant de générer l'HTML.
Template ou personnalisé – décidez en fonction des réponses de l'étape 2 :
Utilisez templates/dark-newsletter.html comme base quand TOUS les critères sont réunis :
- arrière-plan = sombre (ou non spécifié)
- police d'affichage = Instrument Serif (ou non spécifié)
- aucun hexadécimal d'arrière-plan personnalisé fourni
Utilisez templates/light-newsletter.html comme base quand TOUS les critères sont réunis :
- arrière-plan = clair OU le ton = formel
- police d'affichage = Instrument Serif (ou non spécifié)
- aucun hexadécimal d'arrière-plan personnalisé fourni
Générez un HTML personnalisé à partir de zéro quand UN des critères est rempli :
- hexadécimal d'arrière-plan personnalisé fourni (ni sombre, ni blanc)
- police d'affichage = sans moderne ou polices système uniquement
- la combinaison des réponses produit un design qu'aucun template ne couvre
Pour la génération personnalisée : utilisez references/design-system.md Guide de génération personnalisée comme spécification de token complète. Appliquez les choix de l'utilisateur pour l'arrière-plan, la police, le bouton et l'accent.
Ensuite (pour le chemin du template) :
- Sélectionnez uniquement les sections nécessaires du template (basées sur la structure de l'étape 3)
- Remplacez toutes les valeurs
[PLACEHOLDER]par le contenu de l'étape 4 - Appliquez la substitution de la couleur de marque (voir ci-dessous)
- Vérifiez que tous les espaces réservés
[UNSUBSCRIBE_URL]sont toujours présents (l'ajustement à la plateforme a lieu à l'étape 6)
Règles de substitution de la couleur de marque :
Si brand_color est fournie :
- Remplacez le
bgcolorde la bande de marque (#D8F90Adans la ligneheight:2px) par la couleur de marque - Remplacez la couleur de la bordure gauche de la mise en avant statistique par la couleur de marque
- Remplacez la couleur du libellé de catégorie par la couleur de marque
- Si la luminance de la couleur de marque est élevée (jaunes, verts, oranges – la plupart des néons) : remplacez également le
#D8F90Adu badge d'étape par la couleur de marque - Si la luminance de la couleur de marque est faible (bleu marine foncé, vert forêt, charbon) : conservez les badges d'étape et le bouton CTA en
#D8F90A, utilisez la couleur de marque uniquement pour la bande et la bordure de la mise en avant statistique
Si brand_color n'est PAS fournie : conservez toutes les valeurs #D8F90A telles quelles.
Règles de substitution du contenu (réponses de l'étape 2) :
- Si
company_nameest fourni : remplacez tous les espaces réservés[YOUR BRAND]et[COMPANY NAME] - Si
city_countryest fourni : remplacez l'espace réservé[CITY, COUNTRY] - Si
taglineest fourni : ajoutez comme sous-titre dans le pied de page après le nom de l'entreprise - Si
cta_urlest fourni : remplacez tous les espaces réservés[CTA_URL]par l'URL réelle - Si
personalization = first_name: ajoutez une variable de prénom adaptée à la plateforme dans le message d'accueil du Hero – ex :Hey %%first_name%%,sur Beehiiv,Hey {{first_name}},sur Loops,Hey *|FNAME|*,sur Mailchimp - Si
personalization = first_name + company: ajoutez les deux variables là où c'est contextuellement approprié
Vérification de tension visuelle de la couleur de marque (sur email sombre) :
La couleur de marque ressort-elle visuellement sur #111111 ? Testez mentalement : serait-elle visible en tant que bande de 2px ?
- Couleurs à saturation élevée (violets, bleus, sarcelles, roses, jaunes, oranges, verts) : OUI – utilisez pour la bande + bordure de la mise en avant statistique + libellé de catégorie
- Faible saturation / quasi neutre (gris chauds, beige, blanc cassé) : bande uniquement ; le libellé de catégorie revient à
#555555 - Presque noir (bleu marine très foncé, vert forêt, charbon en dessous d'environ
#2A2A2A) : ignorez la couleur de marque pour TOUS les usages d'accent, revenez à#D8F90Apour chaque élément
Règle de discipline des accents : la couleur de marque apparaît au MAXIMUM à 3 endroits : bande de marque, bordure de mise en avant statistique, libellé de catégorie. Jamais dans le corps du texte, les titres, les arrière-plans des boutons ou les arrière-plans des sections. Le sur-marquage tue la sensation premium.
Couleur du texte du bouton CTA :
- Sur fond de bouton
#D8F90A: utilisez toujours du texte#0A0A0A(c'est une couleur claire) - Sur fond de bouton
#111111(dans la carte d'appel jaune) : utilisez toujours du texte#F2F2F2 - Sur bouton de couleur de marque : utilisez
#0A0A0Asi la marque est claire,#FFFFFFsi la marque est foncée
Requis sur chaque <td> avec une couleur de fond :
À la fois l'attribut HTML bgcolor= ET le style inline background-color:. Exemple :
<td bgcolor="#D8F90A" style="background-color:#D8F90A;">
L'attribut gère Outlook. Le style gère tout le reste. N'utilisez jamais un seul des deux.
Excellence du design (principes de design frontend, adaptés à l'email) :
Les contraintes des tableaux dans les emails ne limitent pas l'ambition du design. Repoussez-les :
-
La typographie à son extrême : titres de 4 à 5 mots = 60px, tracking
-0.04em. Titres de 6 à 7 mots = 56px, tracking-0.03em. 8 mots = 48px. Ne réduisez jamais par sécurité – le titre est une affiche, pas une étiquette. L'Italic d'Instrument Serif sur les citations ajoute un poids littéraire qu'aucun autre élément ne peut égaler. -
Le contraste de densité comme marque de fabrique : Hero = espace ouvert maximum (64px en haut). Paragraphes du corps = serrés et denses. Carte d'appel CTA = espace ouvert maximum à nouveau (64px). Ouvert → serré → ouvert est le rythme qui se lit comme un design intentionnel, pas comme un résultat de template.
-
Profondeur de fond via l'alternance des sections (tous compatibles email) :
- En-tête :
#0A0A0A - Hero :
#111111 - Mise en avant statistique externe :
#111111, carte interne surélevée :#1A1A1A - Paragraphes du corps :
#161616(une légère élévation crée de la profondeur sans couleur) - Cartes d'étape :
#111111(contraste avec le corps) - Carte d'appel CTA :
#D8F90A(le SEUL élément lumineux – ne diluez jamais) - Pied de page :
#080808
- En-tête :
-
Rareté des accents = luxe : Une carte d'appel jaune dans une mer sombre donne une impression premium. Du jaune apparaissant à six endroits donne une impression bon marché. La puissance de la carte CTA vient entièrement du fait qu'elle est l'élément lumineux unique dans un email sombre.
-
Test inoubliable : Avant d'enregistrer, dites en une phrase ce qu'un lecteur décrirait à un collègue 3 heures plus tard. Si c'est vague (« c'était sombre et propre ») – l'ancre visuelle n'est pas assez forte. Rendez-la spécifique (« la carte jaune avec le grand titre sérif »).
-
Mise en avant statistique comme citation magazine : Bordure gauche de 4px (pas 3px). 26px italic Instrument Serif sur le texte de la citation. Padding intérieur de 32px. C'est ce que l'email fait de plus proche d'une citation de magazine. Traitez-la comme telle.
Étape 6 : Ajustement à la plateforme
Lisez references/platform-compat.md et appliquez les ajustements spécifiques à la plateforme :
| Plateforme | Action |
|---|---|
| Loops | Remplacez [UNSUBSCRIBE_URL] par {{unsubscribe_url}}. Remplacez les références [FIRST_NAME] par {{first_name}} |
| Mailchimp | Remplacez [UNSUBSCRIBE_URL] par *|UNSUB|*. Ajoutez mc:edit="[section-name]" aux blocs <td> modifiables |
| Beehiiv | Remplacez [UNSUBSCRIBE_URL] par %%unsubscribe_url%%. Remplacez [FIRST_NAME] par %%first_name%% |
| Resend | Remplacez [UNSUBSCRIBE_URL] par {unsubscribeUrl}. Note : la sortie React Email .tsx est disponible sur demande |
| Générique/Autre | Conservez [UNSUBSCRIBE_URL] comme espace réservé avec le commentaire : <!-- Remplacez par votre lien de désabonnement --> |
Étape 7 : Auto-vérification
Vérifiez l'HTML généré avant de le fournir. Corrigez chaque problème trouvé – ne sautez aucune vérification.
Vérifications de rendu :
- Tous les styles sont inline – aucun bloc
<style>, aucun attributclass=nulle part - Tous les
<table>ontcellpadding="0" cellspacing="0" border="0" - Les images (le cas échéant) ont
alt="",border="0",display:blockdans le style - Largeur maximale de 600px appliquée au tableau conteneur
- Le bouton CTA utilise une structure
<table>+<td>avec l'attributbgcolor=, pas seulement un<a>avecdisplay:block - Pas de
flexbox,grid,position:,float:, variables CSS (--var),min-height,max-heightdans aucun style inline -
border-radiussur<td>uniquement – pas sur<table>ou<a>(Outlook rend le rayon du<td>) - Le pied de page a un lien de désabonnement avec la variable correcte pour la plateforme
Vérifications de contenu :
- Le titre Hero fait 8 mots ou moins
- Le texte du bouton CTA fait 3 à 5 mots
- Pas de tirets cadratins (les doubles tirets -- sont corrects, pas les cadratins —)
- Pas de mots interdits : « puissant », « transparent », « révolutionnaire », « optimiser », « innovant », « libérer », « transformer », « améliorer », « de pointe », « robuste »
- Les lignes d'objet utilisent trois formules différentes (curiosité, bénéfice, nombre/liste) – la même formule répétée est interdite
- La couleur de marque apparaît à 3 endroits maximum
- Aucun fond de section n'utilise la couleur de marque (sauf la bande)
-
#D8F90An'est remplacé par la couleur de marque que si la luminance est élevée (selon la règle de substitution) - Les espaceurs de contenu utilisent uniquement des
imgtransparents de 1x1px (pas dewidth:/height:sur les<td>, pas de cellules ) - Texte brut demandé : extrait et formaté dans le bloc
<pre>après l'HTML (ou envoyé comme second message)
Vérifications de la carte d'appel :
- La carte d'appel CTA est le seul élément
#D8F90A(ou couleur de marque à luminance élevée) - Le fond du bouton CTA à l'intérieur de la carte d'appel est
#111111, le texte est#F2F2F2
Vérifications de la mise en avant statistique :
- Bordure gauche de 4px (pas 3px)
- Citation en italic Instrument Serif de 26px
- Padding intérieur de 32px
- Couleur de la bordure : couleur de marque (si fournie et adaptée) ou
#D8F90A(par défaut)
Étape 8 : Code final
- Copiez l'HTML vérifié dans un bloc de code marqué comme
html - Si
plain_text = "oui": extrayez le contenu du corps, convertissez les lignes en texte brut (lignes vides entre les paragraphes, liens entre crochets[titre du lien](url), en-têtes#supprimés) - Envoyez l'HTML + le texte brut comme sortie finale
Exemple de sortie :
Voici votre newsletter :
[HTML complet ici]
Version texte brut :
[texte brut ici]