Création Modèles
~ 16 min lu
2 commentaires
57104 vues
évaluez-le
09 octobre 2020

Les 16 meilleures pratiques pour le design des entêtes d’e-mails

Stripo / Blog / Les 16 meilleures pratiques pour le design des entêtes d’e-mails

L’entête du e-mail est l’élément que vous utilisez régulièrement dans vos e-mails de newsletters. Mais bien souvent, nous oublions que c’est bien plus complexe que seulement un logo et un menu.

L’entête complet d’une newsletter comporte trois parties essentielles :

  • Infos à propos de l’envoyeur ;

  • la ligne de sujet, et le préentête ;

  • l’entête de l’e-mail lui-même.

Dans cet article, nous vous montrerons comment définir la ligne de sujet et le préentête, et nous partagerons 16 idées d’entête d’e-mails qui rendent vos e-mails plus efficaces.
En-tête Stripo En-tête fait à la main

(Source: modèle Stripo)

Infos à propos de l’envoyeur

L’entête comprend normalement:

  • le nom de l’envoyeur;

  • le nom du destinataire;

  • l’adresse « de »;

  • l’adresse « répondre à »;

  • la date;

  • le logo de la marque (optionnel).

Comment créer des informations d'en-tête d'e-mail sur l'expéditeurSi vous utilisez un ESP pour envoyer vos e-mails par lot, alors vous devez y définir les données suivantes : le nom de l’envoyeur, le logo de la société et l’adresse « répondre à ». Cela demeure généralement inchangé d’une campagne à une autre, alors vous n’avez qu’à les définir une seule fois. Par contre, la ligne de sujet et le texte du préentête changent toujours, donc vous devrez les définir à chaque début de campagne.

La ligne de sujet et le préentête

Un préentête, aussi connu comme texte d’aperçu, c’est le plus petit, mais aussi le plus essentiel élément de l’e-mail.
Un préentête informatif avertit les destinataires du but de l’e-mail. Sur les ordinateurs de bureau, il va après le tiret « — » dans la
ligne de sujet, alors que sur les appareils mobiles, il est situé sur la ligne en dessous du sujet. Lorsque l’on reçoit un e-mail, selon l’étude de Litmus, 24 % des destinataires décident selon le préentête d’ouvrir le message ou non.

Chaque fois que je reçois un e-mail de Mailchimp, SimilarWeb ou Netflix, je sais de quoi il s’agit sans même l’ouvrir.

Idées d'en-tête d'email Pré-en-têtesCertaines entreprises insèrent leurs offres commerciales dans le préentête, ce qui leur apporte des clics.

L’une des meilleures pratiques de préentête d’e-mail est de faire des histoires — lorsque le texte de préentête est la suite de la ligne de sujet.

Chubbies : « J’ai changé — OK, j’étais tout radin, mais maintenant j’ai changé à cause de la vente des fêtes ».

Brighton : “Elle adore le ROUGE pour les fêtes — et vous aussi”.

D’Artagnan : « Envoyez-leur des steaks ! 15 % DE RABAIS sur tous les steaks et les côtes — la promotion se termine dimanche ».

Comment définir un texte de préentête avec Stripo :

  • au-dessus du modèle, cliquez sur le bouton « Paramètres » ;

  • entrez une ligne de sujet et le texte de pré-haut (préentête) de page.

Pre-haut de page masque

Important de noter :

Lorsqu’il n’y a pas de préentête dans votre e-mail, les destinataires verront le début du texte de votre e-mail. Il ne sera pas complet, cela pourrait être comme « Voir en ligne » ou « Mon compte ».

Alors, si vous ne voulez pas voir que vos destinataires voient cela, vous pouvez choisir de ne rien afficher dans le préentête.

Dans Stripo, vous n’avez qu’à remplir l’option « Remplir avec un espace ».

Ajouter des espacesUne fois fait, l’aperçu de votre e-mail ressemblera à ceci dans la boîte de vos destinataires :

