Ressources pour développeur web

Théme de la semaine : La newsletter

Coder un template newsletter HTML pour Mailchimp

Temps de lecture estimé : 8 minutes
Accueil → HTML5 → Coder un template newsletter HTML pour Mailchimp

Vous utilisez Mailchimp pour envoyer vos newsletters… mais vous trouvez les modèles proposés un peu limités ? Ou peut-être avez-vous envie d’un design unique, parfaitement adapté à votre site web ou à votre boutique en ligne ? Bonne nouvelle : Mailchimp permet d’utiliser votre propre template newsletter HTML.

  • Comprendre les règles essentielles du HTML pour les emails afin de créer un template newsletter HTML compatible avec la majorité des clients mail.
  • Concevoir un modèle de newsletter personnalisé et réutilisable pour renforcer l’identité visuelle de votre blog ou de votre boutique en ligne.
  • Apprendre à structurer efficacement une newsletter pour mettre en valeur vos contenus ou vos produits et améliorer l’impact de vos campagnes email.

Et contrairement à ce que beaucoup imaginent, coder un template d’email n’est pas réservé aux experts. Les emails ont quelques contraintes techniques particulières, mais avec une méthode claire, vous pouvez créer un template newsletter HTML propre, compatible et réutilisable.

Dans ce tutoriel complet, nous allons voir comment coder un template HTML pour Mailchimp, étape par étape. Vous apprendrez les règles essentielles du HTML pour les emails, les pièges à éviter, et vous découvrirez deux exemples concrets de mise en page : une newsletter pour un blog et une pour une boutique en ligne.

À la fin de cet article, vous saurez créer votre propre template newsletter HTML prêt à être utilisé dans Mailchimp.

Pourquoi coder son propre template newsletter HTML ?

Mailchimp propose déjà de nombreux modèles. Alors pourquoi coder le vôtre ?

Tout simplement parce qu’un template newsletter HTML personnalisé offre plusieurs avantages.

D’abord, vous contrôlez totalement le design. Vous pouvez reprendre les couleurs de votre site, votre typographie, votre logo, et garder une cohérence visuelle avec votre marque.

Ensuite, cela permet d’ajouter des blocs spécifiques : par exemple un encart promotionnel, une section produit, ou un résumé d’articles.

Enfin, un template HTML personnalisé devient un modèle réutilisable. Vous le créez une fois… puis vous l’utilisez pour toutes vos campagnes.

template newsletter en HTML pour Mailchimp

Pour un blog ou pour une boutique en ligne, cela fait gagner énormément de temps.

Comprendre les particularités du HTML pour les emails

Avant de coder votre template newsletter HTML, il faut comprendre une chose importante : le HTML des emails n’est pas le même que celui des sites web.

Les clients mail (Gmail, Outlook, Apple Mail…) ne supportent pas toutes les technologies modernes. Certaines règles sont donc incontournables.

Les tableaux sont vos meilleurs amis

Sur un site web moderne, on utilise généralement Flexbox ou Grid.

  • Dans les emails, ce n’est pas recommandé.

La solution la plus fiable reste l’utilisation des tableaux HTML (table) pour structurer la mise en page. Oui, cela peut sembler revenir 20 ans en arrière… mais c’est la méthode la plus compatible.

👉 Pour ceux qui débutent : Liste et tableau en HTML.

Les styles CSS doivent être simples

Évitez :

  • les animations CSS
  • les scripts JavaScript
  • certaines propriétés modernes

Privilégiez plutôt :

  • les styles inline
  • des tailles fixes
  • des couleurs simples

Par exemple :

<td style="font-family: Arial, sans-serif; font-size:16px; color:#333;">
Bienvenue dans notre newsletter !
</td>

Largeur recommandée : 600px

La majorité des newsletters utilisent une largeur de 600 pixels parce que cette largeur s’affiche correctement dans presque tous les clients mail.

Votre template newsletter HTML doit donc généralement suivre cette structure :

table principale
    largeur 600px
        contenu de la newsletter

Structure de base d’un template newsletter HTML

Voici une structure simple que vous pouvez utiliser comme base.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Newsletter</title>
</head>

<body style="margin:0; padding:0; background-color:#f4f4f4;">

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">

<table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;">

<tr>
<td style="padding:20px; text-align:center;">
<img src="logo.png" alt="Logo" width="200">
</td>
</tr>

<tr>
<td style="padding:20px; font-family:Arial;">
<h1>Bienvenue dans notre newsletter</h1>
<p>Voici les dernières actualités.</p>
</td>
</tr>

</table>

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

</body>
</html>

Cette structure correspond à la base d’un template newsletter HTML compatible Mailchimp.

