Comment créer l’email parfait ? Est-ce qu’il existe des recettes miracles ? Vous vous en doutez, répondre à ces questions est loin d’être facile. Mais nous pouvons quand même vous donner quelques éléments de réponses. Dans ce guide complet (basé sur un article anglophone publié par Campaign Monitor), nous vous proposons une checklist de tous les éléments importants dans le design d’un email : l’objet, le pre-header, la personnalisation, la mise en page, la taille de l’email, les images, les vidéos, les GIFs, l’optimisation pour mobile, les webfonts, les boutons, les liens, le footer, etc.
En contrôlant / optimisant tous ces points, vous avez des chances de vous rapprocher de l’email parfait. Ce guide complet récapitule toutes les bonnes pratiques concernant le design email – point par point.
Même si ce n’est pas à proprement parler un élément de « design », il est impossible de rédiger un guide complet sans parler de l’objet dans la mesure il joue un rôle capital dans le taux d’ouverture. De fait, cela ne sert à rien d’avoir des emails au design impeccable si vos emails ne sont pas ouverts. L’objet de vos emails doit être engageant, personnel et pertinent. Pour ne pas que vos emails soient considérés comme des spams (par les FAI mais aussi par certains de vos destinataires), évitez d’abuser des majuscules, des ponctuations expressives (point d’exclamation et point d’interrogation), et enfin évitez certains mots : les fameux « spam words ».
Faut-il privilégier des objets courts ou des objets longs ? On a souvent tendance à répondre la deuxième réponse. Nous ne sommes pas de cet avis. Si votre objet est trop long, il risque d’être tronqué sur mobile, sur certains navigateurs et sur certains clients emails. Le tableau ci-dessous présente les résultats d’une étude Return Path :
Ce sont les objets entre 61 et 70 caractères qui sont les plus lus par les destinataires, mais c’est la fourchette 41 – 50 caractères qui est la plus utilisée par les expéditeurs. Nous vous conseillons de ne pas dépasser 70 – 80 caractères pour éviter les problèmes d’affichage.
On dit souvent qu’une image vaut mieux qu’un long discours. Ce dicton est particulièrement valable concernant les objets d’email. Plusieurs études ont montré qu’intégrer des emoji / symboles dans un objet d’email avait un impact important sur le taux d’ouverture. Une étude d’Experian a par exemple montré que 56% des entreprises qui utilisaient les emoji dans leurs objets d’email avaient un meilleur taux d’ouverture.
Mais attention, certains clients email ne lisent pas les emoji et les transforment en carré « ☐ « . Autre petite remarque : sur Gmail, les emoji qui apparaissent dans la boîte de réception sont différents de ceux qui apparaissent une fois l’email ouvert. Les premiers ont la forme que l’on connaît tous et les seconds sont les emoji développés par Google. Faites des tests pour vous assurer que l’emoji qui apparaît une fois l’email ouvert transmet le même sentiment que celui qui s’affiche dans la boîte de réception. Emojis Google :
Pre-header
Le pre-header est la phrase qui apparaît juste à côté de l’objet, ou sous lui, dans la boîte de réception. Le pre-header utilise la première ligne utilisée dans le corps de l’email. Comme l’objet, le pre-header joue un rôle important dans le taux d’ouverture. Il permet de donner un aperçu du contenu de l’email. Nous vous conseillons de privilégier les pre-headers courts (entre 40 et 70 caractères) et d’aller droit au but. Le pre-header doit inciter vos destinataires à ouvrir l’email. Nous vous conseillons aussi de faire en sorte que l’objet et le pre-header se complètent. Evitez notamment de répéter dans le pre-header ce qui a été dit dans l’objet.
Les emails utilisant des objets personnalisés ont un taux d’ouverture de 26% supérieurs. Personnaliser un objet passe d’abord par l’utilisation du prénom et/ou nom du destinataire. Par exemple : « Juliette, votre offre exclusive été vous attend ». Mais on peut aller beaucoup plus loin dans la personnalisation, en utilisant d’autres données : le nom de l’entreprise du destinataire (contexte B2B), le dernier achat réalisé ou tout autre information permettant de personnaliser l’email.
La solution marketing tout-en-un pour TPE et PME
Emails marketing
CRM
SMS Marketing
Emails transactionnels
Segmentation client
Marketing Automation
Contextualisation
Le « marketing contextuel » est devenu un terme à la mode. On parle aussi parfois d’humanisation. L’objectif de la démarche, qui prolonge et approfondit la démarche de personnalisation, est de passer d’un emailing one-to-many à un emailing one-to-one.
La campagne emailing de fin d’année de Spotify est un exemple souvent cité. En fin d’année, la plateforme de streaming musical envoie à chacun de ses utilisateurs un récapitulatif complet des statistiques d’utilisation : nombre de minutes écoutées, nombre d’artistes écoutés, nombre de morceaux écoutés, chansons les plus écoutées, etc.
Cette personnalisation / contextualisation des emails permet d’humaniser vos emailings et d’accroître l’engagement de vos contacts.
Contenus dynamiques
Si vous souhaitez aller dans le sens d’une personnalisation de vos emailings, vous pouvez aussi intégrer du contenu dynamique dans le corps de l’email. Vous pouvez par exemple faire en sorte que le contenu de l’email change de manière dynamique en fonction de la typologie du contact. Voici un exemple (Adidas) :
Dans cet exemple, le contenu varie dynamiquement en fonction du sexe du contact. Pour les femmes, c’est la section présentant les vêtements pour femmes qui s’affiche, pour les hommes la section présentant les vêtements pour hommes. Cette technique permet de renforcer la pertinence de vos campagnes et de les rendre plus attrayantes.
Mise en page email
Vous devez recourir à une mise en page qui aide le destinataire de l’email à visualiser immédiatement les éléments importants. Plus largement, la mise en page doit faciliter la lecture et la compréhension de votre email. Cela suppose un travail sur la hiérarchisation des éléments, sur les titres, les images et la structure de l’email. Voici plusieurs exemples de mise en page :
Le modèle « pyramide inversée »
La mise en page peut prendre la forme d’une pyramide inversée. Cette mise en page est très efficace et permet de bien mettre en valeur les éléments de vos emails (headers, images, boutons…) et de les articuler entre eux.
Dans les exemples ci-dessus, le regard des destinataires est guidé vers le bouton CTA, les incitant à cliquer dessus.
Le modèle « Ziz-Zag »
Ce modèle de mise en page est moins utilisé mais très intéressant. Le modèle en Ziz-Zag permet de transmettre beaucoup d’informations sans ennuyer le destinataire. Vous pouvez choisir une couleur par section afin d’accroître la lisibilité et donc l’efficacité de l’email. Ce modèle est particulièrement pertinent quand vous souhaitez présenter plusieurs produits, plusieurs offres ou différentes étapes.
Le modèle « une colonne »
Ce modèle classique fonctionne très bien et est notamment très bien adapté pour une lecture sur mobile. En général, le contenu et les images s’adaptent à la taille de l’écran. Le fait de diviser l’email en plusieurs sections permet d’aider le destinataire à naviguer à l’intérieur de l’email sans effort. Ce type de mise en page, assez simple, permet de bien mettre en avant les informations importantes, de les hiérarchiser et de guider le destinataire vers l’étape suivante.
Taille des emails
Pour que vos emails s’affichent correctement sur tous les clients de messagerie, il est important d’optimiser la taille de vos designs email. Nous avons consacré tout un article à cette question de la taille des emails, article auquel nous vous renvoyons pour plus de détails. Nous en étions arrivé à la conclusion suivante : pour plus de sécurité, mieux vaut opter pour une taille de 640 px maximum, voire de s’en tenir au standard de 600 px. Au-delà, vous risquez de rencontrer des problèmes d’affichage sur certaines messageries.
Si vous utilisez des images dans vos emailings, vous devez garder les points suivants en tête :
Dimension. La plupart des emails ont une largeur comprise entre 600 et 640 px. Toutefois, pour que votre image s’affiche en bonne définition sur les écrans HD, vous devez choisir une largeur double (en l’occurrence 1200 px).
Taille du fichier. Le poids du fichier est un élément important – surtout quand on sait que la moitié des emails sont ouverts depuis un mobile. Plus l’email est lourd, plus il mettra du temps à se charger. Ce qui a un impact important sur l’expérience utilisateur. Utilisez un outil du type TinyPNG pour réduire le poids de vos images.
Balise Alt. Si votre image échoue à se charger, un texte s’affichera à la place de l’image : c’est le texte Alt. Pensez à remplir la balise Alt pour améliorer l’expérience utilisateur en cas de problème de chargement de l’image. Le texte Alt doit refléter le contenu de l’image.
Rôle des images. Les images contenues dans vos emails doivent servir à compléter le texte, à l’illustrer. Les images, dans un email, ont un rôle d’illustration. En clair, il faut que votre email soit compréhensible sans les images.
Les images et la balise Alt
La balise Alt est le texte qui s’affiche à la place de l’image quand l’image n’est pas parvenu à se charger (en raison d’un problème technique ou d’une désactivation des images-. Le texte alt doit décrire en quelques mots le contenu de l’image. Il transmet le message de l’image en cas de non-affichage de celle-ci.
Polices de caractères web (webfonts)
En email marketing, il est particulièrement conseillé d’utiliser des polices web (web fonts) lorsque c’est possible. Cela permet d’ajouter un élément de personnalisation et d’originalité à vos emails. Mais vous devez par contre être conscient que tous les clients de messagerie ne supportent pas toutes les polices. D’où l’importance de tester le rendu de vos emails sur les principaux clients de messagerie en utilisant un logiciel comme Litmus (découvrez comment tester son template email).
L’exemple ci-dessous utilise les polices Clobber, Gotham Book, Gotham Medium et Montserrat (@import + @fontface).
Nous vous conseillons particulièrement la bibliothèque de polices de Google : Google Fonts. Vous y trouverez un très large choix de polices de caractères. Si les web fonts ne sont pas supportées, vous pouvez ajouter des polices de caractères « standards » de repli, en vérifiant au préalable leur compatibilité avec les clients de messagerie. Ces polices seront affichées à la place des webfonts en cas d’incompatibilité de ces dernières. Vous trouverez ci-dessous une liste de polices de repli gérées par les principaux clients email.
Il faut savoir aussi que chaque client de messagerie a des polices préférées ou par défaut qui seront parfois utilisées à la place de vos webfonts (Arial pour Gmail, Times New Roman pour Microsoft Outlook, Helvetica pour Appel Mail). Dans ce cas et si votre webfonts n’est pas gérée par le client de messagerie, c’est la police par défaut qui sera utilisée plutôt que la police de repli. Pour éviter que cela ne se produise, vous pouvez ajouter ce morceau de code CSS dans votre email :
Les espaces blancs sont les zones vides autour de vos paragraphes, images et boutons. Ajouter des espaces blancs suffisamment larges autour de vos éléments de contenus permet d’augmenter le taux de clics sur ces éléments, dans la mesure où ils sont mis en valeur. Cela permet aussi de bien séparer vos éléments et d’améliorer ainsi la visibilité et la compréhension de vos emails.
Comme nous avons déjà eu l’occasion de le rappeler, aujourd’hui plus de la moitié des emails sont ouverts depuis un appareil mobile. Une étude récente de Campaign Monitor affirme que plus de 68% des emails sont désormais ouverts depuis un device mobile. Voici quelques conseils et bonnes pratiques pour optimiser vos emails sur mobile :
Utiliser un template email mobile-friendly (responsive ou hybride).
Choisir un objet court.
Utiliser un pre-header.
Intégrer un bouton CTA clair et facile à cliquer.
Utiliser des images suffisamment grandes.
Utiliser une taille de police suffisamment grande (16 px est une bonne taille).
Si vous codez vos emails, il y a deux approches qui permettent d’optimiser les emails pour le mobile. L’approche responsive, qui fait appel aux media queries et à du CSS, et l’approche hybride qui utilise des mises en page fluides, s’adaptant automatiquement à la taille des écrans, sans media queries.
Il y a trois éléments importants à prendre en compte dans la conception des CTAs pour optimiser leur conversion (c’est-à-dire le taux de clic) :
Le texte : il doit être clair et insister sur les bénéfices. Il faut que la personne comprenne tout de suite ce qu’il se passera en cas de clic et l’intérêt qu’elle a de cliquer. Privilégiez les verbes d’action. Par exemple : « S’abonner », « S’inscrire », plutôt que « En savoir plus » ou « Plus de détails ».
Le design : le bouton doit être suffisamment gros, pour être visible et pour qu’il soit facilement cliquable depuis un appareil mobile (hauteur conseillée : 50 px). Vous devez utiliser une couleur qui tranche avec celles utilisées dans le reste de l’email (ou au moins avec les couleurs environnantes), pour bien le faire ressortir. Vous pouvez utilisez un effet « hover » pour vos CTA (qui permet de changer la couleur du bouton quand on le survole) : cette technique est supportée par la plupart des clients de messagerie.
L’emplacement : le bon emplacement dépend de la complexité de votre offre. Si votre offre est complexe, il peut être plus pertinent de l’expliquer avant de placer le CTA. Dans l’idéal, entourez votre CTA d’espaces blancs.
Le nombre de boutons CTAs dans votre email dépend du nombre d’actions possibles. N’hésitez pas à intégrer deux CTAs différents dans votre email, un CTA principal et un CTA secondaire. Mais dans ce cas, veillez à faire en sorte que le CTA principal ressorte plus que le CTA secondaire – en jouant sur les couleurs notamment. Par contre, évitez d’intégrer plus de 2 CTAs (sauf si vous proposez plusieurs offres/produits) et évitez également d’intégrer plusieurs fois le même CTA. Cela risque de diluer le poids et la visibilité de vos CTAs.
Dernier conseil : dans la mesure où les images sont parfois bloquées par les clients email, évitez de créer des boutons sous forme d’images.
Liens
Vérifiez tous les liens contenus dans votre email, sur desktop et sur mobile. Vérifiez notamment qu’ils redirigent correctement vers la page, et vers la bonne page. Si vous avez intégré des balises de tracking UTM, vérifiez qu’elles fonctionnent bien. Vérifiez aussi les couleurs de vos liens sur les différents clients de messagerie. Sur Apple Mail, les liens apparaissent automatiquement en bleu. Si vous souhaitez éviter cela, vous pouvez utiliser ce code CSS :
La lecture de vidéos directement dans un email n’est pas possible sur tous les clients de messagerie. Il n’est pas possible de lire une vidéo dans Gmail ou Outlook par exemple. Par contre, plus de la moitié des clients de messagerie supporte le HTML5. Il existe donc une alternative : intégrer la vidéo dans l’email sous la forme d’une image statique avec un bouton « play » qui redirige vers la plateforme hébergeant la vidéo. Vous pouvez aussi, à la place de la vidéo, utiliser un GIF animé.
GIFs
Si vous souhaitez intégrer des contenus animés dans vos emails, les GIFs sont une bonne alternative à la vidéo. Mais pour ne pas trop alourdir votre email, mieux vaut ne pas abuser pas des GIFs et les utiliser uniquement là où ils apportent quelque chose. Privilégiez des GIFs courts. Essayez de faire en sorte que le poids du fichier ne dépasse pas les 1 – 1,5 Mo.
Vous devez utiliser un langage, un vocabulaire, un ton en adéquation avec votre cible. Nous vous conseillons d’envoyer votre email à deux ou trois collègues avant de diffuser votre campagne auprès de votre liste de contacts, pour vérifier qu’ils ne comportent aucunes erreurs de grammaire, de conjugaison, de typographie, etc.
A/B Testing
L’A/B Testing peut être utilisé pour tester de nombreux éléments de votre email. Evidemment, vous ne pouvez pas tout tester. Nous vous conseillons de vous concentrer sur l’objet. Si vous ne deviez faire qu’un A/B Test, c’est sur cet élément que vous devez vous focaliser. La plupart des logiciels de messagerie intègrent une fonctionnalité d’A/B Testing.
Voici quelques variables intéressantes que vous pouvez tester sur votre objet :
La longueur. Objet court VS Objet long.
La personnalisation. Testez par exemple si le fait d’intégrer le prénom ou le nom de vos contacts dans l’objet de l’email a un impact sur le taux d’ouverture.
Les promotions. Testez plusieurs types de promotions, pour identifier celle qui fonctionne le mieux. Par exemple : Livraison Gratuite VS 15% de réduction.
Footer (pied d’email)
Voici les éléments que vous devez ou pouvez intégrer (selon les cas) dans le pied de votre email (footer) :
Les informations légales : l’adresse de votre entreprise, le lien de désinscription, et éventuellement les termes et conditions d’utilisation.
Les liens sociaux : même si très peu de personnes cliqueront sur les liens sociaux, il est bon de montrer à vos contacts que vous êtes présents sur les réseaux sociaux (Facebook, Twitter, Instagram…) en intégrant les boutons associés à ces médias. Pensez à bien distinguer les boutons de partage et les boutons redirigeant vers vos pages social media.
Un lien vers votre application mobile, si vous en avez une.
Un lien vers votre support / service client. Si vous utilisez un email « noreply@ », vous devez donner la possibilité à vos destinataires d’entrer en contact avec vous. Dans l’idéal, intégrez un lien invitant les personnes à donner leur feedback.
Design Email : la Checklist
Nous avons fait à peu près le tour de tous les points importants à prendre en considération dans la conception de vos campagnes emailing. Pour conclure, voici un récapitulatif des principaux conseils contenus dans ce guide :
Pour aller plus loin Si le sujet de l’emailing vous intéresse, je vous invite fortement à parcourir ces articles :
Passionné par le digital et les nouvelles technologies, j'écris régulièrement sur ces sujets tout en travaillant comme business developper. Un peu geek, j'aime découvrir les nouvelles tendances numérique et essayer les nouveaux software.
Laisser un commentaire