juin 19, 2018

Les 7 commandements du design d’email

Reading time about 6 min

« 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 Brevo, 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.

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 Brevo !

Envie d’essayer ? Créez votre compte dès maintenant : c’est gratuit jusqu’à 300 emails / mois !

Prêt à aller plus haut avec Brevo ?

Tous les outils dont vous avez besoin pour communiquer avec vos clients et développer votre entreprise.

Gratuit. Inscrivez-vous !