Elle contient :

  • un fond gris
  • une zone centrale de 600px
  • un logo
  • un contenu

À partir de cette base, vous pouvez construire n’importe quelle newsletter.

Ajouter des zones éditables pour Mailchimp

Mailchimp permet d’insérer des zones éditables dans votre template HTML.

Ces zones utilisent des attributs spéciaux.

Par exemple :

<td mc:edit="content_1">
Votre texte ici
</td>

Dans Mailchimp, cette zone pourra être modifiée directement dans l’éditeur.

Il est également possible d’ajouter :

mc:repeatable
mc:variant
mc:hideable

Cela permet de créer des blocs dynamiques.

Exemple 1 : template newsletter HTML pour un blog

Imaginons une newsletter pour un blog comme celui du Créa-blog.

L’objectif :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
  • présenter les derniers articles
  • ajouter un bouton de lecture
  • garder un design simple

Voici un exemple.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Newsletter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body style="margin:0;padding:0;background-color:#f4f6f8;font-family:Arial,Helvetica,sans-serif;">

<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f6f8;padding:40px 0;">
<tr>
<td align="center">

<table width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;border-radius:8px;overflow:hidden;">

<!-- HEADER -->
<tr>
<td style="padding:30px 40px;text-align:center;border-bottom:1px solid #eeeeee;">
<h1 style="margin:0;font-size:26px;color:#111111;font-weight:600;">
Votre Blog
</h1>
<p style="margin:8px 0 0 0;color:#777777;font-size:14px;">
Les derniers articles publiés
</p>
</td>
</tr>

<!-- HERO -->
<tr>
<td>
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/hero-newsletter.webp" width="600" style="display:block;width:100%;height:auto;">
</td>
</tr>

<!-- INTRO -->
<tr>
<td style="padding:30px 40px 10px 40px;color:#444444;font-size:16px;line-height:1.6;">
<p style="margin:0;">
Voici les derniers contenus publiés sur le blog. Bonne lecture.
</p>
</td>
</tr>

<!-- ARTICLE 1 -->
<tr>
<td style="padding:30px 40px;border-top:1px solid #eeeeee;">
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/monetiser-newsletter.webp" width="520" style="display:block;width:100%;height:auto;border-radius:4px;margin-bottom:15px;">
<h2 style="margin:0 0 10px 0;font-size:22px;color:#111111;">Titre de l'article 1</h2>
<p style="margin:0 0 18px 0;color:#555555;font-size:15px;line-height:1.6;">
Résumé court de l'article pour donner envie de cliquer et découvrir le contenu.
</p>
<a href="#" style="background:#111111;color:#ffffff;text-decoration:none;padding:12px 22px;border-radius:4px;font-size:14px;font-weight:600;display:inline-block;">
Lire l'article
</a>
</td>
</tr>

<!-- ARTICLE 2 -->
<tr>
<td style="padding:30px 40px;border-top:1px solid #eeeeee;">
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/newsletter-spam.webp" width="520" style="display:block;width:100%;height:auto;border-radius:4px;margin-bottom:15px;">
<h2 style="margin:0 0 10px 0;font-size:22px;color:#111111;">Titre de l'article 2</h2>
<p style="margin:0 0 18px 0;color:#555555;font-size:15px;line-height:1.6;">
Résumé court de l'article pour donner envie de cliquer et découvrir le contenu.
</p>
<a href="#" style="background:#111111;color:#ffffff;text-decoration:none;padding:12px 22px;border-radius:4px;font-size:14px;font-weight:600;display:inline-block;">
Lire l'article
</a>
</td>
</tr>

<!-- ARTICLE 3 -->
<tr>
<td style="padding:30px 40px;border-top:1px solid #eeeeee;">
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/double-opt-in-newsletter.webp" width="520" style="display:block;width:100%;height:auto;border-radius:4px;margin-bottom:15px;">
<h2 style="margin:0 0 10px 0;font-size:22px;color:#111111;">Titre de l'article 3</h2>
<p style="margin:0 0 18px 0;color:#555555;font-size:15px;line-height:1.6;">
Résumé court de l'article pour donner envie de cliquer et découvrir le contenu.
</p>
<a href="#" style="background:#111111;color:#ffffff;text-decoration:none;padding:12px 22px;border-radius:4px;font-size:14px;font-weight:600;display:inline-block;">
Lire l'article
</a>
</td>
</tr>

<!-- FOOTER -->
<tr>
<td style="background:#fafafa;padding:30px 40px;text-align:center;color:#888888;font-size:13px;line-height:1.6;border-top:1px solid #eeeeee;">

<p style="margin:0 0 10px 0;">
Vous recevez cet email car vous êtes abonné à la newsletter.
</p>

