Comment soigner le design de votre template email ?

Comment soigner le design de votre template email ?

Dans les séquences précédentes, vous avez mis en place votre formulaire d’abonnement et rédigé votre message de bienvenue.
Avant de finaliser le processus d’abonnement de votre newsletter, il reste un dernier point à étudier : la création et l’optimisation du design de votre template email au service de votre image de marque. C’est l’objectif de cette séquence.

Module 3 > Étape 4 pour pour déployer une stratégie d’emailing efficace : réussir le design de votre template email

Un design d’emails avec ou sans template ?

⇒  Envoi d’email sans l’utilisation d’un template

Au format HTML « simplifié »

Ce type de présentation ne fait appel qu’à une mise en page minimaliste.

 marketing bienveillant

Ici, je ne vous parle pas du format texte, mais du format HTML simplifié, c’est-à-dire sans graphisme ou autres blocs de personnalisation (colonnes, boutons, séparateur, etc.).

Le format HTML étant maintenant supporté par les principaux clients de messagerie, le format texte seul n’a plus lieu d’être. Et comme je vous le disais précédemment dans le cours sur la délivrabilité, tous les outils d’emailing sérieux génèrent automatiquement une version « texte brut » pour chaque campagne d’emailing envoyé au format HTML.

éditeur HTML

Avec un éditeur HTML, vous pouvez, bien entendu, ajouter à votre message des éléments de personnalisation tels que des images ou autres. Mais du moment que vous travaillez votre message avec des éléments en « glisser-déposer », vous réalisez en quelque sorte un template (ce que nous verrons après)

Avantages

  • Mises en forme HTML simples (gras, italique, couleurs, police, liens hypertextes)
  • Bonne délivrabilité en ce qui concerne les filtres antispam

Inconvénients

  • Aucun design au service de l’image de marque.
  • Lien hypertexte au lieu d’un « Call To Action » sous forme d’un bouton.

À première vue, les inconvénients de cette solution l’emportent sur les avantages.
Néanmoins, même si cette présentation d’emails ne permet pas une mise en forme cohérente avec votre charte graphique, elle a le gros avantage d’offrir un ton amical vos envois (quand un ami vous écrit un email, il n’utilise pas de template…).

Exemple d’un de mes emails envoyés sans l’utilisation d’un template. Sans template, il est tout à fait possible d’envoyer un emailing clair et bien présenté.

 email sans template

Pour l’instant, mis à part l’email de bienvenue, toutes mes campagnes d’emailing sont construites d’un seul bloc, sans template, donc sans header (logo…) et sans footer. C’est un choix qui pour certains peut paraître une solution peu professionnelle.
Personnellement, j’ai privilégié le côté amical… Je pense, mais je peux me tromper, que mes abonnés se familiarisent avec mes messages (le fond) sans faire appel à un template (la forme)…
Notez toutefois qu’automatiquement en bas de page (footer), un lien de désinscription est généré (c’est une obligation).

Alors, quoi choisir ? Des envois avec template ou non ?

Il est préférable, pour vous, d’opter pour une solution professionnelle avec un template si vous  privilégiez une mise en forme cohérente avec votre image de marque (identification de vos couleurs, de votre univers).
C’est par exemple votre cas si vous êtes un centre de formation ou une entreprise comprenant plusieurs personnes.

Dans ce cas, je vous conseille vivement de bien lire la suite…

⇒  Envoi d’email avec l’utilisation d’un template

Qu’est-ce qu’un template email ?

Un template d’email est un modèle de courrier électronique pré-formaté. Ainsi, en créant votre template d’email, vous allez pouvoir :

  • Gagner du temps
    Au lieu de repartir d’un email vierge, vous aurez juste à intégrer votre nouveau contenu pour chaque nouvel envoi.
  • Maintenir une cohérence graphique
    Chacune de vos campagnes d’emailing aura toujours le même design.

Pourquoi choisir un design épuré ?

En utilisant un template, vous avez la possibilité de présenter l’identité visuelle de votre entreprise. Néanmoins, il faut trouver un compromis pour éviter :

  • les risques de non délivrabilité (filtres antispam) ;
  • un affichage non conforme sur les supports mobiles.

