Campagnes E-mail

Créez des e-mails marketing modernes, cohérents avec votre marque, et envoyez-les via Resend. Cette compétence encode un modèle complet : hébergement des assets, composants HTML réutilisables, outils GIF et le pipeline d'envoi Resend.

1. Hébergement des assets – utilisez votre propre site comme CDN

Configuration unique. Dans un projet Next.js ou tout projet hébergé statiquement, créez un dossier servi à la racine du site :

<projet>/public/email-assets/
  <nom-campagne>/
    hero.png
    demo.gif

Tout ce qui se trouve dans public/ est servi à l'adresse https://votredomaine.com/email-assets/.... Committez + pushez = CDN instantané. Pas de Cloudinary, pas de S3.

Règles pour les assets compatibles e-mail :

Nommage : minuscules, tirets uniquement (hero-image.jpg ✅, Hero Image.jpg ❌)
Images : JPG/PNG, ≤ 1 Mo, max 600 px de large
GIFs : ≤ 1,5 Mo, max 720 px de large, 12-15 ips, moins de 8 secondes
Vidéo : MP4 dans le même dossier, mais n'incorporez JAMAIS <video> – utilisez toujours une vignette GIF renvoyant vers le MP4
Numérotez les versions des fichiers plutôt que de les écraser (hero-v2.jpg) – les clients de messagerie mettent en cache de manière agressive

Avant d'envoyer : remplacez tous les chemins locaux par des URLs absolues (https://votredomaine.com/email-assets/...). Les chemins relatifs fonctionnent dans l'aperçu du navigateur mais échouent dans les boîtes de réception des destinataires.

2. Système de design – blocs réutilisables

Utilisez cet inventaire de blocs de construction. Copiez à partir d'une campagne précédente, ne repartez pas de zéro.

Coque extérieure