<p style="margin:0 0 15px 0;">
*|LIST:ADDRESSLINE|*
</p>

<p style="margin:0;">
<a href="*|UNSUB|*" style="color:#888888;text-decoration:underline;">Se désabonner</a>
&nbsp;|&nbsp;
<a href="*|UPDATE_PROFILE|*" style="color:#888888;text-decoration:underline;">Modifier vos préférences</a>
&nbsp;|&nbsp;
<a href="*|ARCHIVE|*" style="color:#888888;text-decoration:underline;">Voir en ligne</a>
</p>

</td>
</tr>

</table>

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

</body>
</html>

Cette newsletter contient :

  • un Hero
  • une image d’article
  • un texte court
  • un bouton

C’est une structure idéale pour mettre en avant un contenu éditorial.

Exemple 2 : template newsletter HTML pour une boutique

Passons maintenant à un second exemple : une newsletter pour une boutique en ligne.

L’objectif ici est différent.

On veut :

  • présenter des produits
  • mettre en avant une promotion
  • inciter à l’achat.

Voici un exemple simple.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Newsletter Boutique</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" style="background-color:#f4f4f4;padding:20px 0;">
<tr>
<td align="center">

<!-- CONTAINER -->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#ffffff;border-radius:6px;overflow:hidden;">

<!-- HEADER -->
<tr>
<td align="center" style="padding:20px;background:#111111;">
<h1 style="color:#ffffff;margin:0;font-size:26px;">Votre Boutique</h1>
</td>
</tr>

<!-- HERO IMAGE -->
<tr>
<td>
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/hero-newsletter-boutique.png" alt="Promotion" width="600" style="display:block;width:100%;">
</td>
</tr>

<!-- PROMOTION -->
<tr>
<td align="center" style="padding:30px 40px;">
<h2 style="margin:0;color:#111;font-size:24px;">Offre spéciale</h2>

<p style="font-size:16px;color:#555;margin:15px 0;">
Profitez de <strong style="color:#e63946;">-30% sur toute la boutique</strong> pendant 48 heures seulement.
</p>

<a href="#" style="background:#e63946;color:#ffffff;text-decoration:none;padding:14px 28px;border-radius:4px;font-weight:bold;display:inline-block;">
J'en profite maintenant
</a>

</td>
</tr>

<!-- PRODUITS -->
<tr>
<td style="padding:20px 30px;">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<!-- PRODUIT 1 -->
<td align="center" width="33%" style="padding:10px;">
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/produit1.webp" width="150" style="display:block;border-radius:4px;margin-bottom:10px;">
<p style="margin:5px 0;font-size:15px;color:#111;">Produit 1</p>
<p style="margin:5px 0;color:#e63946;font-weight:bold;">29€</p>

<a href="#" style="background:#111;color:#fff;text-decoration:none;padding:8px 16px;font-size:13px;border-radius:4px;display:inline-block;">
Voir le produit
</a>

</td>

<!-- PRODUIT 2 -->
<td align="center" width="33%" style="padding:10px;">
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/produit2.webp" width="150" style="display:block;border-radius:4px;margin-bottom:10px;">
<p style="margin:5px 0;font-size:15px;color:#111;">Produit 2</p>
<p style="margin:5px 0;color:#e63946;font-weight:bold;">39€</p>

<a href="#" style="background:#111;color:#fff;text-decoration:none;padding:8px 16px;font-size:13px;border-radius:4px;display:inline-block;">
Voir le produit
</a>

</td>

<!-- PRODUIT 3 -->
<td align="center" width="33%" style="padding:10px;">
<img src="https://blog.crea-troyes.fr/wp-content/uploads/2026/03/produit3.webp" width="150" style="display:block;border-radius:4px;margin-bottom:10px;">
<p style="margin:5px 0;font-size:15px;color:#111;">Produit 3</p>
<p style="margin:5px 0;color:#e63946;font-weight:bold;">49€</p>

<a href="#" style="background:#111;color:#fff;text-decoration:none;padding:8px 16px;font-size:13px;border-radius:4px;display:inline-block;">
Voir le produit
</a>

</td>

</tr>

</table>

</td>
</tr>

<!-- BLOC CONFIANCE -->
<tr>
<td align="center" style="padding:30px;background:#fafafa;border-top:1px solid #eee;">
<p style="margin:0;color:#555;font-size:14px;">
✔ Livraison rapide &nbsp;&nbsp;|&nbsp;&nbsp; ✔ Paiement sécurisé &nbsp;&nbsp;|&nbsp;&nbsp; ✔ Retours gratuits
</p>
</td>
</tr>

