Quand le géant Adobe implémente le pre-header de ses emails de manière disons originale, je ne résiste pas à la tentation de vous en faire le décryptage… Car celles et ceux d’entre vous qui veillent sur le sujet de l’emailing l’ont peut-être déjà remarqué (ou pas), mais l’éponyme éditeur de logiciels multimédia a une technique d'implémentation de son pre-header que l’on pourrait qualifier de « in-house » tellement elle me semble inhabituelle !
Ce qui m’a alerté il y a quelques mois _ suite à la lecture de plusieurs newsletters d'Adobe qui portaient la même signature _ c’est de constater que le pre-header, bien que remplissant tout à fait sa fonction (consistant pour rappel à compléter l’objet d’un email afin d’en optimiser le taux d’ouverture), affiché par ma messagerie était différent du premier élément textuel de l’email reçu !
Du coup, je suis allé jeter un coup d’œil dans le code source de la newsletter diffusée par l'éditeur et quelle ne fût pas ma surprise… Car non seulement Adobe a mis un certain moment avant de prendre conscience de l’efficience du preheader… Mais voilà qu’il use d’une technique tout à fait originale dans sa mise en œuvre !
J'ai décortiqué pour vous la recette utilisée par les équipes d'Adobe en charge de la diffusion des contenus électroniques de type newsletter et emailing. Allons-y !
Un preheader différent du premier élément textuel de la newsletter... mais bon sang, comment c’est possible ça !
Les marketeurs et gestionnaires de campagnes d’email marketing ont l’habitude d’utiliser le pre-header pour compléter l’objet de leur email, car oui, qui saurait se passer d’un élément gratuit et facile à mettre en place, qui permette une potentielle optimisation du taux d’ouverture de sa e-campagne !!
En effet, on a l’habitude de voir le pre-header d'un email (sur Gmail, Outlook, Inbox..) reprendre à l'identique tout ou partie de la première phrase présente dans le corps du message, comme le montre parfaitement la capture d'écran ci-dessous.
Le pre-header reprend usuellement la première ligne de texte d'un email et la tronque selon sa longueur
Le preheader est placé dans une balise div placée juste après la balise body de la newsletter. Une class display:none est appliquée à cette même balise.
Afin de parer à toute mauvaise interprétation du code css appliqué à la balise du pre-header _ et oui, certaines messageries sont particulièrement pernicieuses en la matière _ le responsable de la production html de la newsletter a trouvé la parade… Il a tout bonnement choisi une taille de police de 1 pixel, d’une couleur identique à celle du « background »…
Disons que là, il limite sérieusement les risques et s’assure à 99,9% que le preheader sera bien affiché dans l’aperçu de la messagerie et non dans l’email :)
Bien joué… C’est simple mais très astucieux. Mais interrogeons-nous sur le bienfondé de cette technique, qui en soi, est tout à fait louable…
Adobe masque le texte du pre-header en utilisant du code css : résultat, la première phrase diffère du preheader !
Interrogeons-nous : en quoi cette utilisation « décalée » du pre-header serait-elle (plus) efficace ?
Étant donné que très souvent, le pre-header est placé en tant qu’élément textuel dénué de lien html (quoique : de plus en plus, le call to action est aussi placé en tant que lien http sur le preheader), je ne vois pas bien en quoi l’utiliser ainsi est une approche plus pertinente que de le laisser visible !
Mais non, je vois bien un intérêt à bien y réfléchir… Plus besoin de placer le logo avant le pre-header..
Mais à bien y réfléchir, je vois un intérêt unique et plausible à mettre en application cette méthode… Car souvent le logo de l’annonceur est le premier élément de la newsletter côté client et code source.
Du coup, c’est le lien de cet élément qui est affiché en tant que pre-header… et ça donne quelque chose de ce type dans le webmail de votre prospect… Peu mieux faire non !
Lorsque l'utilisation du pre-header est méconnue, le lien http du logo apparaît au lieu d'un contenu pensé pour accrocher
En revanche, en plaçant le texte caché juste avant le logo, on pilote ainsi le pre-header à sa guise et ce n’est pas le code source html dudit logo qui s’affiche en tant que complément de luxe à l’objet de l’email mais bien le pre-header que l’on a savamment rédigé…
Comme si de rien n’était, votre logo, bien que placé en tout premier dans votre email, ne vient pas se substituer au pre-header… C’est bien vu ça.
Du shema.org dans l’entête du code source de l’email version Adobe : parlons encore un peu technique
Adobe utilise également le balisage http://schema.org/EmailMessage dans l’entête de ses emails commerciaux…
Il est bon de tirer le meilleur parti de la puissance de Gmail et ce balisage sémantique est l’assurance d’un pilotage optimum de la destination de l’email dans la messagerie de Google (qui sera probablement à terme remplacée par Inbox qui lui n’affiche plus le code source html des newsletters !!!)…
Voyez ci-dessous le code source original de la newsletter qui permet d'envoyer l'email dans l'onglet "Promotions" de Gmail :
Évidemment, les emails d’Adobe sont (pour la plupart) responsive et s’adaptent au device qui les affiche. Je n’ai pas constaté de technique de codage responsive « maison ». Les media queries assurent un contenu adaptatif gage de la meilleure expérience utilisateur qui soit.
Le responsive : un impératif si vous souhaitez vous immiscer dans le quotidien de vos clients et prospects et les faire adhérer à votre marque, votre histoire, vos contenus, vos produits…
Au-delà de sa superbe suite développée par l'éditeur, il est à mon sens du « devoir » de tout marketeur de s’abonner aux newsletters diffusées par Adobe.
En effet, l’éditeur propose souvent des livres blancs gratuits en téléchargement. Évidemment, tous ne traitent pas de l’email marketing mais parfois c’est le cas et c'est gratuit.
Et vous alors qui êtes en charge de la gestion des campagnes d’email marketing, croyez-vous que le pre-header soit un levier pertinent ?
Pensez-vous mettre en œuvre cette technique « originale » made in Adobe lors de la conception de votre prochain template html ?