Stripo pré-en-têtes désactivé

Définissez la ligne de sujet et le texte d’aperçu pour vos e-mails

Utilisez les annotations de promotion de Google

Comme le nom le suggère, vous pouvez annoter la durée de votre promotion ou la valeur du rabais et l’accompagner avec un badge d’occasion dans la boîte des utilisateurs sans qu’ils aient besoin d’ouvrir vos e-mails.

Cette information va immédiatement après la ligne de sujet et le texte de préentête. 

Exemple d'e-mail de l'onglet Promo GmailCela fonctionne sur les appareils mobiles dans Gmail, mais n’impactera pas l’apparence de votre e-mail dans d’autres clients e-mail.

Regardez notre courte vidéo pour apprendre comment créer des annotations promotionnelles pour vos newsletters avec Stripo.

Utilisez les annotations pour vous démarquer dans la boîte de vos utilisateurs

Pour les exigences des badges d’annotation, veuillez vous référer à notre article Guide des nouveaux onglets de promotion Gmail.

Entête de l’e-mail

Il n’y a pas de règle unique concernant l’aspect d’un entête d’e-mail professionnel. Cela dépend… mais nous vous fournirons de nombreuses idées et de nombreux exemples.

Avant de plonger dans les idées créatives, laissez-nous vous parler des éléments traditionnels de l’entête des e-mails, qui sont le nom de la société, le logo et le menu.

Nom et logo de la société

Comme règle, le logo d’une société comprend le nom de la société.

Si votre entreprise est nouvelle dans le marché, et que les gens commencent à peine à connaître votre marque et vos produits, alors n’oubliez pas d’ajouter le nom de votre société, car le nom de l’entreprise est l’élément par lequel les gens vous reconnaissent. Peu importe s’il s’agit d’un e-mail déclenché/automatique ou lié à une promotion.
En-tête avec nom de company

(Source: modèle Stripo)

Mais lorsque votre société est reconnue partout dans le monde et que vous êtes certain que tous sont familiers avec votre logo, alors vous pouvez vous limiter au logo et omettre le nom de la société.
logo-no-name

(Source: E-mail d’Airbnb)

Note : l’arrière-plan du logo doit être transparent pour s’agencer avec le thème de couleur.
Le logo est inséré comme une image, alors vous n’avez pas à vous préoccuper des polices ; il s’affichera correctement dans tous les clients e-mail et sur tous les appareils.

Menu

Le menu est un autre élément traditionnel des e-mails, car il vous aide à guider les clients et à les mener vers votre site Web. Le menu est fonctionnel.

Vous pouvez sélectionner un menu régulier ou un menu interactif.

Tous les menus réguliers que vous ajoutez dans vos e-mails avec Stripo sont totalement réactifs.

Inversion des onglets du menu Conception d'en-tête d'e-mail

(Source: E-mail de Gap)

Pour plus d’informations sur la façon d’ajouter des menus, veuillez vous référer à notre article Ajoutez un menu à vos e-mails avec Stripo.

Les meilleures pratiques des entêtes d’e-mails

Nous avons sélectionné les meilleurs exemples venant de vraies marques.

1. Ajouter l’option « Voir dans le navigateur »/« Version Web »

Bien sûr, vous pouvez placer ce lien dans un pied d’e-mail, ce qui est correct. Si votre e-mail contient des GIFs, ceux-ci peuvent se charger lentement ou pas du tout. Si vous avez des éléments d’interactivité ou de gamification, ils pourraient ne pas s’afficher correctement dans certains clients e-mail. Dans ces cas, vous êtes mieux d’ajouter l’option « Voir en ligne » dans l’entête de vos e-mails, cela augmente les chances que vos utilisateurs la voient et la cliquent.

Meilleures pratiques d'en-tête d'e-mail La vue dans le lien du navigateur

