Templates d'e-mail HTML gratuits (en tableaux et compatibles mode sombre)
Templates d'e-mail HTML gratuits
Templates d'e-mail HTML gratuits : 8 modèles en tableaux, mode sombre, à copier | We.Inc
Huit templates d'e-mail HTML gratuits à modifier et prévisualiser sur la page : bienvenue, reçu, réinitialisation du mot de passe, newsletter, vérification d'e-mail, expédition, invitation à un événement et demande d'avis. Mise en page en tableaux, boutons robustes, prise en charge du mode sombre et checklist de test.
Un e-mail HTML fiable utilise des tableaux imbriqués pour la mise en page, des styles en ligne, une largeur de contenu d'environ 600 pixels, des boutons faits de liens avec padding plutôt que d'images, et un texte alternatif sur chaque image. Les huit templates ci-dessous suivent ces règles, prennent en charge le mode sombre là où les clients le permettent, et peuvent être modifiés et prévisualisés en direct avant d'être copiés.
Les huit templates
Template
Envoyé quand
Bienvenue
Quelqu'un s'inscrit
Reçu
Un paiement aboutit
Réinitialisation du mot de passe
Quelqu'un demande une réinitialisation
Newsletter
Actualités régulières
Vérification de l'e-mail
Après l'inscription
Commande expédiée
Une commande part
Invitation à un événement
Pour inviter des clients
Demande d'avis
Après une visite ou une commande
Modifiez le code à gauche de n'importe quel template et l'aperçu à droite se met à jour. Les aperçus sont rendus par votre navigateur, prenez-les donc comme une indication : les clients de messagerie varient, c'est pourquoi la checklist de test en bas de page compte.
Choisissez le template qui correspond à l'e-mail dont vous avez besoin.
Modifiez le texte, les liens et les couleurs dans la zone de code et regardez l'aperçu.
Copiez le HTML dans l'option HTML personnalisé de votre plateforme d'e-mailing.
Envoyez des tests à de vraies boîtes de réception sur téléphone et ordinateur, en mode clair et sombre.
Gardez une seule action principale par e-mail ; un second bouton divise l'attention par deux.
Rédigez le preheader volontairement ; sinon, les clients affichent le premier texte qu'ils trouvent.
Hébergez les images sur votre propre domaine ou sur votre plateforme d'e-mailing, avec des URL https absolues.
Utilisez notre générateur de templates d'e-mail HTML si vous préférez remplir un formulaire.
Questions fréquentes
Pourquoi les e-mails HTML utilisent-ils encore des tableaux ?
Certains clients de messagerie, notamment d'anciens clients de bureau, utilisent des moteurs de rendu qui ignorent la mise en page CSS moderne. Les tableaux sont la seule méthode de mise en page qui fonctionne partout.
Comment faire fonctionner un e-mail en mode sombre ?
Ajoutez les balises meta color-scheme et une media query prefers-color-scheme avec vos couleurs sombres. Les clients qui les prennent en charge les utilisent ; d'autres peuvent inverser les couleurs eux-mêmes, évitez donc le texte intégré aux images et testez les deux modes.
Puis-je utiliser ces templates à des fins commerciales ?
Oui. Nous les avons écrits pour cette page ; copiez-les, modifiez-les et envoyez-les dans n'importe quel projet.
Un bouton construit à partir d'un lien avec padding dans une cellule de tableau colorée, au lieu d'une image. Il reste visible et fonctionnel quand les images sont bloquées.
Le texte brut compte aussi
Envoyez une version en texte brut avec le HTML. La plupart des plateformes d'e-mailing en génèrent une ; relisez-la une fois, car un reçu ou un lien de réinitialisation doit rester compréhensible sans mise en forme.
Huit templates, en direct
E-mail de bienvenue
Remercie la personne, explique la suite et propose une action claire.
Reçu
Un tableau imbriqué garde les noms d'articles et les prix alignés dans tous les clients, y compris les anciens clients de bureau.
Réinitialisation du mot de passe
Court, avec la durée de validité et la marche à suivre si la personne n'a rien demandé. Incluez aussi le lien en texte, pour les clients qui bloquent les boutons.
Newsletter
Une actualité par bloc avec un titre, une phrase et un lien. L'URL de l'image est ici un exemple fictif, l'aperçu montre donc ce que voient les lecteurs quand les images sont bloquées : le texte alternatif dans un cadre de la bonne taille.
Vérification de l'adresse e-mail
Utilisé après l'inscription. Un code en plus d'un bouton aide les personnes qui ouvrent l'e-mail sur un autre appareil.
Commande expédiée
Place le lien de suivi en premier ; c'est pour lui que le lecteur a ouvert l'e-mail.
Invitation à un événement
Date, heure et lieu dans un bloc facile à parcourir, puis l'action unique.
Demande d'avis
Une seule question avec des réponses en un clic obtient bien plus de retours qu'un lien vers un long questionnaire.
Pourquoi le code ressemble à ça
Les règles qui font qu'un e-mail HTML s'affiche partout
Règle
Pourquoi
Mettre en page avec des tableaux (role="presentation")
Certains clients de bureau ignorent encore flexbox, grid et beaucoup de règles de positionnement
Mettre les styles importants en ligne
Certains clients et webmails suppriment ou ignorent les blocs style
Garder une largeur de contenu d'environ 600px
S'adapte au volet de lecture de la plupart des clients
Faire les boutons avec un lien avec padding dans une cellule colorée
Résiste aux clients qui bloquent les images et ignorent une partie du CSS
Définir width, height et alt sur chaque image
Les images sont souvent bloquées jusqu'à ce que le lecteur les autorise
Ajouter un preheader masqué
Contrôle le texte d'aperçu affiché après l'objet
Utiliser la meta color-scheme et prefers-color-scheme
Les clients qui gèrent le mode sombre utilisent vos couleurs sombres au lieu d'inverser
Inclure un lien de désinscription dans les e-mails marketing
Exigé par les lois anti-spam et par les grands fournisseurs de messagerie
Avant d'envoyer
Checklist de test
Test
Comment
Vrais clients
Envoyez à des comptes sur les grands webmails, un client de bureau et un téléphone
Images désactivées
Désactivez le chargement des images et vérifiez que l'e-mail reste compréhensible
Mode sombre
Passez le téléphone et le client de bureau en mode sombre
Liens
Cliquez sur chaque lien, y compris le lien de désinscription
Partie texte brut
Envoyez aussi une version texte ; certains lecteurs et filtres l'utilisent
Vérification anti-spam
Authentifiez votre domaine (SPF, DKIM, DMARC) avant d'envoyer en volume