Module 03

Email marketing en HTML — de A a Z

Ce que tu vas apprendre

Structurer un email HTML professionnel avec des tableaux
Ajouter un logo et des images produits avec la balise <img>
Placer des boutons et des liens cliquables avec href
Heberger ses images sur S3 ou via une URL de son propre domaine
Choisir sa plateforme d'envoi : SendGrid, AWS SES, ou son propre serveur
Configurer SPF, DKIM et DMARC pour ne pas tomber dans les spams
Respecter les regles anti-spam et ajouter le lien de desinscription

1. Pourquoi coder son email en HTML ?

Un email texte simple, c'est du noir et blanc. Un email HTML, c'est une page web dans une boite mail. C'est la difference entre un flyer imprime a la maison et une publicite Nike dans un magazine.

Email texte simple Bonjour, voici nos nouveaux produits...

Pas de mise en page
Pas d'image
Pas de couleur
Aspect amateur

Email HTML professionnel Logo de la marque en haut
Images des produits
Boutons cliquables vers ton site
Couleurs et typographie
Comme Nike, Adidas, Zara

2. Les 2 regles absolues

Regle 1 — Tableaux, pas divs

Gmail et Outlook n'interpretent pas le CSS moderne. Tu dois utiliser des <table>, <tr> (lignes) et <td> (cellules) pour la mise en page. C'est la methode qui fonctionne dans tous les clients mail depuis 1999.

Regle 2 — CSS directement dans style=""

Les clients mail suppriment les balises <style>. Le seul CSS qui survit : celui ecrit directement sur chaque element avec style="...".