(Source: E-mail de Banana Republic)

2. Ajouter un localisateur de boutique

Avec le logo et le menu, Adidas a ajouté un localisateur de boutique dans l’entête. C’est une idée brillante. J’ai choisi les chaussures dont j’avais besoin directement dans l’e-mail et puis, dans le localisateur de boutique, ils me fournissent l’adresse d’une boutique hors ligne près de chez moi pour essayer les chaussures. Excellent service. Merci !

Trouver un magasin-Adidas

(Source: E-mail d’Adidas)

3. Mettez de l’info sur le rabais

C’est l’un des meilleurs exemples d’entête, la société de cosmétiques Ababel a placé leur offre de valeur dans l’entête. C’est une décision intéressante, je n’aurais pas pu la manquer. Pour plus d’informations, j’ai dû cliquer sur le lien.
Bonnes pratiques de conception d'en-tête d'e-mail Placement d'informations importantes dans les en-têtes

(Source: E-mail de Brighton)

4. Faire la promotion de produits

L’entreprise Filmmaker fait la promotion de l’abonnement à leur journal directement dans l’entête.

Une bonne façon d’annoncer votre produit dans votre newsletter est d’être simplement informatif.
En-tête informatif

(Source: E-mail de Filmmaker)

5. Ajouter l’option « Mon compte » dans l’entête de l’e-mail

La carte à cliquer des rapports d’eSputnik  (notre ESP) sur les campagnes de newsletters montre combien de destinataires cliquent sur le logo ou sur le bouton de connexion pour accéder à leur compte.
Exemples de conception d'en-tête d'e-mail Une fois que certains destinataires ont fini de lire leur bulletin hebdomadaire, ils pourraient vouloir continuer avec Stripo/votre outil en cliquant sur le bouton « Mon compte ».

Comme vous pouvez le voir, 12,8 % de nos destinataires ont utilisé cette option.

6. Icônes de médias sociaux

Pourquoi ne pas aller contre le système ? Si vous voulez vous démarquer — placez les liens vers vos comptes de médias sociaux dans l’entête. C’est assez inhabituel, mais très remarquable. Spécialement si votre but est de faire croître le nombre d’abonnés de vos comptes de médias sociaux où vous partagez tous les détails d’un événement à venir.
En-tête d'e-mail Icônes de médias sociaux dans les en-têtes d'e-mail

(Source: E-mail d’Ukrainian Hub)

7. Utiliser des GIFs ou des logos animés

Voulez-vous animer votre entête ? Faites-le. Assurez-vous de garder l’image de l’entête de l’e-mail sous 1 Mo, car au moins la moitié de vos clients liront vos e-mails sur des appareils mobiles. Si l’e-mail prend trop de temps à charger, les gens le fermeront tout simplement.

GIF d'en-tête Stripo dans l'en-tête

(Source: E-mail de Banana Republic)

8. Travailler avec l’arrière-plan de l’entête d’un e-mail

Si vous ne voulez pas faire de gros changements aux entêtes de vos e-mails de marketing, alors vous pourriez vouloir jouer avec les couleurs.

Stripo-Header-Ferrari

Stripo-Header-Joyeux-Noël-Design

(Source: E-mail de la boutique en ligne de la Scuderia Ferrari)

9. Décorer les entêtes pour les fêtes

Avec l’approche des fêtes, nous faisons un effort pour rendre les e-mails festifs. Il y a quelque temps, la plupart des sociétés ne changeaient pas le design de leur entête d’e-mail, mais c’était plutôt ennuyeux. Avivez votre entête avec des flocons de neige, des boules décoratives, etc.

Animations d'image d'en-tête d'e-mail

(Source: E-mail de GrowthHackers)

Au premier regard, les destinataires étaient bien avertis du but de la campagne. Selon moi, c’est un excellent exemple d’un design d’entête d’e-mail pour les fêtes.

10. Utiliser des polices personnalisées dans les onglets du menu

