SendinBlue Blog

Choisissez une catégorie :

Les 7 commandements du design d’email

« Ecrire » un email ne suffit plus. Dans un contexte d’email marketing, vos emails doivent sortir du lot, retenir l’attention de vos contacts et les guider vers une action sur votre site. Pour y parvenir, il faut un design d’email Ă  toute Ă©preuve !

MĂȘme si vous proposez le meilleur contenu du monde ou bien l’offre exceptionnelle Ă  laquelle personne ne peut rĂ©sister, tout cela risque de passer inaperçu sans un design qui les mette en valeur et qui attire le regard sur des zones stratĂ©giques.

Pour rendre vos emails agréables à lire et performants, nous vous proposons de suivre les 7 commandements du design email.

1- L’entĂȘte de l’email, tu personnaliseras aux couleurs de ta marque

Dans un bon design d’email, l’objectif de l’entĂȘte (aussi appelĂ© header) est de faciliter l’identification de la marque tout en suscitant l’intĂ©rĂȘt du lecteur.

Lorsqu’un email est ouvert, l’entĂȘte est le premier Ă©lĂ©ment Ă  ĂȘtre vu et lu. Il faut donc le rendre attractif, le personnaliser et ne pas uniquement se limiter au nom et au logo de l’entreprise, qui doivent ĂȘtre prĂ©sents dĂšs le dĂ©but.

Exemple de design d'email #1 : Bazarchic

L’exemple : Bazarchic

Sur l’exemple de Bazarchic, on retrouve les Ă©lĂ©ments clĂ©s qui permettent d’identifier dĂšs les dĂ©but :

  • Le logo de l’entreprise
  • Les mĂȘme couleurs et polices d’Ă©criture que sur le site
  • Des liens vers les diffĂ©rents univers de la marque pour reproduire la navigation du site

Souvent utilisĂ©e dans les emails des sites de e-commerce, le fait d’inclure une navigation vers des catĂ©gories de produit est une excellente astuce : mĂȘme si les offres spĂ©cifiques n’intĂ©ressent pas le destinataire, il peut toujours naviguer vers l’univers qui l’intĂ©resse directement depuis l’email.

2 – Responsive ton design sera

D’aprĂšs une Ă©tude menĂ©e par Return Path en 2017, 55% des emails sont dĂ©sormais consultĂ©s sur mobile : utiliser un Ă©diteur responsive design et prĂ©visualiser le rendu sur mobile est dĂ©sormais un passage obligĂ© !

Le responsive design (design adaptatif) consiste Ă  concevoir des pages web ou des emails qui s’adaptent automatiquement Ă  la taille et la rĂ©solution de l’Ă©cran sur lequel ils s’affichent.

Heureusement, pas besoin de connaissances techniques : grĂące Ă  l’Ă©diteur de newsletter responsive design de SendinBlue, vous pouvez concevoir des emails qui seront automatiquement responsive et prĂ©visualiser le rĂ©sultat sur tout type d’Ă©cran !

Exemple de design d'email #2 : Smart Casual

L’exemple : Smart Casual

La newsletter de Smart Casual s’adapte au support sur lequel elle s’affiche : sur mobile l’optimisation fonctionne, car les images sont bien placĂ©es les unes sous les autres, rendant la navigation fluide.

3- Ton contenu tu structureras

Bien hiĂ©rarchiser le contenu de votre email permet de s’assurer que le lecteur en retienne les informations essentielles.

Vos lecteurs sont constamment assaillis par les emails promotionnels qui s’accumulent dans leur boĂźte de rĂ©ception et n’ont que trĂšs peu de temps Ă  vous accorder.

Pour Ă©viter qu’ils n’en ratent l’essentiel, vous devez donc hiĂ©rarchiser vos informations de maniĂšre Ă  ce que le message le plus important apparaisse en premier : votre offre phare, votre contenu le plus engageant.

Ce n’est qu’aprĂšs le scroll, sous la ligne de flottaison que vous pouvez placer d’autres offres et donner plus d’options Ă  votre lecteur.

Cette technique d’Ă©criture et de design, qui consiste Ă  aller droit au but en se concentrant sur une information essentielle avant de dĂ©velopper les Ă©lĂ©ments pĂ©riphĂ©riques, s’appelle la pyramide inversĂ©e.

Exemple de design d'email #3 : Moo

L’exemple : Moo

En terme de mise en page du design, on cite réguliÚrement les emails de la papetterie Moo comme exemples de bonnes pratiques.

La partie haute de l’email, que le destinataire verra en premier, est focalisĂ©e sur un seul message : la prĂ©sentation d’une nouvelle gamme, avec une promesse claire et bouton de Call-To-Action.

Au cas ou le lecteur dĂ©sire en savoir plus, il n’a qu’Ă  scroller pour dĂ©couvrir le dĂ©tail des produits offerts dans cette nouvelle gamme.

4- Des images, tu utiliseras

Comme le dit le célÚbre proverbe, « une image vaut mille mots ». Elles sont un élément du design email qui permet de remplacer des textes dans de nombreuses situations.

Comme on vous le disait, vos emails n’ont que trĂšs peu de temps pour retenir l’attention de vos contacts qui sont dĂ©jĂ  soumis Ă  une surcharge informationnelle.

Pour faire passer l’information en demandant le moins d’efforts possibles Ă  vos lecteurs, tous les moyens sont bons : photos, GIFs, vidĂ©os… Tout ce qui peut vous permettre d’Ă©viter des textes trop chargĂ©s !

Exemple de design d'email #4 : Nokia

