badsender logo

Prévisualisation email : comment faire ?

05/09/2022

Il est des sujets basiques qui n’ont pas encore été abordés sur le blog de Badsender, ce qui nous laisse encore bon nombre d’articles à réaliser. Parmi ceux-là, je constate que nous n’avons jamais pris le temps de vous expliquer en détail ce qu’est une prévisualisation d’email, à quoi cela sert, et comment la réaliser.

Introduction

La partie « tests » est sans doute l’une des plus importantes de l’intégration HTML. Toute campagne HTML doit être testée avant d’être envoyée au client, notamment pour s’assurer qu’elle s’affiche correctement. Cette étape ne devrait en aucun cas être négligée par l’intégrateur.

Qu’est-ce qu’une prévisualisation d’email ?

Les expressions email rendering (pour rendu email) ou email preview (pour prévisualisation d’email) sont liées et sont employées pour désigner les étapes de prévisualisation du rendu d’un email. Ainsi, l’email preview rend possible le test de l’email rendering d’une campagne.

Ces étapes sont complémentaires, l’email preview précède et confirme (ou corrige si besoin) l’email rendering. En tant que designer, chef de projet/campagne ou intégrateur HTML pour email, nous souhaitons nous assurer du bon rendu graphique de l’intégration HTML de l’email. C’est donc là qu’intervient l’étape de prévisualisation d’email.

prévisualisation email screenshot

Pourquoi est-ce important ?

Parce que vous allez envoyer une campagne email à de nombreux destinataires, et qu’il est important de respecter le travail du designer email et d’afficher un rendu le plus proche possible de ce qui a été designé. Parce que votre image de marque (ainsi que votre crédibilité) est en jeu, qu’il vous faut respecter certains principes d’accessibilité, d’adaptation selon des options activées ou non… et parce que votre N+1 va vous le demander, forcément.

Pourquoi le rendu de l’HTML dans un navigateur ou dans l’éditeur de code n’est pas suffisant…

Sur le site Définitions marketing, nous pouvons trouver la définition suivante :

« L’email rendering désigne la problématique de rendu visuel des messages email au sein des différents outils et services de messagerie côté destinataires d’une campagne. Une des caractéristiques de l’email marketing est le fait qu’un même message puisse donner des rendus visuels différents d’un environnement de lecture à un autre en fonction de l’outil utilisé et de l’email rendering engine, mais également en fonction des différentes configurations d’une même solution. Les tests d’email rendering précédant une campagne permettent de voir comment le code est interprété par les différents environnements, de voir ce que le message donne selon que l’option des affiches des images est activée ou non et de voir éventuellement les aperçus en fenêtre de prévisualisation. »

Définitions marketing

Vulgarisons un peu les choses : chaque solution de messagerie utilise un « moteur de rendu » pour afficher le code HTML. Mais le gap entre les moteurs de rendu utilisés est franchement conséquent. Apple utilisera par exemple WebKit, quand Outlook dans sa version logiciel de bureau pour Windows utilise le logiciel de traitement de texte Word, et que d’anciennes versions d’Outlook utiliseront Internet Explorer.

L’interprétation du code HTML et CSS n’est donc clairement pas la même, et le rendu non plus. Vous ne pouvez donc pas vous fier uniquement à l’affichage de votre fichier HTML dans votre navigateur, car les capacités d’interprétation et de support des langages utilisés ne sont vraiment pas les mêmes. Il n’y a qu’à découvrir l’outil caniemail pour rapidement comprendre que toutes les balises, attributs HTML, propriétés CSS, pseudo-classes, formats d’image ne sont pas considérés de la même façon dans l’email marketing.

Quelles solutions pour une prévisualisation d’email ?

Les plateformes d’email preview

Les platesformes d’email preview sont devenues des alliés non négligeables (voir indispensables) pour s’assurer d’un rendu cohérent et correct sur la majorité des clients email et supports.

Certains de ces outils sont plus ou moins élaborés. Ils développent et proposent des fonctionnalités intéressantes, optimisant sans relâche les campagnes de leurs clients : optimisation du code, inspiration graphiques, reporting, test spam et délivrabilité, optimisation du temps de chargement et du poids des images, rendering instantané… Tout est une question de moyens !

La bataille se joue aussi sur le nombre de rendus délivrés. Quoiqu’il en soit, ces plateformes vous permettront de procéder à des tests d’email preview, le plus souvent :

  • en important un fichier zip comprenant le fichier html et le dossier d’images rattachés.
  • en collant un code HTML avec les images déjà hébergées.
  • en envoyant un BAT depuis votre solution de routage sur une adresse mail test.
  • en renseignant l’url de votre code html hébergé sur un serveur.
Lancer un test d'email preview
Méthodes pour lancer un test d’email preview depuis EmailOnAcid

