L’e-mail marketing médian est cliqué par 6,81% des personnes qui l’ouvrent (MailerLite). Sur 100 lecteurs assez intéressés pour ouvrir, 93 font défiler, survolent et referment.
La plupart de ces e-mails se ressemblent : une photo de banque d’images en hero, un bouton «Acheter» centré, un footer recopié de la dernière campagne. Rien n’est cassé, mais rien ne donne envie de cliquer non plus.
Ce guide vous montre comment faire réellement ressortir vos e-mails. Nous passons en revue chaque bloc, du hero au footer, à travers les bonnes pratiques de design d’e-mail qui déclenchent le clic. En octobre, c’est le bon moment pour les appliquer : vos gabarits seront prêts avant le Black Friday.
Pourquoi la plupart des e-mails se ressemblent
Parcourez n’importe quelle galerie d’inspiration en design d’e-mail : les meilleurs exemples ont 1 point commun, chaque bloc a été conçu pour cet e-mail précis. La majorité des e-mails qui arrivent en boîte de réception fonctionnent à l’inverse, pour 3 raisons.
- Le HTML d’e-mail est difficile à construire. L’e-mail repose encore sur des mises en page en tableaux et des styles inline, et un design impeccable dans Gmail peut se déformer dans Outlook. Tout ce qui sort du modèle par défaut exige donc un développeur et une série de tests. La plupart des équipes prennent la mise en page standard, changent le logo et envoient.
- Des visuels génériques. L’image hero est choisie pour convenir à n’importe quelle campagne, et ne convient donc à aucune. C’est la première chose que voit le lecteur, et elle ne dit rien de l’offre.
- Pas de système de design. Il n’existe pas d’endroit unique pour les couleurs de marque, les polices et le footer : chaque campagne est mise en forme à la main. Au bout de quelques mois, 2 e-mails ne se ressemblent plus tout à fait.
Le coût de ces erreurs se paie après l’ouverture. L’objet a fait son travail, le lecteur a ouvert l’e-mail. Puis il l’a refermé sans cliquer, parce que l’e-mail ressemblait à tous les autres de sa boîte et que rien n’a retenu son regard.
Comment faire ressortir vos e-mails ?
La réponse courte : un meilleur design. La réponse longue : affiner chaque bloc de l’e-mail pour qu’il paraisse pertinent et personnel au lecteur, et lui donne une vraie raison de cliquer et de faire ce que vous attendez de lui, qu’il s’agisse d’acheter, de réserver ou de revenir dans l’app.
Et non, cela ne signifie pas qu’un développeur ou un designer doive réécrire le HTML de chaque e-mail.
Passons maintenant bloc par bloc : comment améliorer chaque partie de l’e-mail pour obtenir plus de clics.
Bonnes pratiques de design d’e-mail, bloc par bloc
Voici l’e-mail que nous allons décortiquer : une vente d’automne d’une app d’équipement de running, 48 heures, -25% sur les chaussures de trail, construite dans l’éditeur drag-and-drop de Pushwoosh. Le même schéma fonctionne pour une opération French Days ou un avant-goût du Black Friday.
L’e-mail se décompose en 5 blocs. Voici ce qui fait ressortir chacun d’eux et ce que cela change pour le lecteur.
| Bloc | Comment se démarquer | Effet |
|---|---|---|
| En-tête | Un en-tête compact sur 1 seule charte de marque : Brand book avec Derive brand, enregistré comme bloc synchronisé | Reconnaissance immédiate, même rendu dans chaque e-mail |
| Hero | Un visuel construit autour de l'offre avec Generate with AI, titre conservé en texte réel | Le lecteur saisit l'offre au premier coup d'œil |
| Texte et CTA | Un titre écrit pour 1 lecteur avec des merge tags et Liquid, et 1 bouton stylé en texte réel | Pertinence et 1 prochaine étape claire |
| Contenu | Des grilles produits issues du catalogue en direct, des sections par audience avec des conditions d'affichage, un compte à rebours avec le Timer block | Plus de clics produits, la bonne offre pour chaque lecteur, l'urgence d'agir maintenant |
| Footer | 1 footer enregistré comme bloc synchronisé, vérifié par Smart check | Les mentions légales restent exactes dans chaque e-mail |
Ci-dessous, nous ouvrons chaque bloc à travers ses bonnes pratiques, du haut de l’e-mail vers le bas : pourquoi chaque pratique fonctionne, et comment la mettre en œuvre dans Pushwoosh.
Le haut de l’e-mail : en-tête et hero
#1. Construisez l’en-tête sur votre charte de marque
Pourquoi ça fonctionne : l’en-tête ouvre chaque e-mail. Quand le logo, les couleurs et les polices sont identiques à chaque envoi, le lecteur reconnaît l’expéditeur d’un coup d’œil, et chaque bloc en dessous hérite du même style.
Au lieu de : couleurs recopiées du dernier e-mail et nouvelle mise en page d’en-tête à chaque campagne → essayez : 1 charte de marque unique et un en-tête compact (logo et 2 ou 3 liens), identique dans chaque e-mail.
Dans Pushwoosh : configurez le Brand book : logo, couleurs, polices, styles par défaut des blocs et ton de marque. Inutile de tout saisir à la main : Derive brand analyse votre site web, le PDF de votre charte graphique ou votre logo, et propose la palette, les polices et le ton. Apply brand book styles applique la charte à n’importe quel modèle, y compris les plus anciens, sans toucher au contenu.
Construisez ensuite l’en-tête avec votre logo et un Menu block, puis enregistrez-le comme bloc réutilisable avec l’option Keep copies in sync activée : un nouveau lien de menu apparaît alors d’un coup dans tous vos e-mails. Le footer fonctionne de la même manière (voir la pratique 8).
#2. Construisez le hero autour de l’offre, pas d’une photo générique
Pourquoi ça fonctionne : le hero est ce que le lecteur voit avant de décider s’il fait défiler. S’il montre l’offre, le message passe en 1 coup d’œil.
Au lieu de : un coureur souriant tiré d’une banque d’images → essayez : les vraies chaussures de trail en promotion, avec «-25% sur les chaussures de trail. 48 heures seulement.» en texte réel par-dessus.
Dans Pushwoosh : dans l’Image block, Generate with AI crée le visuel à partir d’un prompt («chaussures de trail sur un sentier forestier mouillé, lumière chaude d’automne») au format bannière 16:9. Placez-le en arrière-plan d’un Card block : le titre et le bouton restent du texte réel. Ils s’affichent même quand les images sont bloquées, et les lecteurs d’écran peuvent les lire.
Le corps de l’e-mail : texte, CTA et contenu
#3. Rédigez un titre personnalisé pour chaque lecteur
Pourquoi ça fonctionne : un titre qui cite un élément familier au lecteur (son prénom, sa pointure, la catégorie consultée) se lit comme un message qui lui est adressé, pas comme une diffusion de masse.
Au lieu de : «Découvrez notre collection d’automne» → essayez : «Camille, votre pointure de trail est de retour en stock.»
Dans Pushwoosh : insérez le prénom comme merge tag depuis la barre d’outils du Heading block, et définissez une valeur par défaut, par exemple «Coureur», pour les lecteurs dont le prénom est inconnu. Pour adapter la phrase selon la langue ou le pays (France, Belgique, Suisse romande ou Afrique francophone), utilisez les templates Liquid.
#4. Donnez à chaque e-mail 1 CTA qui se démarque clairement
Pourquoi ça fonctionne : chaque bouton supplémentaire disperse l’attention. 1 CTA principal dans une couleur contrastée indique au lecteur quoi faire ensuite, et sur mobile il lui faut une zone tactile d’au moins 44×44 pt, selon les Human Interface Guidelines d’Apple.
Au lieu de : 3 boutons équivalents («Acheter», «En savoir plus», «Tout voir»), ou un bouton intégré à une image → essayez : 1 bouton en texte réel, «Trouver ma pointure», dans votre couleur d’accent.
Dans Pushwoosh : stylisez le Button block avec un fond uni ou dégradé, un rayon d’angle et des marges internes, et définissez des marges plus larges sur mobile pour que le bouton reste à la taille du pouce.
#5. Alimentez les grilles produits avec des données en temps réel
Pourquoi ça fonctionne : les articles en rupture de stock et les prix périmés coûtent des clics et de la confiance.
Au lieu de : 6 chaussures copiées dans le modèle le lundi, dont 2 en rupture dès le jeudi → essayez : une grille de chaussures de trail basée sur ce que chaque lecteur a consulté, alimentée par le catalogue en direct.
Dans Pushwoosh : le Products block se remplit selon une règle de catalogue, à partir du panier abandonné du destinataire, ou avec une stratégie de recommandation : meilleures ventes, retour en stock, ou articles consultés. Le flux de votre Product catalog se synchronise toutes les heures : prix et stocks restent à jour sans que personne ne modifie l’e-mail.
Pour les éditeurs de presse et les apps de contenu, le News block fait la même chose avec les articles de vos flux, et ajoute une accroche rédigée par IA sous chaque titre. Idéal pour une newsletter quotidienne qui reprend l’actualité du jour sans montage manuel.
#6. Donnez à chaque audience sa propre section
Pourquoi ça fonctionne : un membre fidèle et un client qui n’a pas commandé depuis 3 mois n’ont pas besoin des mêmes raisons de cliquer.
Au lieu de : le même argument «nouvelle collection» pour tout le monde → essayez : 1 section en 3 variantes : accès anticipé pour les membres du programme de fidélité, -25% pour les clients inactifs depuis 90 jours ou plus, et nouveautés pour tous les autres. Le principe vaut aussi pour les Soldes : accès en avant-première pour les fidèles, rappel de la date de démarrage pour les autres.
Dans Pushwoosh : ajoutez une condition d’affichage à chaque variante, basée sur des Tags ou une expression Liquid, et enchaînez-les avec IF / ELSE IF / ELSE. 1 campagne à construire et à tester, 3 e-mails différents dans la boîte de réception.
#7. Rendez l’urgence concrète avec un compte à rebours
Pourquoi ça fonctionne : «bientôt» reste abstrait. Une échéance visible transforme le «peut-être plus tard» en une décision à prendre maintenant.
Au lieu de : «Fin de la vente imminente !» dans l’objet, le titre et le bouton → essayez : un compte à rebours jusqu’à la fin réelle de la vente de 48 heures, placé juste à côté du CTA.
Dans Pushwoosh : ajoutez le Timer block, définissez la date, l’heure et le fuseau horaire de fin, et stylisez les chiffres aux couleurs de votre marque. Votre offre se convertit plutôt en magasin ? Le Barcode block génère un code scannable pour chaque destinataire.
Le bas de l’e-mail : footer
#8. Construisez le footer une fois et synchronisez-le partout
Pourquoi ça fonctionne : le footer porte le lien de désinscription, l’adresse postale et les mentions légales. Pour une audience européenne attentive au RGPD, un lien de désinscription introuvable ou une mention obsolète coûtent la confiance du lecteur. Le footer doit être exact dans chaque e-mail.
Au lieu de : un footer copié-collé de campagne en campagne jusqu’à coexister en 2 versions des mentions légales → essayez : 1 seul footer, mis à jour à 1 seul endroit.
Dans Pushwoosh : construisez 1 footer aux styles de votre marque, avec le lien de désinscription, l’adresse postale et les liens vers les réseaux sociaux, puis enregistrez-le comme bloc réutilisable avec Keep copies in sync activé. Modifiez l’adresse une fois, et chaque e-mail qui utilise ce footer est mis à jour, y compris ceux déjà programmés.
Astuce : Smart check signale un e-mail marketing sans adresse postale dans le footer, et vous avertit lorsqu’un e-mail dépasse la limite de troncature de Gmail d’environ 102 Ko, où le footer est le premier élément coupé.
Accélérez le design d’e-mail avec les outils d’IA
Un e-mail qui se démarque ne doit pas prendre une semaine. Ces outils d’IA (à noter : disponibles pour tous les utilisateurs Pushwoosh) réduisent le temps de production et aident à améliorer le design.
Assistant IA
Décrivez l’e-mail dans l’AI tab (onglet IA), et l’assistant assemble un e-mail complet pour vous.
Images et textes alternatifs par IA
Generate with AI crée un visuel à partir d’un prompt, directement dans l’Image block. Generate alt with AI rédige le texte alternatif à partir de l’image elle-même.
Objets et pré-headers par IA
Une fois le contenu construit, 1 clic suffit pour rédiger un objet et un pré-header à partir de ce que contient réellement l’e-mail.
Traduction automatique
Les versions linguistiques manquantes sont complétées par l’IA, au lieu de saisir chaque langue à la main. Pratique si vous écrivez à la fois à des lecteurs francophones et néerlandophones en Belgique, ou germanophones en Suisse.
Brand book et blocs synchronisés
Les styles, l’en-tête et le footer des pratiques 1 et 8 évitent de reconstruire les bases à chaque nouvelle campagne.
Construisez votre 1er e-mail qui se démarque
-
Partez d'un modèle ou d'un prompt.
Une mise en page tirée de la bibliothèque de modèles d'e-mail, ou un premier jet de l'assistant IA.
-
Appliquez votre Brand book.
Styles de marque et en-tête synchronisé : pratique 1.
-
Parcourez l'e-mail de haut en bas.
Hero, titre, CTA, produits, sections par audience, compte à rebours, footer.
-
Concevez la version mobile.
Ne laissez pas la mise en page desktop simplement rétrécir sur un téléphone. Passez en vue mobile, entièrement modifiable à la largeur réelle d'un téléphone, et choisissez Stack, Keep row ou Reverse pour chaque ligne Columns. Définissez des tailles de police, des marges et des dimensions d'image propres au mobile, et utilisez Hide on mobile ou Hide on desktop pour les blocs qui n'ont de sens que sur 1 écran. En France, où iPhone et Android se partagent le marché, vérifiez le rendu sur les deux. C'est du design d'e-mail responsive sans écrire une seule media query.
-
Testez.
Lancez Smart check, puis envoyez un e-mail de test à 50 adresses maximum.
-
Envoyez, puis lisez la carte des clics.
L'onglet Click map superpose une heatmap à l'aperçu de l'e-mail : vous voyez quels éléments ont généré des clics et si le nouveau hero a rempli son rôle.
FAQ
Articles connexes
Tout voir
