Modèles d'e-mails HTML responsive : newsletter et 9 e-mails transactionnels, clair et sombre (HTML, MJML, texte brut, FR et EN)

Ces modèles s’adressent aux indépendants, aux petites boutiques en ligne et aux développeurs qui branchent les envois automatiques d’un site ou d’une application : la confirmation d’une adresse, le code de connexion, le reçu de commande, la relance après un paiement refusé. Ils évitent de repartir de zéro dans un format où le code web habituel ne suffit pas : mise en page en tableaux, CSS en ligne, repli quand la messagerie retire les styles. Chaque modèle existe en français et en anglais, en source MJML, en HTML prêt à envoyer et en texte brut, avec un thème clair et un thème sombre dans le même fichier.

• 10 modèles, une newsletter et 9 e-mails transactionnels :
  • Newsletter (newsletter) ;
  • Bienvenue (welcome) ;
  • Confirmation d’e-mail (verify-email) ;
  • Mot de passe oublié (password-reset) ;
  • Code de connexion (login-code) ;
  • Reçu de commande (order-receipt) ;
  • Téléchargement prêt (download-ready) ;
  • Panier abandonné (abandoned-cart) ;
  • Paiement refusé (payment-failed) ;
  • Notification (notification).
• 2 langues, français et anglais, pour chaque modèle.
• 2 thèmes, clair et sombre, réunis dans chaque fichier HTML.
• 20 sources MJML et 6 fragments partagés : réglages communs, en-tête, pieds de page transactionnel et marketing en français et en anglais.
• 20 fichiers HTML compilés, CSS de base en ligne.
• 20 versions en texte brut, à joindre à chaque envoi.
• 20 aperçus HTML remplis avec des données d’exemple, et une page qui les rassemble.
• 40 captures PNG des modèles, à 320 et 600 px de large, en clair et en sombre.
• 6 images de remplacement : une image d’en-tête, des vignettes d’article et de produit.
• variables.md, la liste de toutes les variables, modèle par modèle, avec un exemple en français et en anglais, et compatibilite.md, ce qui a été mesuré et ce qui ne l’a pas été.

Organisation de l’archive :

mjml/fr/<modèle>.mjml
mjml/en/<modèle>.mjml
mjml/partials/<fragment>.mjml
html/fr/<modèle>.html
html/en/<modèle>.html
text/fr/<modèle>.txt
text/en/<modèle>.txt
preview/index.html
preview/fr/<modèle>.html
preview/en/<modèle>.html
captures/<modèle>-<320|600>-<light|dark>.png
images/<image>.png
variables.md
compatibilite.md

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Comment s’en servir

• Depuis le MJML, pour modifier la mise en page : chaque source inclut les fragments de mjml/partials/, si bien qu’une modification de l’en-tête ou du pied s’applique à tous les modèles. Compilez ensuite avec MJML, à installer à part (le kit a été compilé avec la version 5.4.1).
• Depuis le HTML compilé, sans MJML : les fichiers de html/ s’envoient tels quels une fois les variables remplacées. Collez-les dans votre outil d’envoi ou branchez-les dans votre code.
• Variables : le texte variable s’écrit {{nom_de_variable}}, un format lu tel quel par les moteurs de gabarits à doubles accolades. variables.md décrit chacune d’elles. Les lignes d’articles du reçu et du panier sont données en deux exemplaires : dupliquez la ligne ou utilisez la boucle de votre moteur. Le bouton de la notification est facultatif, et variables.md indique quoi retirer dans chaque format.
• Texte brut : envoyez le fichier de text/ comme partie texte du même message. Il reprend les titres, les liens des boutons et les mêmes variables que le HTML.
• Images : celles du dossier images/ sont des images de remplacement. Hébergez les vôtres et remplacez les chemins relatifs par des adresses absolues.
• Thème sombre : rien à activer. Le HTML passe en sombre quand la messagerie lit la préférence prefers-color-scheme et que le lecteur a choisi le mode sombre.
• Aperçus : ouvrez preview/index.html dans un navigateur pour voir les 10 modèles remplis.

Ce qui a été vérifié, et comment

Les mesures sont détaillées dans compatibilite.md. Elles ont été faites dans deux moteurs de navigateur, Chromium et WebKit, pas dans des messageries.

• Responsive : rendus à 320, 600 et 1 024 px, en clair et en sombre, sans débordement ; les montants du reçu et du panier tiennent sur une ligne à 320 px.
• Repli sans style : une fois tous les blocs <style> retirés, comme le font certaines messageries, les 20 fichiers HTML restent lisibles, sans débordement à 600 ni à 320 px.
• Contraste : chaque texte, en clair, en sombre et en repli, atteint au moins 5,69:1, pour un seuil de 4,5:1.
• Espacements : marges, retraits, tailles de texte et interlignes suivent une grille de 4 px.
• Poids : le fichier le plus lourd, la newsletter en français, pèse 29,4 Ko, sous le seuil de 102 Ko au-delà duquel certaines messageries coupent le message.
• Validité : HTML validé ; sources MJML en validation stricte, recompilées et comparées au HTML livré.
• Accessibilité : audit axe sur les 20 aperçus, en clair et en sombre, sans violation sérieuse ni critique. Les tableaux de mise en page portent role="presentation" ; les tableaux du reçu et du panier ont des en-têtes de colonne et une légende.