Pour pallier ces deux inconvénients, le web voit fleurir de nombreux templates avec un design épuré, responsive, sur une seule colonne.

 template email

Influencée par des webdesigners américains, cette tendance ne cesse de s’amplifier, et ce pour deux raisons :

1 – Confort de lecture pour les lecteurs pressés

Considérant que les lecteurs n’accordent que peu de temps à la lecture de leurs emails, votre message doit aller à l’essentiel, être clair et facile à lire.

Le design doit être utilisé pour guider son contenu et non le contraire.  Donc au lieu de choisir un design élaboré qui submergera vos lecteurs par de nombreux éléments visuels, il est préférable d’opter pour la simplicité.

2 – Affichage optimisé sur tous les supports

En visionnant les nombreux templates proposés par les services d’emailing, on peut être tenté de choisir une structure sophistiquée sur plusieurs colonnes, avec de belles images et icônes. Pour finalement s’apercevoir (ou non) que vos emails ne s’affichent pas correctement sur certains smartphones. 

 design email simple

En privilégiant un template sur une seule colonne, l’affichage ne sera pas modifié selon la taille des écrans. Pour s’assurer un bon affichage sur les supports mobiles, la simplicité n’est plus une tendance, mais une nécessité !

 design email sophistiqué
Exemples de design email sophistiqué à éviter
Important !
En règle générale, construisez chaque bloc (section) de votre template sur une colonne. Néanmoins, cette règle n’est pas à prendre au pied de la lettre. Par exemple, vous pouvez très bien utiliser une section en deux colonnes pour vous présenter personnellement (photo + description).

Comment optimiser le design de votre template emails ?

La composition d’un template

Un template est composé de trois parties :

  • Un en-tête
  • Le corps du texte
  • Un pied de page

Dans chaque partie, il y a des éléments indispensables à mettre en place et à optimiser.

 structure d'un template email

Optimisez l’en-tête

L’en-tête est composé de deux éléments très utiles :

Le pré-header

Le pré-header d’un email est la première ligne textuelle d’un email qui s’affiche dans le contenu après l’objet.

 pré-header

Comme nous l’avons vu, son objectif est de capter l’attention avant même l’ouverture d’un mail.

Imoortant !

Le pré-header doit clairement indiquer le contenu de votre email en respectant certaines règles de base :

  • Rédigez-le différemment pour chaque email commercial ou pour l’envoi d’une newsletter spécifique (nouveauté, événement).
  • Il doit être informatif et/ou incitatif tout en étant complémentaire à l’objet du message.

Il doit être court et attractif. Utilisez un maximum de 34 caractères (exemples : Outlook 2013 ou en mode portrait sur un iPhone) pour être visible sur toutes les messageries.

Exemples :

>> Informer vos lecteurs sur l’apparition d’un nouvel article sur votre blog
Objet : « Comment réussir votre projet web » ⇒ titre d’un article de blog
Pré-header : « Découvrez notre nouvel article » ⇒ Incitatif

>> Informer vos lecteurs d’un événement spécifique
Objet : Nouvelle webconférence
Préheader : « rendez-vous le 10 juin avec nos experts » ⇒ incitatif et informatif

Pour attirer l’attention, vous pouvez aussi :

  • Ajoutez une touche d’humanité en ajoutant le prénom de votre destinataire dans le pré-header. Exemple : Thierry, lisez ce nouvel article.
  • Ajoutez un verbe d’appel à l’action pour susciter un sentiment d’urgence
    Exemple : « profitez de notre série limitée » ou « Ouvrez cet email et profitez de … »  
Retenez...

Couplé avec l’objet, le pré-header est un véritable élément pour améliorer le taux d’ouverture de vos emails.

Je vous recommande de bien travailler ce duo : objet/pré-header Première ligne qui se complète.
Trouvez les bons termes pour que vos abonnés ouvrent votre mail tout en respectant votre promesse pour ne pas les décevoir.

La version en ligne ou page miroir

Une page miroir est une page web qui contient tout le contenu d’un email marketing. Dans l’email envoyé, cette page miroir est accessible via un lien permettant aux lecteurs de lire l’email directement sur le Web.