Une belle police décorative enrichira le design de votre entête d’e-mail. Utilisez votre imagination et soyez créatif.

Il est important de s’assurer que toutes les polices sont lisibles — les polices cursives demandent une taille plus grande.
Exemples de conception d'en-tête d'e-mail Polices décoratives

(E-mail ouvert dans Gmail, macOS et Windows 10)

Nous voulons vous rappeler que Stripo vous permet d’ajouter et d’utiliser des polices personnalisées dans le design de vos entêtes d’e-mails.

6 min read

61603 views 5

How to Add and Use Custom Fonts with Stripo

On November 26th, we released a new option — now with Stripo.email, you can add custom fonts to projects in just a few clicks with no HTML skills needed. Why is that important? It’s not a secret that a good copy complements the email design and convinces customers to make a purchase. Make the text copy emotional. And by wrapping it in a font that matches the situation and the email design best, you make it noticeable, good-looking and appealing....

Continuer à lire

Important de noter :

Si une police sélectionnée n’est pas prise en change par un client e-mail, elle sera remplacée par la police par défaut du client.

11. Indiquer la date d’émission

En regardant l’e-mail d’Apple News, on voit facilement quel jour on l’a reçu. Comment ? L’entreprise ajoute la date dans l’entête de l’e-mail. Selon moi, c’est une des meilleures idées de design d’entête d’e-mail.

En-tête d'e-mail Mettre des données dans les en-têtes d'e-mail

(Source: E-mail d’Apple News)

12. N’utiliser aucun entête

Toutes les grandes marques ont quelque chose en commun — elles ont leur propre style. Donc, les e-mails de Nike sont parfaits. Vous ne remarquerez jamais où l’entête se termine et où la bannière commence.

Nikes-Header

(Source: E-mail de Nike)

En fait, Nike n’utilise pas d’entête — ils placent leur logo sur la bannière.

C’est un choix intéressant, si vous ne comptez pas ajouter un menu à l’entête.

13. Ajouter un lien « Mettre à jour vos préférences »

Nous voulons tous que nos newsletters soient grandement efficaces. Donc, nous devons offrir uniquement l’information pertinente. Les préférences des clients changent fréquemment et les destinataires doivent avoir la possibilité de mettre leurs informations à jour lorsqu’ils le désirent.

Le restaurant D’Artagnan place le bouton « Mettre à jour vos préférences » directement dans l’entête.

Préférences de mise à jour de l'en-tête Stripo

(Source: E-mail de D’Artagnan)

Important de noter :

Normalement, les appareils mobiles ne montrent que 4 onglets de menu à l’écran. Les onglets supplémentaires du menu peuvent causer un défilement horizontal. Pour éviter cela, vous pourriez devoir désactiver certains onglets sur les appareils mobiles.

Si vous créez votre entête d’e-mail avec Stripo, vous devez :

  • cliquer sur un onglet de menu que vous voulez désactiver ;

  • dans le panneau des paramètres, cliquez sur « Masquer l’élément… sur portable » pour l’élément choisi ;

Meilleures pratiques d'en-tête d'e-mail Désactivation de certains onglets de menu sur les appareils mobiles

  • faites de même pour les autres éléments que vous voulez désactiver sur les appareils mobiles ;

  • complété.

Rendez les menus des entêtes de l’e-mail totalement réactifs en un seul clic

14. Indiquer le numéro de membre

Si vous offrez des abonnements à vos clients, leur numéro est censé être disponible. Certainement, vous pouvez placer cette information quelque part dans les paramètres de leur compte. Mais Decathlon indique le numéro de membre directement dans l’entête. C’est très remarquable. De cette façon, les destinataires savent toujours où regarder pour leur numéro de membre.


Adhésion à Stripo Header

(Source: E-mail de Decathlon)

15. Ajouter la photo de l’envoyeur