<!-- FOOTER -->
<tr>
<td align="center" style="padding:20px;font-size:12px;color:#888;line-height:1.6;">

<p style="margin:5px 0;">Vous recevez cet email car vous êtes inscrit à notre boutique.</p>

<p style="margin:5px 0;">
<a href="#" style="color:#888;text-decoration:underline;">Se désinscrire</a>
</p>

<p style="margin:5px 0;">© 2026 Votre Boutique</p>

</td>
</tr>

</table>

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

</body>
</html>

Ce template newsletter HTML met en avant deux produits côte à côte, ce qui fonctionne très bien pour les emails promotionnels.

Importer votre template dans Mailchimp

Une fois votre template HTML terminé, vous pouvez l’importer dans Mailchimp.

La procédure est simple. Dans Mailchimp :

  1. Allez dans Campagnes > E-mail
  2. Cliquez sur Créer
Créer une newsletter Mailchimp
  1. Cliquez sur Modéle
Modele de newsletter Mailchimp
  1. Cliquez sur  Démarrer
  2. Sélectionnez Codage personnalisé
Coder template newsletter Mailchimp

Vous pouvez alors :

  • importer un fichier HTML
  • ou coller directement votre code.

Mailchimp analysera ensuite votre template newsletter HTML et vous pourrez l’utiliser pour vos campagnes.

Tester votre template newsletter HTML

Un template email doit toujours être testé parce que les emails peuvent s’afficher différemment selon les clients mail.

Par exemple :

  • Gmail
  • Outlook
  • Apple Mail
  • Yahoo Mail

Mailchimp propose un outil appelé Inbox Preview qui permet de vérifier le rendu.

Si vous voulez aller plus loin, des services comme Litmus ou Email on Acid sont également très utilisés.

Les erreurs fréquentes à éviter

Lorsque l’on crée son premier template newsletter HTML, certaines erreurs reviennent souvent.

Par exemple, utiliser des images trop lourdes. Un email doit rester léger. Essayez de garder des images optimisées.

Autre erreur classique : oublier les textes alternatifs (alt).

<img src="produit.jpg" alt="Produit en promotion">

Cela permet aux lecteurs d’écran et aux emails bloquant les images de comprendre le contenu.

Enfin, évitez les polices exotiques.

Les plus sûres restent :

  • Arial
  • Verdana
  • Georgia
  • Helvetica

Optimiser votre template newsletter HTML pour le mobile

Aujourd’hui, une grande partie des emails est lue sur smartphone. Votre template doit être responsive.

Une méthode simple consiste à utiliser une structure fluide :

<table width="100%" style="max-width:600px;">

Ainsi, votre template newsletter HTML s’adaptera mieux aux écrans mobiles.

Créer son propre template newsletter HTML pour Mailchimp peut sembler intimidant au début. Pourtant, une fois que vous avez compris les règles essentielles — utilisation des tableaux, styles simples et largeur adaptée — tout devient beaucoup plus clair.

Au fond, un bon template email repose sur une idée simple : une structure propre, lisible et réutilisable. Que vous souhaitiez partager les derniers articles de votre blog ou promouvoir des produits de votre boutique, un template bien conçu devient rapidement un outil précieux dans votre stratégie de communication.

Et surtout, ne cherchez pas la perfection dès le premier essai. Testez, améliorez, ajustez. C’est exactement comme pour le développement web : chaque version est une occasion d’apprendre et de progresser.

Avec un peu de pratique, vous pourrez même créer une bibliothèque complète de templates newsletter HTML… parfaitement adaptés à votre univers et à vos lecteurs.

👉 Pour aller plus loin :

Articles relatifs

  1. Formulaire web : 8 Exemples de code HTML et CSS responsive
    Découvrez 8 exemples inspirants de formulaires web modernes et 100 % responsive. Apprenez à créer facilement des mises en page élégantes, accessibles et adaptées à tous les écrans, grâce à…
  2. Portfolio HTML et CSS : Tutoriel pour rédiger / coder votre portfolio
    Unportfolio est un site web personnel ou professionnel qui sert à présenter les réalisations, compétences et expériences d’une personne ou d’une entreprise. À mi-chemin entre le CV en ligne et le…
  3. Jour 19 : Design et mise en page du header et du footer
    Aujourd’hui, nous allons mettre un peu de côté le PHP et la logique de notre architecture MVC pour nous concentrer sur la mise en page. Ce jour 19 sera dédié…
  4. Margin, Padding, Gap en CSS : Gérer les espaces d’un élément
    1. Introduction au CSS 2. Sélecteur et spécificité 3. Couleur, unité et typographie 4. Le Model Box 5. Flexbox CSS 6. Grid CSS 7. Responsive et media query 8. Les…