Voici un exemple pour une industrie de luxe : l’horlogerie. La belle horlogerie m’intéressant, je me suis inscrit chez TAG Heuer afin de voir quels sont leurs pratiques emailing.
The good
Soyons francs, l’email est plutôt bon. Tout d’abord, la structure est simple. Une première partie sur une colonne, suivie d’une partie secondaire sur deux colonnes. Le texte est aéré, il y a deux boutons, très clairs.
En terme de rendu, l’email passe bien sur tous les emails testés sur Email On Acid. Pas juste les clients emails standards, mais bien tous les emails testés (Web.de, Libero, …), ce qui n’est pas un mince exploit. TAG Heuer étant international, il faut en effet que les emails restent lisibles dans les clients emails de différents pays.
Les images sont également optimisées pour ne pas prendre trop de poids. L’email et les images pèsent au total moins de 900ko, ce qui est tout a fait acceptable!
Au niveau du dark-mode, rien de particulier est prévu dans le code, mais la simplicité des couleurs et de la structure fait en sorte que le comportement par défaut des clients emails garde le contenu parfaitement lisible. De plus, l’image principale est prévue en transparence et reste visible en dark-mode.
Ce qui est appréciable également, c’est au niveau contenu. Pas de tentative de vendre quoi que ce soit. Juste du story-telling, en invitant à découvrir l’histoire la marque, et une invitation a créer un compte chez la marque, avec les avantages associés. Pas de promo ou de push produit trop aggressif.
Le wording de l’appel à l’action aussi est bien rédigé, il invite à plus que simplement « cliquer »
The bad
La typo pourrait être un peu plus grande. 14px pour une font, c’est parfois limite pour la lisibilité. Heureusement, le contraste noir et blanc garde l’ensemble lisible.
Le code est trop long, avec des bouts de code inutiles qui allourdissent l’ensemble. Il y a par exemple des bouts de code CSS inutilisés, ou bien des bouts de code spécifique pour un pays donné. Certaines propriétés CSS me semblent également inutiles. Exemple : <tr style="margin: 0 auto; padding: 0;">. Ces propriétés sur un <tr> peuvent généralement être omises. Après, j’émets une réserve sur ma remarque : ces propriétés sont peut-être nécessaire pour l’un ou l’autre client email dans un pays donné qui interprétrait l’HTML de manière un peu « libre ».
Le footer est centré, mais comme les colonnes sont de largeurs différentes, la ligne séparatrice du footer est décentrée. Personnellement, je ne suis pas fan. Après, j’avoue que c’est vraiment un détail.
Concernant la lisibilité, quand on est sur plus de 3 lignes de texte, on reccomande de ferrer le texte à gauche pour le rendre plus lisible, et de ne pas le laisser centré, comme ici.
On conseil également de placer le premier appel à l’action le plus haut possible dans l’email, afin d’éviter d’avoir à scroller pour le rendre visible et donc cliquable.
The ugly
Au niveau design, l’espace entre les éléments varie, et c’est bien dommage. C’est un détail, mais visuellement, cela se ressent. Entre le titre et le texte, nous avons 44px ; entre le texte et l’image, 50px ; entre l’image et le bouton, 62px ; etc.
C’est vraiment dommage, ça casse le rythme visuel et cela pourrait être résolu très facilement.
Au niveau technique, il y a toute une série d’information qui est passée en commentaire dans le code HTML. A priori, rien de dramatique, mais c’est totalement inutile dans l’email final :
<!-- Build version: v12 -->
<!-- App Name: k-tag-welcome-to-tag-heuer-92 -->
<!-- Last update: 19/04/24 09:23:26 -->
<!-- ID: welcome-to-tag-heuer-email-newsletter-journey-2 -->
<!-- @subjectLine: Welcome to TAG Heuer -->
<!-- @preHeader: Swiss avant-garde since 1860 -->
<!-- @Language: en -->
<!-- @FirstName: Gregory -->
<!-- @LastName: Van Gilsen -->
<!-- @Country: BE -->
<!-- @Gender: -->Et pourquoi, POURQUOI, aller mettre le bouton de désinscription en bas, en gris foncé sur gris clair? Alors qu’il y a la place dans le footer ; même le bouton « version web » y a été répété. On ne le dira jamais assez, facilitez votre processus de désinscription !
Conclusion
En dehors de quelques points de détails, l’email est globablement très bon. Il est structuré, lisible en desktop et mobile, optimisé au niveau du poids, reste impeccable en dark-mode.
Les points positifs sont très positifs, et les points négatifs sont pour la pluaprt très facilement solutionnables.
Bref, un très bon email !