Ceci est l’un des entêtes les plus informatifs jamais vus. Il contient les boutons de partage, les icônes des médias sociaux, les dates, le nom de l’auteur et sa photo.

Il est toujours bien de savoir qui est l’auteur, spécialement lorsqu’il s’agit des dernières nouvelles en économie ou en politique.
Stripo-Header-Best-Example

(Source: E-mail de CNN Reliable Sources)

16. Placer l’option « À faire maintenant »

Vous pouvez, si vous le désirez, ajouter les liens « Montrer maintenant » à votre entête. Quelques marques les placent en haut de leur logo, d’autres placent ces liens juste à côté de leur logo. C’est totalement à votre choix.

Maybelline, par exemple, ajoute les liens « Inscrivez-vous maintenant » dans l’entête HTML de leurs e-mails lorsqu’ils font la promotion d’événements à venir, comme des webinaires.

Bonnes pratiques relatives à l'en-tête d'e-mail Inscription à l'événement

(Source: E-mail de Maybelline New York)

Maintenant que vous êtes inspiré par les exemples d’entête d’e-mails ci-dessous, vous êtes prêt à créer un nouvel entête pour vos prochaines campagnes.

Comment faire un entête d’e-mail avec Stripo — guide

Il y a deux façons de concevoir des entêtes d’e-mails dans notre éditeur :

1. Personnaliser l’entête d’un modèle

Cette option est la meilleure pour ceux qui n’ont pas le temps de créer des entêtes d’e-mail depuis zéro.

Tous les modèles d’e-mails HTML de Stripo contiennent déjà un entête. Vous n’avez qu’à choisir le modèle qui vous plaît et à remplacer les liens et le logo par les vôtres.

Parmi les designs de l’entête de nos modèles, vous trouverez celui qui répond aux besoins de votre campagne.
Parcourir

2. Créer un nouvel entête d’e-mail à partir de zéro

Je veux créer un entête avec mon logo situé entre les onglets du menu. Comme celui-ci ;
Stripo-Header-Stripo-Menu

C’est facile, et cela ne prendra que quelques étapes :

Stripo-Header-Adding-Menu-GIFAlors, voici précisément ce que vous devez faire :

  • glissez une structure à 3 colonnes dans votre modèle d’e-mail HTML ;

si vous voulez que votre entête contienne plusieurs rangées, juste à répéter l’opération autant de fois que nécessaire dans votre modèle ;

  • pour ajouter un logo, je clique sur l’icône « image » ;

Deposez le contenu ici 123

  • définis la taille de mon logo ;

Taille fr

Assurez-vous d’activer l’option sur le bouton « Image réactive » pour un bon affichage sur les appareils mobiles ;

  • glissez simplement le bloc menu dans la première colonne du modèle;

Bloc de menu de glissement d'en-tête Stripo

  • ​​​enlever le troisième onglet du menu, car je n’ai besoin que deux éléments dans chaque colonne (par défaut, le bloc de menu a trois onglets) ;
  • donnez-leur les noms « modèles » et « notes de version » ;

  • sélectionnez la couleur de police — dans notre éditeur cela s’appelle « Couleur des liens » ;

Stripo-Header-Email-Menu

  • faites de même pour la troisième colonne ;

  • pour la rangée entière, je définis le blanc comme couleur de fond ;

  • égalisez les conteneurs — dans mon cas, ils sont de 250/250 et celui du centre avec logo ne fait que 30 ;

Apparence frSi vous voulez définir une image de fond, vous devrez basculer le bouton « Image de fond » ;

Je recommande de définir la taille de la police lorsque l’entête est complet avec tous ses conteneurs — alors vous verrez l’aspect général.

Je choisis la police Tahoma, 18 ;

Note : nous voulons vous rappeler que Stripo vous permet d’ajouter des polices personnalisées et de les utiliser dans vos menus et autres textes dans vos modèles d’e-mails.

  • Basculez le bouton «Image réactive » — pour vous assurer que votre menu s’affichera correctement sur les appareils mobiles également ;

