Parce que je trouve l’email particulièrement bien fait, voilà, je ne vais pas vous mentir en disant que je suis fada de running, je fais cent mètres et je crache mes poumons ! Non-non, je remarque tout simplement plusieurs points de conception graphique dans cet email promotionnel qui me plaisent, et je m’en vais vous les lister. J’en profiterai aussi pour passer en revue les points techniques qui me chagrinent un peu plus…
Quid tout d’abord du design de l’email.
Je commencerai par les points positifs
- J’adore l’aspect « épuré » de l’email : c’est relativement sobre, et complètement en accord avec le domaine du sport et du running. Les couleurs sont vives sans être trop tape-à-l’oeil. Le reste est plus neutre… ça fait très bien le taf et ça met en avant, implicitement, les visuels des produits.
- The charte graphique de la marque est tout à fait respectée ! Pas de mauvaise surprise ni dans l’email, ni en arrivant sur les pages de destination. Couleurs de fond, typographie, couleurs des textes, bandeaux, mise en forme des produits… Chaque élément de cet email fait partie d’un Design System général harmonieux.
- J’apprécie tout particulièrement l’utilisation de la typographie websafe Arial : comme quoi, même avec une police somme toute assez basique, il est possible d’arriver à un résultat très esthétique en jouant sur la taille, la graisse et la casse !
- Quelle bonne idée que d’utiliser les témoignages clients pour mettre en valeur ses best-sellers. J’aime beaucoup cette approche, avec les citations de la communauté : c’est une occasion comme une autre de parler de ses produits phares, mais il fallait y penser !
- Le cross-sell sur les paires de chaussettes offertes est judicieux et cohérent avec les produits présentés juste avant. Top !
Et maintenant, les points d’optimisation pour le design de cet email de running
- Il manque un lien vers la page miroir et un lien de désabonnement en tête d’email. Pour la page miroir, c’est une déformation professionnelle de ma part sans doute – quoiqu’on le recommande généralement dans les bonnes pratiques d’accessibilité email.
- J’aurai tendance à anticiper le comportement hasardeux de certains environnements d’ouverture email en Dark Mode en ajoutant une ombre portée – ou une bordure – de la même couleur que celle d’arrière-plan sur le logo HOKA situé au début de l’email.
- C’est le genre d’email où l’on pourrait facilement intégrer un peu d’interactivité : des effets de rollover sur les visuels produits par exemple – avec une autre vue du produit -, effet de survol sur les boutons, vue 3D d’une paire de baskets – ok, je m’emballe peut-être un peu mais ça aurait de la classe ! Bon après, il faut avoir conscience des tenants et aboutissants de l’intéractivité dans l’email marketing, mais ça c’est autre chose…
- Enfin, un point qui concerne plus la partie rédactionnelle que le design : le titre principal de l’email – « Un confort qui tient la distance » – est une répétition de l’objet… Et ça c’est un peu dommage ! Il aurait été judicieux de renforcer l’intérêt pour la marque et ses produits par d’autres mots…
Et quant à la partie technique ?
Attardons-nous tout d’abord sur les points forts
- The appels à l’action de type bouton sont entièrement cliquables, bravo ! Ca semble anodin, mais ce n’est pas forcément donné à tout le monde de le réaliser. Et surtout, c’est aussi une bonne pratique d’accessibilité email !
- Certains textes alternatifs sont particulièrement bien renseignés ! J’en veux pour preuve le visuel principal des personnes s’échauffant, dont le texte alternatif « Un groupe de personnes s’étirant au soleil en tenue de course. » respecte à la lettre les principes d’accessibilité des textes alternatifs dans les emails.
Y a-t-il alors des points d’amélioration sur le développement de cet email de running ?
- Le dégradé prévu derrière l’image des 3 paires de chaussette mérite d’être produit en CSS, pour une adaptation des teintes en Dark Mode (si jamais cela était possible, je n’ai pas testé). On ne pourra pas reproduire l’effet de matière et le dégradé de façon identique, certes, mais est-ce là le plus important ? Et si jamais le dégradé n’était pas supporté, on anticipe avec une couleur de fond unie en version de secours. Dégradation acceptable bébé !
- Les ressources appelées – les visuels produits – me semblent un peu lourds. Je pense qu’il y aurait moyen d’en réduire le poids, tout en conservant une qualité suffisante. J’ai fait le test tiens, sur squoosh : je passe de 254ko à 202ko en passant la qualité à 80. Et je suis encore sur un visuel en retina ! Clairement, y a moyen d’optimiser tout ça.
- Les titres des produits – Clifton 10, Ora Recovery Slide 3, Vibrant Bloom Bondi B3LS – sont compris dans l’image du produit… Là j’avoue ne pas comprendre : pourquoi s’embêter à concevoir tous les autres contenus textuels en HTML si on ne respecte pas la bonne pratique pour ces titres ? Alors que finalement il y aurait presque plus de cohérence graphique à les concevoir en Arial avec une graisse à 700, non ?
- De la même manière, la note du produit est comprise dans l’image du produit. Ainsi que le pourcentage de recommandation… Pourtant, ce dernier élément pourrait largement être développé en HTML et mis en forme via du CSS !
- Des cellules vides sont utilisées pour créer des marges, et ça je n’aime pas beaucoup du tout… Pourquoi ne pas utiliser la propriété CSS
padding, dédiée à cet usage ? - Aucune balise sémantique dans le code HTML de l’email… Même pas un petit
<p>. Les textes sont directement insérés dans des cellules, à l’ancienne. Et les bonnes pratiques d’accessibilité email sur les titres alors, on en fait quoi ? Il est pourtant fortement recommandé d’insérer au moins un titre<h1>, et de choisir le bon niveau pour les titres suivants… - Le code HTML est trop complexe en comparaison à la simplicité du design. Pour vous donner un exemple, le preheader – la phrase invisible qui vient en complément de l’objet – représente à lui seul 27 lignes de code. Et une section – ligne dans l’email – est conçue pour chaque bloc. Alors qu’une seule section avec un
bgcolor="#FFFFFF"aurait été suffisant. - J’ai du mal à saisir pourquoi les modules de l’email sont prévus à 640px de largeur, mais qu’au final des marges vides sont ajoutées de chaque côté pour que l’email ne fasse que 600px de large. Pourquoi ne pas avoir défini dès le départ la largeur de l’email à 600px ?
Voilààààà. Après relecture, je me rends bien compte que le sentiment qui se dégage de cette analyse d’email n’est pas forcément des plus positifs, mais je reste malgré tout séduit par cette campagne, je vous jure Madame que j’ai jamais couché avec un garçon…