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 !

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