De nos jours, étant donné que le code HMTL s’affiche correctement sur les différentes messageries, peu de personnes cliquent sur ce lien. Néanmoins, pour plus d’assurance, ce lien garde toute son utilité dans le cas où votre lecteur a un souci pour visualiser votre e-mail sur sa messagerie.

Optimisez le pied de page

Automatiquement, un lien de désinscription sera présent dans le pied de page de vos emails. En complément, vous pouvez y insérer :

  • Les liens vers vos différents réseaux sociaux pour élargir votre audience.
    Ces liens doivent être assez visibles pour inciter à l’action sans être intrusifs.
  • Les coordonnées de votre entreprise pour rassurer vos lecteurs.
 footer design template

Optimisez le corps du texte

Le logo

Le logo est la pièce maîtresse de votre identité graphique. Permettant à vos abonnés de vous identifier, il doit être placé en premier lieu et visible d’un coup d’œil.

Si vous n’avez pas encore de logo, vous avez :

  • 99designs : création d’un logo sur mesure, de qualité professionnelle
  • GraphicRiver : création d’un logo préconçu et de bonne qualité
  • Logaster : pour créer son logo à petit prix
  • Logo Garden : pour créer son propre logo gratuitement

Note : si vous avez d’autres ressources à nous proposer, n’hésitez pas à nous les partager en commentaire.

La visibilité de vos blocs d’information

Votre service d’emailing vous propose plusieurs solutions en « glisser-déposer » pour structurer votre template email.

Pour rendre vos blocs d’information facilement identifiables, vous avez deux solutions très simples :

  • L’ajout d’une ligne de séparation entre les sections
  • L’ajout d’une couleur de fond
 blocs pour construire design

L’ensemble de votre contenu au service de votre image de marque

Pour créer un ensemble harmonieux, une identité visuelle simple et esthétique de votre template, soignez tout particulièrement :

1 – Vos titres mis en relief pour une meilleure visibilité

  • Utilisez l’une des couleurs de votre logo
  • Accentuez la visibilité de vos titres (taille de caractères, en gras)
 template email evernote

Exemple de template email : Evernote

L’ensemble du contenu est décliné en fonction du logo :
Titre et « call to action » à la couleur du logo

2 – Vos Call To Action (CTA) facilement reconnaissables et cliquables

  • Insérez vos principaux CTA sous forme de boutons, pour qu’ils soient pratiques à cliquer sur un écran tactile (tablette, smartphone).
  • Utilisez une couleur de fond, soit identique à celle utilisée pour les titres soit une autre couleur qui ressort par rapport au contenu.
  • Faire des boutons de tailles visibles, mais pas de taille démesurée.
  • Utilisez des verbes d’action du type : « Découvrez », « Inscrivez-vous gratuitement », et n’hésitez à donner un sentiment d’urgence : « Essayez maintenant », ou de rareté : « Valable jusqu’au… »

3 – Vos images ⇒ bien dimensionnées et cliquables

 template email au couleur du logo

En complément de votre logo, vous pouvez insérer une ou plusieurs images/photos.
Je vous conseille d’en inclure deux au maximum :

  • L’une pour présenter votre article
  • L’autre pour vous présenter

Note : la dernière section de l’exemple ci-contre est construite sur 2 colonnes.

  • Prenez l’habitude de mettre vos images à la bonne taille directement : pour qu’elles se chargent plus rapidement (600 px maximum de largeur).
  • Préférez le format PNG pour votre logo et le format JPEG pour vos photographies.
  • N’oubliez pas de renseigner la balise « Alt » pour chacune d’entre elles. Dans le cas où vos images ne s’afficheraient pas correctement, c’est ce texte alternatif qui s’affichera.
  • N’oubliez pas de rendre vos images cliquables (comme un « call To action ») car les internautes cliquent souvent sur celles-ci !

4 – Vos textes courts, visibles et aérés.

  • Optez pour une police standard (Verdana, Arial, Tahoma…) pour garantir un affichage optimal sur les supports de vos destinataires.
  • Utilisez deux polices maximum (l’une pour le texte et l’autre pour les titres).
  • Écrivez des textes concis, et allez droit à l’essentiel.
  • Écrivez de petits paragraphes et aérez vos textes (espace vide, liste à puces).

6 ressources pour améliorer le design de votre template d’emailing