Casse dans Gmail .header { background: #000; }
Balise <style> supprimee
Email completement casse

Fonctionne partout style="background-color:#000000;"
Directement sur l'element
Impossible a supprimer

3. Ajouter un logo et des images

Dans un email HTML, les images s'inserent avec la balise <img>. Contrairement a un site web, elles doivent pointer vers une URL publique sur Internet — tu ne peux pas utiliser un fichier local de ton ordinateur.

La balise img — comment ca marche

<img
  src="https://ton-site.com/images/logo.png"
  alt="Logo MAXMODE"
  width="180"
  height="60"
  style="display:block;border:0;"
>

Attribut	Ce que ca fait	Exemple
`src`	URL de l'image — obligatoire	`https://monsite.com/logo.png`
`alt`	Texte si l'image ne charge pas — obligatoire	`Logo de la marque`
`width`	Largeur en pixels — toujours specifier	`180`
`height`	Hauteur en pixels — toujours specifier	`60`
`style="display:block;border:0;"`	Supprime l'espace sous l'image et le liseré bleu Outlook	Toujours ajouter

L'image doit etre en ligne sur Internet.
Dans un email, src="C:\Users\moi\logo.png" ne fonctionne pas. L'image doit avoir une URL publique comme https://monsite.com/images/logo.png. Seul ton destinataire voit l'email — ton ordinateur local ne lui est pas accessible.

Dimensions recommandees

Type d'image	Largeur max	Poids max	Format
Logo	200px	30 Ko	PNG (fond transparent)
Image produit	280px	100 Ko	JPG ou PNG
Banniere hero	600px	200 Ko	JPG
Total email	600px	500 Ko	—

Logo dans le header — le code complet.
Remplace le texte du nom de marque par une image pour un resultat encore plus professionnel :

<!-- Header avec logo image au lieu du texte -->
<tr>
  <td style="background-color:#000000;padding:20px 40px;text-align:center;">
    <img
      src="https://ton-site.com/images/logo-blanc.png"
      alt="MAXMODE"
      width="160"
      height="50"
      style="display:block;border:0;margin:0 auto;"
    >
  </td>
</tr>

4. Ou heberger ses images

Puisque les images doivent etre en ligne, il faut les stocker quelque part. Tu as 3 options.

Option 1 — Ton propre serveur (le plus simple)

Si tu as deja un site sur ton VPS avec Plesk, tu peux simplement deposer tes images dans le dossier public du site et les appeler par leur URL.

Chemin sur le serveur : /var/www/vhosts/monsite.com/httpdocs/images/logo.png
URL publique          : https://monsite.com/images/logo.png

C'est la solution la plus directe si tu as deja un domaine et un VPS.
Upload via le gestionnaire de fichiers Plesk → dossier httpdocs/images/ → copie l'URL.

Option 2 — Amazon S3 (recommande pour le volume)

S3 est un service de stockage d'Amazon. Tu uploades tes images une fois, Amazon les sert depuis ses serveurs ultra-rapides. Les images chargent vite partout dans le monde et tu ne charges pas ton propre VPS.

Comment fonctionne S3 Tu uploades : logo.png → Bucket S3 "mes-images-email" produit1.jpg → Bucket S3 "mes-images-email" URL generee : https://mes-images-email.s3.eu-west-1.amazonaws.com/logo.png https://mes-images-email.s3.eu-west-1.amazonaws.com/produit1.jpg Dans l'email : <img src="https://mes-images-email.s3.eu-west-1.amazonaws.com/logo.png">

Critere	Ton serveur	Amazon S3
Facilite	Tres simple via Plesk	Interface AWS, un peu plus technique
Vitesse	Depend de ton VPS	Tres rapide, reseau mondial Amazon
Prix	Inclus dans ton hebergement	Quasi gratuit (moins de 1€/mois pour des emails)
Quand l'utiliser	Demarrage, petits volumes	Gros volumes, images critiques

5. Les liens href — tout comprendre

Chaque bouton et chaque lien dans un email est une balise <a> avec un attribut href. C'est par la que les clics de tes clients arrivent sur ton site.

Structure d'un lien

<a href="https://monsite.com/collection"
   style="display:inline-block;background-color:#000000;color:#ffffff;
          text-decoration:none;padding:14px 40px;font-size:12px;
          font-weight:700;text-transform:uppercase;">
  Voir la collection
</a>

Anatomie du lien href="https://monsite.com/collection" ↑ ↑ HTTPS Page exacte (ici : /collection) obligatoire Peut etre /produits, /promo, /accueil... Le texte entre <a> et </a> c'est ce que le client voit et clique.

Toujours utiliser https:// — jamais http://.
Un lien en http:// dans un email est detecte comme suspect par les filtres anti-spam. Si ton site n'a pas de certificat SSL, configure-le d'abord dans Plesk.

Ajouter le tracking UTM — savoir d'ou viennent tes clics

Les parametres UTM s'ajoutent a la fin de ton URL. Ils permettent a Google Analytics (ou n'importe quel outil d'analyse) de savoir que le visiteur vient de ton email marketing.

<!-- URL sans tracking -->
href="https://monsite.com/collection"

<!-- Meme URL avec tracking UTM -->
href="https://monsite.com/collection?utm_source=email&utm_medium=newsletter&utm_campaign=printemps2024"

Parametre	Ce qu'il indique	Exemple
`utm_source`	D'ou vient le trafic	`email`
`utm_medium`	Le canal	`newsletter`
`utm_campaign`	Le nom de la campagne	`printemps2024`

La redirection — pourquoi et comment

Au lieu de pointer directement vers ton site, tu peux faire passer les liens par une page de redirection sur ton propre domaine. Ca te permet de tracker les clics meme sans Google Analytics.

<!-- Lien direct -->
href="https://monsite.com/collection"

<!-- Lien via une redirection de suivi -->
href="https://monsite.com/r?url=https://monsite.com/collection&campagne=mai2024"

La page /r sur ton serveur recoit le clic, enregistre-le en base de donnees, puis redirige vers la vraie URL. SendGrid et AWS SES le font automatiquement si tu actives le click tracking.

6. L'email complet avec logo et images

Remplace les URLs.
Chaque https://LIEN_ICI doit etre remplace par une vraie URL de ton site. Chaque src="https://..." doit pointer vers une vraie image hebergee en ligne.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nouvelle collection — MAXMODE</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4;
             font-family:Arial,Helvetica,sans-serif;">

  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" style="padding:20px 0;">

        <table width="600" cellpadding="0" cellspacing="0" border="0"
               style="max-width:600px;background-color:#ffffff;">

          <!-- HEADER avec logo image -->
          <tr>
            <td style="background-color:#000000;padding:20px 40px;
                       text-align:center;">
              <img
                src="https://ton-site.com/images/logo-blanc.png"
                alt="MAXMODE"
                width="160"
                height="50"
                style="display:block;border:0;margin:0 auto;"
              >
            </td>
          </tr>

          <!-- HERO avec image de fond -->
          <tr>
            <td style="padding:0;">
              <!-- Image banniere hero 600x300px -->
              <img
                src="https://ton-site.com/images/banniere-printemps.jpg"
                alt="Nouvelle collection printemps"
                width="600"
                style="display:block;border:0;width:100%;max-width:600px;"
              >
            </td>
          </tr>

          <!-- TEXTE HERO + BOUTON -->
          <tr>
            <td style="background-color:#111111;padding:40px;
                       text-align:center;">
              <p style="margin:0 0 16px;font-size:32px;font-weight:900;
                        color:#ffffff;text-transform:uppercase;">
                COLLECTION<br>PRINTEMPS
              </p>
              <p style="margin:0 0 28px;font-size:14px;
                        color:#cccccc;line-height:1.7;">
                Les pieces de la saison sont arrivees.
              </p>
              <a href="https://LIEN_ICI"
                 style="display:inline-block;background-color:#ffffff;
                        color:#000000;text-decoration:none;
                        padding:14px 40px;font-size:12px;font-weight:700;
                        letter-spacing:2px;text-transform:uppercase;">
                Voir la collection
              </a>
            </td>
          </tr>

          <!-- PRODUITS avec images reelles -->
          <tr>
            <td style="padding:40px 40px 20px;">
              <p style="margin:0 0 20px;font-size:11px;font-weight:700;
                        color:#999999;letter-spacing:2px;
                        text-transform:uppercase;
                        border-bottom:1px solid #e5e5e5;padding-bottom:10px;">
                Selections du moment
              </p>
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <!-- Produit 1 -->
                  <td width="48%" valign="top">
                    <a href="https://LIEN_ICI">
                      <img
                        src="https://ton-site.com/images/veste.jpg"
                        alt="Veste Technique"
                        width="260"
                        style="display:block;border:0;width:100%;"
                      >
                    </a>
                    <p style="margin:10px 0 4px;font-size:12px;
                              font-weight:700;color:#000000;">
                      Veste Technique
                    </p>
                    <p style="margin:0 0 10px;font-size:14px;
                              font-weight:700;color:#000000;">
                      89,90 &euro;
                    </p>
                    <a href="https://LIEN_ICI"
                       style="display:inline-block;
                              background-color:#000000;color:#ffffff;
                              text-decoration:none;padding:8px 18px;
                              font-size:10px;font-weight:700;
                              text-transform:uppercase;">
                      Acheter
                    </a>
                  </td>
                  <td width="4%"></td>
                  <!-- Produit 2 -->
                  <td width="48%" valign="top">
                    <a href="https://LIEN_ICI">
                      <img
                        src="https://ton-site.com/images/pantalon.jpg"
                        alt="Pantalon Cargo"
                        width="260"
                        style="display:block;border:0;width:100%;"
                      >
                    </a>
                    <p style="margin:10px 0 4px;font-size:12px;
                              font-weight:700;color:#000000;">
                      Pantalon Cargo
                    </p>
                    <p style="margin:0 0 10px;font-size:14px;
                              font-weight:700;color:#000000;">
                      69,90 &euro;
                    </p>
                    <a href="https://LIEN_ICI"
                       style="display:inline-block;
                              background-color:#000000;color:#ffffff;
                              text-decoration:none;padding:8px 18px;
                              font-size:10px;font-weight:700;
                              text-transform:uppercase;">
                      Acheter
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- OFFRE -->
          <tr>
            <td style="background-color:#f8f8f8;padding:30px 40px;
                       text-align:center;border-top:1px solid #e5e5e5;">
              <p style="margin:0 0 6px;font-size:22px;font-weight:900;
                        color:#000000;">
                -20% sur tout le site
              </p>
              <p style="margin:0 0 20px;font-size:12px;color:#666666;">
                Code : SUMMER20 — valable jusqu'au 30 juin
              </p>
              <a href="https://LIEN_ICI"
                 style="display:inline-block;background-color:#000000;
                        color:#ffffff;text-decoration:none;
                        padding:12px 32px;font-size:11px;font-weight:700;
                        text-transform:uppercase;">
                Profiter de l'offre
              </a>
            </td>
          </tr>

          <!-- FOOTER -->
          <tr>
            <td style="background-color:#000000;padding:24px 40px;
                       text-align:center;">
              <p style="margin:0 0 8px;font-size:10px;
                        color:#999999;line-height:1.6;">
                Tu recois cet email car tu t'es inscrit sur maxmode.com
              </p>
              <p style="margin:0;font-size:10px;">
                <a href="https://LIEN_DESINSCRIPTION"
                   style="color:#666666;text-decoration:underline;">
                  Se desinscrire
                </a>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="https://LIEN_ICI"
                   style="color:#666666;text-decoration:none;">
                  Voir dans le navigateur
                </a>
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>

</body>
</html>

7. Choisir sa plateforme d'envoi

Tu as code ton email. Maintenant il faut l'envoyer. Tu ne peux pas l'envoyer depuis Gmail ou ta boite perso — les filtres spam bloquent tout de suite. Il te faut une plateforme dediee.

Ce qui se passe quand tu envoies un email marketing Ton code HTML ↓ Plateforme d'envoi (SendGrid / AWS SES / ton SMTP) ↓ Verification SPF + DKIM + DMARC ↓ Serveur mail du destinataire (Gmail, Outlook...) ↓ Boite de reception (si tout est ok) ou Spams (si probleme)

SendGrid — le plus simple pour debuter

SendGrid est une plateforme specialisee dans l'envoi d'emails. Tu passes par leur API ou leur interface web. Ils gerent la delivrabilite pour toi.

Ce que SendGrid offre	Detail
Gratuit jusqu'a	100 emails/jour en permanence
Dashboard	Tu vois qui a ouvert, qui a clique, qui s'est desabonne
Templates	Editeur drag-and-drop pour creer tes emails sans code
Desinscription auto	Gere automatiquement le lien de desinscription
API ou SMTP	Integration simple dans n'importe quel projet
Adresse	sendgrid.com

SendGrid est la meilleure option pour commencer.
Tu creer un compte, tu valides ton domaine d'envoi, tu colles ton HTML dans leur editeur et tu envoies. La delivrabilite est bonne car leurs IPs ont une excellente reputation.

AWS SES — le moins cher a grande echelle

SES (Simple Email Service) est le service d'envoi d'emails d'Amazon Web Services. Il est beaucoup moins cher que SendGrid mais demande plus de configuration technique.

Critere	Detail
Prix	0,10$ pour 1 000 emails (10 fois moins cher que SendGrid)
Dashboard	Minimal — pas de statistiques avancees par defaut
Difficulte	Plus technique — necessite une configuration AWS
Sandbox	Au debut tu ne peux envoyer qu'a des adresses verifiees
Quand l'utiliser	Quand tu envoies plus de 10 000 emails/mois

Ton propre serveur SMTP — le DIY

Tu peux installer un serveur mail (Postfix) sur ton VPS et envoyer directement depuis la. C'est gratuit mais c'est le plus difficile a maintenir. Ta reputation d'IP commence a zero, ce qui signifie que tes premiers emails tombent souvent en spam.

Avantages DIY Zero cout par email
Controle total
Pas de dependance tiers

Inconvenients DIY Configuration complexe
Reputation IP a construire
Maintenance permanente
Risque de blacklist

Recommandation.
Pour debuter : SendGrid (gratuit, simple). Pour du volume (plus de 10k emails/mois) : AWS SES. Le DIY n'est recommande qu'avec une experience technique avancee en administration systeme.

8. SPF, DKIM et DMARC — pourquoi c'est indispensable

Ces trois configurations DNS sont ce qui fait la difference entre un email qui arrive en boite de reception et un email qui finit dans les spams. Elles prouvent que c'est bien toi qui envoies depuis ton domaine.

Sans SPF/DKIM/DMARC N'importe qui peut envoyer un email en se faisant passer pour toi. email "De : contact@monsite.com" → envoye depuis n'importe quel serveur → Gmail detecte la supercherie → Spam direct Avec SPF + DKIM + DMARC Seuls les serveurs autorises peuvent envoyer pour ton domaine. email "De : contact@monsite.com" → envoye depuis SendGrid (autorise) → DKIM signature verifiee → Boite de reception

SPF — qui peut envoyer pour ton domaine

SPF (Sender Policy Framework) est un enregistrement DNS qui liste les serveurs autorises a envoyer des emails pour ton domaine. Tu l'ajoutes dans les DNS de ton domaine sur Njalla.

Type	Nom	Valeur a ajouter
TXT	@	`v=spf1 include:sendgrid.net ~all` (si tu utilises SendGrid)
TXT	@	`v=spf1 include:amazonses.com ~all` (si tu utilises AWS SES)

Le ~all a la fin.
~all signifie "les autres serveurs sont suspects". -all signifie "les autres serveurs sont rejetes". Commence par ~all, plus permissif, puis passe a -all quand tu es sur que ta config est correcte.

DKIM — la signature de tes emails

DKIM (DomainKeys Identified Mail) ajoute une signature cryptographique a chaque email. Le serveur du destinataire verifie cette signature pour confirmer que l'email n'a pas ete modifie en chemin.

Quand tu configures ton domaine sur SendGrid ou AWS SES, ils te donnent des enregistrements DNS a ajouter. Ce sont des CNAME qui pointent vers leurs serveurs de cles.

Type	Nom	Valeur (exemple SendGrid)
CNAME	`s1._domainkey`	`s1.domainkey.u1234567.wl.sendgrid.net`
CNAME	`s2._domainkey`	`s2.domainkey.u1234567.wl.sendgrid.net`

SendGrid et AWS SES generent ces enregistrements automatiquement.
Dans ton dashboard SendGrid → Sender Authentication → Authenticate Your Domain → il te donne exactement les enregistrements DNS a copier-coller dans Njalla.

DMARC — la politique finale

DMARC (Domain-based Message Authentication) dit aux serveurs de reception quoi faire si SPF ou DKIM echoue. C'est le dernier niveau de protection.

Type	Nom	Valeur
TXT	`_dmarc`	`v=DMARC1; p=none; rua=mailto:dmarc@monsite.com`

Parametre	Valeur	Ce que ca fait
`p=none`	Surveillance uniquement	Rien n'est bloque, tu recois les rapports
`p=quarantine`	Quarantaine	Les emails suspects vont dans les spams
`p=reject`	Rejet total	Les emails suspects sont bloques
`rua=`	Email de rapport	Tu recois les rapports d'echec

Commence par p=none.
Avec p=none, DMARC surveille sans bloquer. Ca te permet de voir les rapports et de verifier que SPF et DKIM fonctionnent avant de passer en mode strict.

Resume — les 3 enregistrements DNS a ajouter sur Njalla

Type	Nom	Valeur	Role
TXT	@	`v=spf1 include:sendgrid.net ~all`	SPF — autorise SendGrid
CNAME	`s1._domainkey`	Donne par SendGrid	DKIM — signature emails
CNAME	`s2._domainkey`	Donne par SendGrid	DKIM — signature emails
TXT	`_dmarc`	`v=DMARC1; p=none; rua=mailto:dmarc@monsite.com`	DMARC — politique

9. Les regles anti-spam

A faire	A eviter
Expediteur sur ton domaine : `contact@monsite.com`	Expediteur Gmail ou Hotmail
Objet sobre : Nouvelle collection printemps	Objet en MAJUSCULES avec !!! : PROMO URGENT GRATUIT !!!
Mots neutres : Collection, Nouveautes, Offre	Mots spam : Gratuit, Argent, Gagner, Urgent, 100%
Au moins 60% de texte dans l'email	Email compose uniquement d'images
Envoyer uniquement aux personnes inscrites	Acheter ou louer des listes d'emails
Lien de desinscription visible en bas	Aucun lien de desinscription
SPF + DKIM + DMARC configures	Domaine sans authentification email
HTML valide — toutes les balises fermees	Code HTML casse ou mal forme

10. Le lien de desinscription — obligatoire

Obligation legale (RGPD — France et Europe).
Tout email marketing sans lien de desinscription est une infraction. Il augmente aussi ton score spam et peut entrainer le blocage permanent de ton domaine par Gmail et Outlook.

<!-- Dans le footer — obligatoire dans chaque email -->
<a href="https://TON-SITE.COM/desinscription"
   style="color:#666666;text-decoration:underline;font-size:10px;">
  Se desinscrire
</a>

Avec SendGrid, c'est automatique.
SendGrid insere le lien de desinscription et gere la liste automatiquement. Les personnes qui se desabonnent ne recevront plus tes emails. Sur ton propre serveur, tu dois creer une page /desinscription qui retire l'adresse de ta base de donnees.

11. Tester avant d'envoyer

Outil	Adresse	Ce que ca fait
Firefox (local)	Glisser le fichier .html dans Firefox	Voir le rendu visuel immediatement, sans envoyer
Mail Tester	mail-tester.com	Score anti-spam sur 10 — verifie SPF, DKIM, contenu
Postmark Spam	spamcheck.postmarkapp.com	Colle ton HTML, analyse les regles spam
MXToolbox	mxtoolbox.com	Verifie SPF, DKIM, DMARC et si ton domaine est blackliste

Exercice pratique

Coder ton email dans VSCode

Personnalise le template dans un editeur de code et vois ton email en direct.

Lancer l'exercice

Questionnaire

Tester tes connaissances

12 questions sur les emails HTML, SPF, DKIM, DMARC et les regles anti-spam.

Faire le quiz

Liens utiles

SendGrid	sendgrid.com
AWS SES	aws.amazon.com/ses
Mail Tester	mail-tester.com
MXToolbox	mxtoolbox.com
Postmark Spam	spamcheck.postmarkapp.com