Outlook pour Windows, mode sombre et autres messageries

Le rendu réel dans chaque messagerie n’a pas été capturé : aucun service de captures multi-clients n’a servi. La compatibilité repose sur des règles de construction et sur la base publique caniemail, dont compatibilite.md reprend 59 entrées pour 16 messageries, avec le repli prévu pour chaque propriété mal prise en charge.

• Outlook pour Windows : son moteur de rendu n’a pas été testé. Les modèles lui fournissent des tableaux de largeur fixe dans des commentaires conditionnels écrits par MJML, et doublent fonds et largeurs par des attributs HTML.
• Messageries qui affichent le thème sombre, d’après la base et non d’après des captures : Apple Mail (macOS, iOS), Outlook (macOS, Outlook.com, iOS, Android) et Samsung Email (Android). Les versions d’Outlook de cette liste peuvent aussi ajuster les couleurs elles-mêmes.
• Messageries qui ne l’affichent pas : Gmail (web, iOS, Android), Outlook (Windows, Windows Mail), Yahoo! Mail (web, iOS, Android) et Thunderbird (macOS). Elles affichent la version claire, ou appliquent leur propre inversion des couleurs, qui n’a pas été mesurée.
• Sans media queries : les trois colonnes de la newsletter restent empilées et l’e-mail s’affiche en clair, lisible à toute largeur.

Envois marketing

La newsletter et la relance de panier abandonné sont des envois marketing. Ils supposent en général le consentement préalable du destinataire, ou une relation client existante selon les cas, et un moyen de se désabonner à chaque envoi. Le pied de ces deux modèles fournit un lien de désabonnement ({{unsubscribe_url}}) et l’identité de l’expéditeur, mais il ne remplace ni la gestion des désabonnements par votre outil d’envoi, ni l’en-tête de désabonnement en un clic que demandent les grandes messageries pour les envois en volume. Adaptez la phrase qui explique pourquoi le destinataire reçoit l’e-mail. Ces modèles ne garantissent pas à eux seuls la conformité de vos envois.

À savoir

• Testez vos envois avec votre outil d’envoi avant une campagne : aucune capture n’a été faite dans une messagerie.
• La délivrabilité (filtres de courrier indésirable, authentification de l’expéditeur) dépend de votre outil d’envoi et de votre domaine, pas des modèles.
• Ouverts sans remplacement des variables, les gabarits bruts coupent les noms de variables longs à 320 px. Une fois remplis, ils s’affichent sans débordement.
• La ligne de TVA du reçu est un exemple : retirez-la ou remplacez-la par la mention adaptée à votre situation.
• Ni MJML ni outil d’envoi ne sont inclus, et le kit ne contient pas de fichier de maquette pour un logiciel de design.

Fabrication et IA

Les textes en français et en anglais, les sources MJML, le HTML compilé et les scripts de génération et de contrôle ont été produits avec un assistant d’IA (Claude Code), puis relus et contrôlés : empreinte de chaque fichier, recompilation des sources comparée au HTML livré, rendus dans deux moteurs à plusieurs largeurs, contrastes, audit d’accessibilité, planches relues à l’œil. Aucune image n’a été produite par un générateur d’images : les images de remplacement et les captures sortent des scripts du kit.

• MJML : 20 sources et 6 fragments, à compiler avec MJML.
• HTML : 20 fichiers, une colonne de 600 px au plus, fluide en dessous, CSS de base en ligne, polices système, à coller dans un outil d’envoi ou à brancher dans votre code.
• Texte brut : 20 fichiers .txt en UTF-8, lignes de 78 caractères au plus hors adresses web.
• PNG : 40 captures et 6 images de remplacement.
• Variables au format {{…}}, pour les moteurs de gabarits à doubles accolades.

Les modèles sont vendus avec la licence commerciale : vous pouvez les modifier et les utiliser pour vos envois comme pour ceux de vos clients, dans vos projets personnels et professionnels, mais pas les revendre, les redistribuer ni les publier comme modèles réutilisables (galerie de modèles, dépôt public), même gratuitement.

• Modèles d’e-mails HTML pour logiciel en abonnement : l’essai, l’invitation d’équipe, le renouvellement, la facture d’abonnement et la résiliation, construits de la même façon que ce pack et sans modèle en commun avec lui.

1.0.0 (11 novembre 2026) : première version.