Litmus Live : garder un design d’e-mail pertinent

Avec en moyenne 333 milliards d’e-mails envoyés chaque jour, l’e-mail marketing devient un terrain très concurrentiel. Comme l’e-mail coûte peu, il n’est pas près de disparaître. Si vous ne l’avez pas encore fait, il est donc temps d’apprendre à créer des e-mails de qualité.

Au-delà du nombre de concurrents, les spécialistes de l’e-mail marketing rencontrent d’autres défis sur leur route.

Les défis actuels des spécialistes de l’e-mail marketing

• Plus de clients de messagerie et d’appareils que jamais. Selon Statista, le nombre d’utilisateurs de l’e-mail en 2022 est d’environ 4,3 milliards. Autrement dit, une multitude d’appareils et de clients de messagerie auxquels il faut s’adapter.
• La lassitude face aux e-mails et une attention en baisse.
• Les préférences des utilisateurs, comme le mode sombre. En 2020, une étude d’Android Authority a montré que près de 82 % des utilisateurs d’Android préfèrent le mode sombre.
• Des robots automatiques trient et filtrent les boîtes de réception.
• Le spam et les e-mails de phishing sont en hausse. Selon Statista, en septembre 2021, environ 88,88 milliards sur 105,67 milliards d’e-mails étaient du spam.
• Les pare-feu bloquent ou modifient les e-mails par défaut.

Et ce n’est que le début de la liste. Il ne faut pas pour autant y voir un obstacle à une campagne e-mail efficace. Au contraire : c’est l’occasion pour les marketeurs de développer leurs compétences et de créer des contenus de premier ordre.

3 principes de design d’e-mail à respecter absolument

Le design d’e-mail repose sur trois piliers :

• L’accessibilité.
• L’adaptabilité (responsive).
• L’esthétique.

Voyons chacun d’eux de plus près.

L’accessibilité. Jusqu’ici, un e-mail accessible voulait surtout dire des balises alt, un contenu facile à parcourir et des polices lisibles, de taille suffisante. Aujourd’hui, on attend aussi de l’e-mail de la concision, une hiérarchie claire, un contraste optimal et un bon usage des espaces vides.

L’adaptabilité. Autrefois, l’exigence principale pour un e-mail responsive était de se redimensionner et de s’afficher correctement sur des écrans de différentes résolutions. Avec l’évolution de l’e-mail marketing, de nouvelles exigences sont apparues. Désormais, les e-mails doivent tenir compte du mode sombre, du blocage des images et d’un affichage optimal sur mobile.

L’esthétique. N’oubliez pas qu’en plus d’attirer l’œil, un e-mail doit être un produit à part entière.

Avant de passer au design, faites un audit de vos plateformes e-mail

Les plateformes e-mail évoluent si vite aujourd’hui qu’il est facile de se laisser distancer. Et ce ne sont pas seulement les plateformes qui avancent : votre entreprise aussi. Si elle attire beaucoup de nouveaux abonnés, ceux-ci peuvent changer la donne de votre e-mail marketing : par exemple, utiliser un autre client de messagerie que celui auquel vous êtes habitué, ou préférer le mobile à l’ordinateur. Tous ces facteurs peuvent avoir une influence directe sur le design de vos e-mails.

Pour suivre ces évolutions, les spécialistes de l’e-mail marketing devraient réaliser chaque année un audit afin de :

• Identifier les principaux clients de messagerie.
• Suivre la répartition entre utilisateurs sur ordinateur et sur mobile.
• Suivre la répartition entre adresses de messagerie gratuites et adresses professionnelles.

Exemple d’audit

Imaginons que vous travailliez dans le B2B et qu’après un audit, vous constatiez que la plupart de vos utilisateurs :

• utilisent Outlook ou Gmail comme client de messagerie.
• ont une adresse e-mail professionnelle.
• lisent leurs e-mails sur ordinateur.

Dans ce cas, voici quelques points à prendre en compte pour le design :

• Donnez la priorité aux clients de messagerie sur ordinateur. Cela ne veut pas dire qu’il faut oublier complètement le mobile. Il s’agit simplement de soigner tout particulièrement la version ordinateur de vos e-mails pour la rendre irréprochable.
• Les pare-feu (blocage des images). Malheureusement, vous n’avez aucune prise sur cette situation. Le meilleur conseil est donc de créer des e-mails qui restent compréhensibles même sans les images.
• Les clients qui rendent mal le CSS. Les couleurs, les tableaux, les boutons et d’autres éléments de l’e-mail peuvent s’afficher autrement que prévu. C’est un point essentiel à prendre en compte lors de la conception d’un e-mail.

Ce qu’il faut garder en tête pour concevoir des modèles d’e-mails HTML

Les tableaux : penser à l’intérieur de la boîte

Les tableaux sont la base d’un design d’e-mail robuste et responsive, car ils offrent :

• le rendu le plus régulier d’un client à l’autre (par rapport aux floats, aux paddings, aux marges et à l’alignement). L’information est plus facile à assimiler quand elle est présentée sous forme de tableau. Imaginez l’exemple ci-dessous sans ses barres horizontales : il serait difficile de s’y retrouver dans l’e-mail.