Image reative

  • définissez les rembourrages. Vous pourriez avoir besoin de faire cela pour aligner tous les conteneurs. Cliquez sur le bouton « plus » ;

  • avant de sauvegarder ce bloc dans ma bibliothèque, j’ai décidé de le prévisualiser.

Important de noter:

Normalement, l’entête d’un e-mail est quelque chose que vous ne créez qu’une fois pour plusieurs campagnes. N’ayez pas peur d’y consacrer un peu de temps.

Sauvegardez-le dans votre stockage de module personnel, et glissez-le lorsque vous créez une nouvelle campagne d’e-mails.

Enregistrement des en-têtes d'e-mail dans le stockage du module

Créez votre entête d’e-mail HTML une seule fois et utilisez-la à travers toutes vos futures campagnes

Mot de la fin

Comme vous pouvez le voir par les exemples variés de design d’entête d’e-mails fournis ici, il n’existe pas de « meilleur design d’entête d’e-mail ». Sentez-vous libre d’être créatif.

Nos modèles d’e-mail contiennent déjà plusieurs entêtes codés professionnellement — choisissez-en un et personnalisez-le.

Je vous souhaite sincèrement la meilleure des chances dans vos prochains projets !

Créez des entêtes d’e-mails efficaces une fois et réutilisez-les dans toutes vos campagnes.

Дмитрий Головцов il y a 1 mois

Почему в письме вы пишите в анонсе статьи про геймификацию, а сама статья совершенно о другом? Заманить для перехода на сайт? Но вы же должны понимать, что это вызывает негатив, когда ожидания не совпадают с реальностью. Грустно.

Hanna Kuznietsova commenté à Дмитрий Головцов il y a 1 mois

Дмитрий, Добрый день. Спасибо большое, что обратили наше внимание на это. Мы в рассылку по ошибке вставили неверную ссылку. Приносим свои извинения за это. Статья про геймификацию у нас есть. Ее писал наш СЕО. Вот ссылка: https://stripo.email/blog/gamification-in-email-marketing/ И именно этой статьей мы хотели поделиться в письме. В следующий раз будем тщательнее проверять все ссылки, которыми делимся в письмах.

Vous pourriez être intéressé par

← précédent suivant →
Stripo_Building AMP Emails with Stripo_Featured Image
11 mars · 21 min lu
Différentes façons de créer des e-mails AMP avec Stripo

Mises à jour dynamiques, contenu en temps réel, hyperpersonnalisation, un nouveau niveau de gamification, laisser des commentaires sous forme ouverte, réserver des réunions, etc. - toutes ces actions sont désormais possibles directement dans les boîtes de réception des utilisateurs avec l'avènement d'AMP pour les e-mails. Doit-on dire que ces e-mails animent vos newsletters, ont l'air frais et nouveaux dans les boîtes de réception des utilisateurs et, par conséquent, multiplient par 5 les conversions? Mais comment construisez-vous ces e-mails? Gmail dans...

Création Marketing Modèles How-to AMP
Stripo Notification Emails
01 mars · 14 min lu
​​​​​​​Exemples d'e-mails de notification et bonnes pratiques

Les notifications par e-mail sont le moyen le meilleur et le plus simple d'informer les abonnés des changements survenus ou sur le point de se produire prochainement. Ces e-mails affichent le taux d'ouverture le plus élevé. Mais même ici, nous devons nous en tenir à certaines bonnes pratiques lors de la conception des e-mails pour ne pas perdre la confiance des abonnés. Ce modèle d'e-mail de notification est bien structuré, contient tous les blocs nécessaires Utilise-le Nous avons rassemblé les...

Création Marketing How-to
Soyez toujours au fait des dernières actualités de l'e-marketing, des guides, des articles et des guides pratiques sur la conception d'e-mails