Passons en revue les plateformes d’email preview les plus connues et incontournables du marché :

Litmus

Il s’agit de LA plateforme d’email preview par excellence. Litmus se démarque par l’ensemble des fonctionnalités qu’elle propose : constructeur par blocs (builder) et tests en temps réel, tests des liens, analyse email, tests des spam, ressources, communauté et forums, innovations…

Litmus a sans aucun doute dépassé le stade de la simple plateforme d’email preview pour devenir un acteur incontournable de l’email marketing. Véritable référence, la marque organise désormais des « Litmus Live » pour partager sur l’email marketing : design, ergonomie, code, nouveautés, optimisation de campagne… Tout (ou presque) y est abordé.

Emailonacid

Email On Acid est une plateforme développée par la société du même nom, qui trouve son siège dans le Colorado. Maintenue par une équipe d’une trentaine de personnes, elle propose sensiblement les mêmes fonctionnalités que sa principale rivale, à savoir Litmus. Cependant, la structure ne s’engage pas dans l’organisation d’événements propres à l’email marketing, mais s’efforce plutôt à mettre à disposition, en plus de l’outil de prévisualisation d’email, des ressources et articles pour aider tout intégrateur d’email dans son travail.

La différence profonde réside dans le fait que le nombre de tests d’email preview est illimité, quelle que soit la formule d’abonnement choisie, là où Litmus s’attache à considérer qu’une seule capture d’écran est un test unique. Croyez-nous, lorsque vous souhaitez générer un seul test sur la majorité des clients mail, le nombre de screenshot de rendu grimpe très vite, et la différence se transforme alors inéluctablement en avantage.

Pourquoi est-ce plus simple de passer par une plateforme ?

Parce qu’une plateforme vous fournira des rendus avec des « options » activées ou non. Prenons le « non-affichage » des images par exemple : Vous n’avez clairement pas le temps de tester sur des boîtes mails réelles, avec ces paramètres activés ou désactivés. D’ailleurs, il ne s’agit pas obligatoirement de paramètres propres au client mail, mais parfois de paramètres « machines », comme le Dark Mode ou le 120DPI.

Prévisualisation email en dark mode
Prévisualisation d’email avec Dark Mode activé

Les plateformes vous font donc gagner un temps précieux en réunissant dans un seul endroit un maximum de rendus possibles, avec certaines options activées, ou non.

Votre solution de routage ?

La plupart des outils d’envoi d’email propose désormais une fonctionnalité intégrée pour vous permettre d’accéder à un ensemble de résultats de prévisualisation email. Parfois, le nombre de résultats accessibles est clairement impressionnant, comme nous le mentionnions dans notre article sur Emarsys et son outil d’Email Builder. Parfois, c’est beaucoup moins conséquent, et cela se limite à trois ou quatre clients mail.

Bien souvent, on remarque que les solutions de routage utilisent directement l’API de Litmus ou d’Emailonacid justement.

La prévisualisation d’email « en réel ».

La méthode à privilégier reste, bien évidemment, le test « en réel » sur supports physiques. Cependant, peu de structures ont les moyens de la mettre en place. En effet, le panel de supports à vérifier est extrêmement large, ce qui demande des investissements conséquents. Pour information, Mike Nelson, de chez ReallyGoodEmails, estime à plus de 15000 le nombre de rendus possibles.

2 email marketing providers x 15 operating systems x 50 email clients x 5 screen sizes x 2 image states = 15,000 potential renderings.

Mike Nelson, RGE co-founder.

Gardons néanmoins à l’esprit que n’importe quel support physique à disposition immédiate ne doit pas être négligé. Il devrait être indispensable de réaliser au moins un test sur une appareil physique : les plateformes d’email preview ne pourront sans doute jamais couvrir l’intégralité de la multiplicité des versions logicielles, des résolutions, des paramètres particuliers de connexion, etc. Elles ne peuvent que difficilement vous donner une estimation du temps passé à télécharger et afficher les images, des coupures ou bogues liés au poids ou à la longueur de l’email testé.

Quand envoyer un test d’email preview ?

Lorsque vous avez fini de développer votre email en code, premièrement. 🙂 Vous pourrez alors lancer un premier test d’email preview. Ensuite, une fois que vous avez importé votre code sur votre ESP, n’hésitez pas à vous envoyer de nouveau un test car les ESP ont tendance, parfois, à modifier votre code HTML ou à ajouter des éléments.

Besoin d’un design system email ? Ou d’un design email tout court ? Ou d’une intégration HTML pour email ? Ou d’un email builder ? On peut aussi vous proposer :

Badsender anime aussi une formation sur le sujet du développement HTML d’un email !

Envie de recevoir la newsletter, les invitations aux lives et autres actus de Badsender par email ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.