• une conception et un contrôle plus faciles sur mobile : les colonnes se replient en lignes. Contrairement au CSS, les tableaux HTML fonctionnent bien dans les clients de messagerie et ne transformeront pas votre belle mise en page en tout autre chose.

L’optimisation du texte

Bonne pratique : évitez de faire passer du texte et des boutons par des images. Les images sont souvent bloquées ou ne se téléchargent pas. Si vous associez texte et image, l’offre principale reste lisible même si l’image est bloquée. C’est le meilleur moyen de toucher le plus grand nombre de clients.

De plus :

• les media queries ou le redimensionnement automatique aident à mieux afficher le texte sur mobile.
• les boutons HTML s’adaptent au mode sombre et ressortent mieux que des images.

Dans le premier exemple, les utilisateurs peuvent toujours lire l’offre, s’y intéresser et se rendre sur le site pour en savoir plus. Dans le second, c’est impossible : ils perdent toute chance de découvrir l’offre et d’acheter. Tout le monde y perd, l’utilisateur comme l’entreprise.

Quels types d’images utiliser dans votre modèle d’e-mail

Les PNG

C’est un format d’image très utile pour un design innovant et pour contourner un CSS imprévisible.

Il permet des effets de style comme :

• La transparence et les dégradés

• Les ombres portées

Les images PNG peuvent aussi être découpées pour séparer les sections de l’e-mail, notamment pour assurer la transition entre différentes couleurs de fond.

C’est utile pour créer une séparation visuelle, mettre en valeur une information et améliorer la lisibilité.

Les GIF ne sont plus un format à éviter :

• ils sont préférables au Flash, que les clients de messagerie n’ont jamais pris en charge et qui a d’ailleurs complètement disparu.
• les boucles créent une animation fluide. Si tout est bien fait, les utilisateurs ne remarqueront même pas que le GIF se répète.
• moins de couleurs = des fichiers plus légers, donc des e-mails qui se chargent plus vite.

Les illustrations numériques sont elles aussi incontournables en design d’e-mail en 2022. Une illustration numérique est une œuvre créée avec des outils numériques. Ne les confondez pas avec des photos retouchées : les illustrations numériques sont créées de zéro.

Elles présentent les avantages suivants :

• polyvalentes, elles se redimensionnent, se modifient et se réutilisent facilement. Résultat : vous passez beaucoup moins de temps à créer les visuels de vos e-mails.
• elles transmettent l’identité de marque quand les éléments CSS sont imprévisibles. Un élément CSS peut changer de couleur (et ruiner votre idée de départ), alors qu’une illustration numérique reste identique, quel que soit le client de messagerie de vos abonnés.

Pour tirer le meilleur parti des illustrations numériques, suivez ces conseils :

• Stylisez-les avec une ombre portée, un contour ou une marge intérieure (pour un JPEG). Votre illustration numérique paraîtra plus réaliste.
• Choisissez des couleurs moyennes pour que les images ne se fondent pas dans le mode sombre. Elles seront ainsi superbes, quel que soit le mode dans lequel l’abonné lit votre e-mail.

Le CSS (Cascading Style Sheets, ou feuilles de style en cascade) est une partie du code des e-mails HTML qui sert à modifier leur design : polices, couleurs, marges intérieures, etc. C’est un outil très pratique mais délicat : dans certains clients, le CSS peut mal s’afficher et transformer votre e-mail en tout autre chose, comme dans l’exemple ci-dessous.

Soyez donc prudent et testez vos e-mails contenant du CSS dans différents clients de messagerie pour éviter les mauvaises surprises.

À retenir

• Donnez la priorité aux besoins des clients de messagerie de vos abonnés et concevez en conséquence. Ne perdez pas de temps sur ce qui s’avère inutile.
• Optimisez votre temps et vos ressources (créez des modèles robustes pour les cas d’usage récurrents). Vous libérerez ainsi du temps pour d’autres tâches importantes.
• Accueillez les changements de paradigme de l’e-mail, comme le responsive et le mode sombre, et adaptez-vous. Il faut vivre avec son temps pour que vos e-mails restent pertinents.
• N’hésitez pas à former vos équipes de développement et de design : vous leur apportez des informations et une expertise essentielles. N’oubliez pas que vous avez tous le même objectif et que vous devez travailler ensemble pour l’atteindre.

Litmus Live est une conférence marketing de 2 jours qui réunit de très nombreux experts du marketing digital. Nous avons pris des notes pendant l’intervention d’Ali Mahad, « Accessible, Responsive, and Beautiful Email Design in 2022 », y avons ajouté quelques chiffres et idées de notre cru, et en avons tiré un article pour vous aider à vous repérer dans l’univers du design d’e-mail.

Créez un modèle d’e-mail dans Blocks et essayez ces techniques !

Pour en savoir plus sur d’autres conférences et salons consacrés à l’e-mail marketing, lisez notre article sur les conférences d’e-mail marketing de 2023 à venir.