<body style="margin:0; padding:0; background-color:#ffffff;
             font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;">
  <div style="display:none; max-height:0; overflow:hidden; font-size:1px; line-height:1px; color:#fff;">
    [PRÉ-EN-TÊTE — 1 phrase, affichée dans l'aperçu de la boîte de réception]
  </div>
  <table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff;">
    <tr><td align="center" style="padding:32px 16px;">
      <table width="560" cellpadding="0" cellspacing="0" border="0"
             style="max-width:560px; width:100%;">
        <!-- CARTE PRINCIPALE -->
        <tr><td>
          <table width="100%" cellpadding="0" cellspacing="0" border="0"
                 style="background-color:#f7fbfe;
                        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4wNiIvPjwvc3ZnPg=='),
                                         linear-gradient(90deg, #edf6fd 0%, #f6fbfe 50%, #fcfdfe 100%);
                        border-radius:4px;
                        box-shadow: 0 2px 8px rgba(24,24,27,0.06), 0 8px 24px rgba(24,24,27,0.04);
                        overflow:hidden;">
            <!-- les sections vont ici -->
          </table>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>

Jetons clés :

Fond de carte : dégradé ciel clair + texture SVG 6% de bruit pour la profondeur (grain subtil). Direction du dégradé 90deg = de gauche à droite.
Ombre de carte : ombre douce en couches, sans bordure
Rayon de carte : 4px (coins serrés, aspect moderne)

Image d'en-tête

Image pleine largeur affleurant le haut de la carte. Recadrez les 3/4 supérieurs d'une image large (1376×576 recadré à partir de 1376×768) pour le héros ; utilisez le 1/3 inférieur (256px) comme image de pied de page à l'intérieur de la carte.

Cartes logo (frost-glass)

Cinq logos répartis sur toute la largeur de la carte via des colonnes width="20%". Chaque carte 72×72, remplissage clair (dégradé #f4f4f7), ombre douce, rayon 3px.

Titre héros + corps

<h1 style="font-size:26px; font-weight:700; color:#18181b; letter-spacing:-0.5px;">...</h1>
<p style="font-size:15px; line-height:1.65; color:#3f3f46;">...</p>

Liste de fonctionnalités avec des puces noires (pas de coches vertes)

Gardez les puces noires • dans une cellule de 20px, texte 15px. Évitez les pastilles vertes de vérification – elles semblent démodées.

Bloc vidéo (frost-glass avec fond flouté)

Pré-floutez votre image de marque héros avec ffmpeg pour l'utiliser comme fond coloré derrière les vidéos :

ffmpeg -y -i header.png -vf "boxblur=luma_radius=30:luma_power=3" header_blur.png

Ensuite :

<a href="URL-DE-DESTINATION">
  <p>Titre de la vidéo</p>
  <table width="100%">
    <tr><td style="background-image:url('https://votredomaine.com/email-assets/header_blur.png');
                   background-size:cover; border-radius:3px; padding:14px;
                   box-shadow:0 4px 14px rgba(24,24,27,0.1);">
      <table width="100%">
        <tr><td style="background-color:rgba(255,255,255,0.55);
                       backdrop-filter:blur(12px);
                       -webkit-backdrop-filter:blur(12px);
                       border:1px solid rgba(255,255,255,0.6);
                       border-radius:3px; padding:10px;
                       box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);">
          <img src="URL-GIF" width="475" style="display:block; width:100%;
                                                max-width:475px; border-radius:3px;">
        </td></tr>
      </table>
    </td></tr>
  </table>
</a>

Dans Apple Mail/iOS : backdrop-filter rend un vrai verre. Dans Gmail/Outlook : l'image pré-floutée en dessous suffit à créer l'effet.

Bouton CTA

Pilule noire, rayon 4px, remplissage 14px 24px, petit logo optionnel en ligne :

<table width="100%"><tr><td align="center"
       style="border-radius:4px; background-color:#18181b;">
  <a href="URL-DE-DESTINATION" style="display:block; padding:14px 24px;
                               font-size:14px; font-weight:600; color:#fff;
                               text-decoration:none;">
    <img src="LOGO" width="20" height="20"
         style="display:inline-block; vertical-align:middle;
                margin-right:8px; border-radius:3px;" alt="">
    <span style="vertical-align:middle;">Connectez vos comptes &rarr;</span>
  </a>
</td></tr></table>

Placez un CTA immédiatement après la première vidéo de démonstration (moment de conversion le plus élevé) et un en bas.

Échelle typographique

H1 : 26px
Corps/fonctionnalités/titres de vidéos : 15px
Étiquettes de section/pied de page : 13px
Bouton CTA : 14px

Tenez-vous-en à cela. Pas plus de 3 tailles.

3. Workflow d'optimisation GIF

Pour chaque enregistrement d'écran :

# Convertir MP4 → GIF optimisé (720px, 15ips, vitesse x2, limiter à 8s)
ffmpeg -y -i source.mp4 -t 8 \
  -vf "setpts=0.5*PTS,fps=15,scale=720:-1:flags=lanczos,split[s0][s1];\
       [s0]palettegen=max_colors=256[p];\
       [s1][p]paletteuse=dither=sierra2_4a" \
  -loop 0 output.gif

# Vérifier la taille du fichier – doit être inférieure à 1,5 Mo
ls -lh output.gif

Si trop volumineux :

Passez à 12 ips
Réduisez la largeur à 600 px
Limitez à 5-6 secondes
Passez à 128 couleurs pour la palette, utilisez dither=bayer:bayer_scale=5

Si qualité insuffisante :

Augmentez à 720-900 px
256 couleurs avec tramage sierra2_4a
Acceptez un plafond de 1,5-2 Mo

4. Envoi via Resend

Configuration (une fois par projet)

npm install resend

Variable d'environnement : RESEND_API_KEY=re_... (obtenez-la sur le tableau de bord resend.com)

Domaine d'envoi : vérifiez d'abord votre domaine d'envoi dans les paramètres Resend (les enregistrements DNS prennent environ 15 min à se propager). Utilisez [email protected], pas un fournisseur gratuit.

Envoyer un e-mail test unique

// send.mjs
import { Resend } from 'resend';
import fs from 'fs';

const resend = new Resend(process.env.RESEND_API_KEY);
const html = fs.readFileSync('./email.html', 'utf-8');

const { data, error } = await resend.emails.send({
  from: 'Ira <[email protected]>',
  to: '[email protected]',
  subject: "Le connecteur Claude pour Google/Meta Ads est en ligne",
  html,
  // Texte alternatif facultatif
  text: "Nous avons publié le connecteur Claude. Connectez-vous en 1 clic : https://...",
});

console.log(error ?? data);

Exécutez : node send.mjs. Envoyez-vous toujours un test en premier.

Envoyer à une liste (envois groupés)

Resend limite le débit à 10 req/s (gratuit) ou 100 req/s (payant). Pour les listes plus grandes, utilisez leur API batch :

await resend.batch.send(
  destinataires.map(email => ({
    from: 'Ira <[email protected]>',
    to: email,
    subject: '...',
    html,
  }))
);

Jusqu'à 100 e-mails par appel batch. Découpez votre liste en conséquence.

Séquences / campagnes goutte-à-goutte

Pour une séquence de 3 e-mails (jour 0, jour 3, jour 7), utilisez une tâche cron + une table d'état d'envoi dans Postgres/Supabase :

// Pseudo-code
const dueToday = await db.campaigns.findMany({
  where: { scheduled_date: today, status: 'pending' }
});
for (const c of dueToday) {
  await resend.emails.send({ ...c });
  await db.campaigns.update({ where: { id: c.id }, data: { status: 'sent' } });
}

Resend dispose de webhooks pour email.delivered, email.opened, email.clicked – utilisez-les pour déclencher l'e-mail suivant de la séquence plutôt que des minuteries fixes.

5. Liste de vérification pré-envoi

Avant d'envoyer à une vraie liste :

6. Bonnes pratiques de conversion

Un seul CTA principal – répété deux fois (milieu + bas de l'e-mail). Ne diluez pas avec des actions secondaires.
Vidéo d'abord, texte ensuite – un GIF de 3 secondes montre le produit plus vite que 3 paragraphes.
La spécificité gagne – "Connectez-vous en 1 clic" > "Commencer". "Configuration en 30 secondes" > "Facile à installer".
Affirmation + preuve – chaque affirmation près d'un visuel (GIF, capture d'écran ou bande de logo montrant les intégrations).
CTA de réponse à faible friction – "Répondez 'Guide' et je vous enverrai X" est très engageant et peu coûteux à exécuter.
Envoyez mardi-jeudi, 9h-11h heure locale du destinataire. Évitez le lundi (boîtes de réception pleines) et les week-ends (faible ouverture).

7. Modèle de démarrage

Pour démarrer une nouvelle campagne, copiez le dernier HTML fonctionnel de votre dépôt (par exemple public/email-assets/preview/claude-connector.html) et modifiez-le sur place. Conservez le fichier d'aperçu dans le dépôt avec le dossier de la campagne :

public/email-assets/2026-05-lancement/
  hero.png
  demo.gif
  preview.html

Prévisualisez localement à l'adresse http://localhost:3000/email-assets/2026-05-lancement/preview.html.

8. Ce qu'il NE FAUT PAS faire

❌ N'utilisez pas de balises <video> – bloquées dans Gmail/Outlook
❌ N'utilisez pas de grille CSS ou flexbox – cassé dans Outlook. Utilisez des <table> imbriquées.
❌ N'utilisez pas de polices web – la plupart des clients les suppriment. Restez sur la pile système.
❌ N'utilisez pas d'images de fond sur le <body> si vous en avez besoin sur Gmail mobile – Gmail ignore le fond du body. Mettez la couleur à l'intérieur de la carte principale.
❌ N'intégrez pas du MP4 directement – utilisez toujours un aperçu GIF → lien vers un MP4 externe.
❌ N'envoyez pas sans tester – rendezu un dans Litmus/Mailtrap ou envoyez-vous un test sur 3 clients clients.

irinabuht12-oss/email-campaigns-claude

Qu'est-ce que email-campaigns-claude ?

Demander à votre IA préférée

Aperçu

Documentation