Pour vous aider à réaliser votre template email, voici ci-dessous une sélection de ressources qui proposent de nombreux exemples de templates emails. En parcourant ces sites web, l’inspiration graphique viendra…

1 – Canva

 template email

Vous connaissez Canva pour toutes ses ressources graphiques, un outil en ligne qui mérite toute sa place dans votre boîte à outils numériques.
Et bien, figurez-vous que ce site propose aussi de nombreux designs originaux de template email.
>> Visitez Canva

2 – Really Good Emails

 template email

Ce site présente des milliers de templates d’emails avec les codes HTML de chaque modèle. Classés par catégorie, vous allez découvrir de belles ressources pour trouver de l’inspiration.
La variété et la qualité des designs sont au rendez-vous !
>> Visitez Really Good Emails

3 – Behance

 template email

Créé en 2006 et  rattaché à Adobe, Behance est le premier réseau social créatif au monde. De nombreux designers exposent leurs créations…
Dans la barre de recherche, tapez « template email » puis cliquez dans le menu sur « projet ». Vous y trouverez des centaines de templates de designs email.
>> Visitez Behance

4 – Beautiful Email Newsletters

 template email

Cette plateforme propose des templates email HTML classés dans de nombreuses catégories.
Certains de leurs modèles sont sobres, simples et donc faciles à reproduire en « glisser-déposer » dans votre service d’emailing.
>> Visitez Beautiful Email Newsletters

5 – Themeforest

 template email

Surtout très connu pour ses thèmes WordPress, Themeforest offre une bibliothèque de design email bien fourni. Pour faire vos recherches, cette plateforme vous propose un filtrage par catégories, par note, par contributeurs et par popularité.
Encore plus de 1000 templates email à découvrir qui pourraient répondre à vos attentes.
>> Visitez Themeforest

6 – Pinterest

 template email

Et, je vais finir avec Pinterest qui va lui aussi vous permettre d’accéder à des centaines de modèles de templates.
Tapez par exemple « email design » ou « email design inspiration », puis naviguez à travers les tableaux de ce réseau social. Vous y trouverez des designs de newsletters et des designs promotionnels.
>> Visitez Pinterest

Note : sur le web, il existe bien d’autres ressources de templates email. Mais j’ai préféré vous faire une sélection…. Je pense que vous en avez bien assez pour trouver la bonne inspiration. Non ?

Finalisez votre processus d’abonnement à votre newsletter

Pour finaliser le processus d’abonnement de votre newsletter, vous devrez :

⇒ Créer un template d’email

Je vous conseille de la réaliser la plus simplement possible, comme nous venons de le voir.

 template email
Un design email simple et sobre

Rédiger l’objet de votre message

Exemple : [News] Bienvenue sur Nom de votre entreprise 

Rédiger le pré-header

Exemple :  Merci [Prénom] de vous être abonné

 marketing bienveillant

N’hésitez pas à inclure le prénom comme champ de personnalisation dans le pré-header. Votre nouvel abonné se sentira privilégié.
Dans ce message de bienvenue, je vous conseille d’insérer un appel à l’action vers une offre gratuite (exemple : une formation gratuite).

C'est à vous...

Votre processus d’abonnement :

Réalisez et sauvegardez deux templates

1. Selon la méthode dite des “deux objectifs complémentaires”
2. Un template simple pour votre message de bienvenue

Créez et activez votre processus d’abonnement en ajoutant votre email de bienvenue (en envoi immédiat) dans le scénario automatisé.

 newsletter performante

Si vous avez suivi assidûment toutes les étapes de cette méthodologie, Bravo !
Vos visiteurs vont pouvoir recevoir une belle et performante newsletter de votre part.

Dans le cours suivant, nous verrons comment rédiger un email commercial qui convertit….

< Étape 3/6 : Rentabilisez votre newsletter intelligemment

Étape 5/6 : rédigez un email commercial >

Ne manquez plus rien !

Devenez Membre Privilégié

de Marketing Bienveillant

Je télécharge mes 16 guides gratuits

Thierry Dubois

Thierry Dubois

Stratégie Digitale l Conseil et Accompagnement
Objectif : vous accompagner à valoriser votre expérience, votre savoir-faire et à générer un flux continu de clients qualifiés grâce au Web.

Laisser un commentaire