L’exemple : Nokia

Dans l’exemple de Nokia, les images soulignent l’intention principale du mail qui est de donner des idĂ©es cadeaux pour la fĂȘte des mĂšres. En montrant le produit seul et « mis en situation », les lecteurs peuvent plus facilement visualiser le produit .

Surtout, les images se suffisent souvent Ă  elles-mĂȘme pour dĂ©crire le produit et Ă©vitent ainsi la surcharge informationnelle : si le lecteur est intĂ©ressĂ© par l’une des offres, il pourra avoir plus d’informations sur la fiche produit en cliquant sur le bouton d’appel Ă  l’action.

Et si vous preniez 2 minutes pour tester SendinBlue ?
SendinBlue est une solution email / SMS complĂšte.
Gestion de vos contacts, édition des emails, envoi des campagnes, scénarios automatisés, etc.
Gratuit jusqu'Ă  9000 emails / mois.

Tester SendinBlue

5- Tes Call-To-Action, tu optimiseras

Les Call-To-Action vous permettent d’inciter vos lecteurs Ă  effectuer une action prĂ©cise : inscription, achat… Ils sont l’Ă©lĂ©ment central Ă  optimiser pour que votre newsletter convertisse et engage.

Pour optimiser l’efficacitĂ© de vos boutons de call-to-action, vous pouvez :

  • Placer votre bouton de maniĂšre centrale
  • Utiliser un verbe d’action qui exprime un bĂ©nĂ©fice pour l’utilisateur
  • Le faire prĂ©cĂ©der d’une promesse claire pour expliciter l’offre
  • Choisir une couleur de bouton qui contraste suffisamment avec le fond
  • IntĂ©grer des Ă©lĂ©ments d’urgentisation (plus que x disponibles, offre limitĂ©e…)

Lire aussi : découvrez tous nos exemples de bonnes pratiques pour optimiser vos call-to-action.

L’exemple : Adobe

Dans son exemple, Adobe utilise le bleu pour contraster avec le visuel assez sombre de son email ainsi qu’un verbe d’action, pour amener l’utilisateur Ă  regarder la vidĂ©o.

Le bouton est prĂ©cĂ©dĂ© d’une phrase explicitant la promesse et excitant la curiositĂ©.

6- Les liens, tu signaleras comme tels

Qui dit CTA, dit liens ! Pensez à les rendre facilement identifiables et à vérifier leur redirection.

Cele peut paraĂźtre basique, mais c’est de premiĂšre importance : vous devez vous assurer que tous vos liens soient reconnaissables et bien identifiĂ©s comme tel.

Sur le web, les liens sont gĂ©nĂ©ralement de couleur bleue ou soulignĂ©s en bleu. En fonction de vos envies, il est possible de modifier cette couleur pour l’uniformiser avec le corps de votre email, mais vous devez vous assurer qu’aucune confusion ne soit possible.

Exemple de design d'email #6 : My Little Kids

L’exemple : My Little Kids

My Little Kids offre dans son mail divers fonds d’Ă©cran, qu’il est possible de tĂ©lĂ©charger directement Ă  la fin du mail, grĂące Ă  des liens sĂ©parĂ©s, facilement identifiables et qui fonctionnent.

7- Le footer, tu ne négligeras pas !

C’est l’Ă©lĂ©ment final de votre design email : il doit contenir des informations clĂ©s et permettre Ă  vos destinataires de vous suivre sur d’autres canaux.

Le footer (pied de l’email) fait en quelque sorte office de signature de votre email. Il doit donc permettre Ă  vos destinataires de vous contacter et de trouver plus d’informations pour vous.

C’est aussi l’endroit ou vous devez vous assurer d’ĂȘtre en conformitĂ© avec les exigences juridiques en vigueur (RGPD, CNIL…) en y incluant des mentions lĂ©gales et des moyens de se dĂ©sinscrire et de gĂ©rer ses prĂ©fĂ©rences.

L’exemple : CPMHK

Le blog dĂ©diĂ© Ă  l’Ă©ducation positive Cool Parents Make Happy Kids inclut une petite originalitĂ© bienvenue dans son footer : un bouton pour transfĂ©rer l’email Ă  ses amis, et un autre pour que ces derniers puissent s’inscrire Ă  leur tour.

De maniĂšre gĂ©nĂ©rale, pensez que votre footer doit faciliter la vie de vos contacts : qu’il s’agisse de partager votre newsletter ou au contraire de s’y dĂ©sinscrire, aidez-les !

A vous de jouer !

Vous disposez Ă  prĂ©sent des meilleurs conseils pour crĂ©er le parfait design d’email !

GrĂące Ă  nos templates d’email Ă  Ă©diter directement et nos diffĂ©rents blocs (header, footer…) prĂ©-faits, appliquer toutes ces bonnes pratiques est un jeu d’enfant sur SendinBlue !

Envie d’essayer ? CrĂ©ez votre compte dĂšs maintenant : c’est gratuit jusqu’Ă  300 emails / mois !

Une RĂ©ponse Ă  “Les 7 commandements du design d’email”

  1. Vanessa

    Bonjour
    Quelle taille d’image maximum est acceptĂ©e par sendinblue pour le fond de la newsletter (qui affiche en blanc par dĂ©faut si pas supportĂ©) ?
    D’avance merci pour votre rĂ©ponse.
    Vanessa

Laisser une réponse

Essayez notre plan gratuit jusqu'Ă  300 emails par jour

Pas besoin de carte bancaire. Sans engagement.

Les 7 commandements du design d’email

Temps de lecture : 6 min