Exemple d'email : Clémence & Vivien

1. Parce que j’en ai assez des gels d’une marque que je ne citerai pas (Axe) qui te filent des réactions cutanées allergiques et autres dermatites de contact tellement qu’ils sont agressifs.
2. Parce que désormais, seul les savons solides les plus basiques possibles ont droit de cité dans ma salle d’eau.
3. Parce que j’en ai marre des emballages plastiques qui encombrent ma douche.
4. Et parce que j’adore les deux prénoms, Clémence, Vivien…
5. Et parce que vivent les cosmétiques made in France et éco-responsables !

Cependant, si j’apprécie leurs produits, la conception graphique de leurs communications emailing me laisse toutefois plus perplexe. Voici donc une analyse des points positifs existants et des axes d’amélioration possibles.

Design

Points positifs

• Le visuel principal du hero-cover reste identique en version Bureau et Mobile : une bonne pratique qui évite les appels à des ressources extérieures.

Axes d’amélioration

• Sur la version Bureau, dans l’en-tête de l’email, le logo de la marque est minuscule et flou de surcroît. A contrario, sur la version mobile, sa largeur passe à 100% : il occupe une place excessive. Une version optimisée pour les deux supports, avec une taille fixe, serait préférable.
• À mon sens, une déclinaison spécifique à l’emailing serait envisageable pour ce logo : par exemple, le texte « Clémence & Vivien » en HTML avec deux images des bulles en complément, ou encore une version horizontale avec les bulles à gauche en image, et le nom à droite, en HTML : cela permettrait au moins un affichage immédiat de la marque à l’ouverture de l’email.
• « Les nouveautés hydratantes », le titre principal de l’email, est en double : il est compris à la fois dans le hero-cover de l’email en image, mais aussi en HTML juste en-dessous. Inutile ! Une meilleure approche serait d’intégrer le titre en HTML avec un fond uni via l’attribut bgcolor, et d’afficher uniquement l’image des produits à côté. D’autant que le contexte autour de ces deux visuels n’a pas spécialement d’intérêt et mériterait donc d’être « croppé ».
• La hiérarchisation des informations n’est pas assez prononcée : Les titres et textes ont un aspect trop uniforme, manquant de contraste et de différenciation. Une mise en valeur plus marquée du titre principal renforcerait la lisibilité.
• L’emoji présent dans le titre HTML ne s’affiche pas correctement (mais je ne suis pas sûr à 100% qu’il s’agisse d’un emoji). Il est important de tester sa campagne avant envoi pour s’assurer que l’ensemble des informations s’affiche correctement !
• Il manque un bouton/appel à l’action en-dessous du texte d’édito ou, pourquoi pas, directement dans le hero/cover pour convertir ou amener plus rapidement vers la liste des nouveautés sur le site de la marque.
• Les visuels des produits avec les textes associés (sous l’édito) sont les mêmes pour la version Bureau et Mobile. Si j’affirmais précédemment que je préfere cette méthode, je me permets tout de même de signaler que, sur la version Mobile, ces visuels produits sont clairement bien trop petits et illisibles. Idem pour les bandeaux « Programme Parrainage », « Programme fidélité », et le bandeau de Réassurance.
• Graphiquement j’essaierai de différencier le programme Parrainage et le Programme de fidélité qui, aujourd’hui, se ressemblent trop. Je signale au passage que les textes du Programme de fidélité sont illisibles, car bien trop petits.

Rédaction

Axes d’amélioration

• Je ne vois mentionnées nulle part les valeurs de la marque. Pourtant, Clémence & Vivien, c’est du produit 100% d’origine naturelle, une gamme entièrement végane, une certification Cosmos Organic, des produits éco-conçus… Alors ok, ce pourrait être le sujet d’une newsletter ou d’une communication dédiée, mais pourquoi ne pas envisager un module relativement court évoquant ces forces en bas ou au milieu de l’email ? C’est aussi une forme de réassurance !

Accessibilité

Points positifs

• Il y a bien un lien vers la page miroir tout en bas de l’email : top ! Même si j’aurai préféré le voir dans le header de l’email…

Axes d’amélioration

• Le logo est invisible en Dark Mode : en effet, le logo du header étant conçu en png (fond transparent), le fond blanc du header devient noir (ou du moins sombre) en Dark Mode. Le logo étant noir, il devient donc quasiment invisible. Il est important d’anticiper ce type de problématique et d’ajouter, par exemple, une bordure ou une ombre portée de la même couleur que l’arrière-plan en Light Mode pour que le logo reste « visible » sur le Mode Sombre.
• Les titres, textes et boutons des deux (seuls) produits présentés dans l’email sont conçus en image : c’est malheureux, car si les images ne sont pas affichées, alors les titres, textes et boutons associés ne s’afficheront pas non plus. Dissociez au maximum les contenus textuels et visuels : prenez le temps de concevoir les contenus textuels en HTML brut (avec une mise en forme avec le langage CSS).
• Les images (<img>) n’ont pas de texte alternatif (attribut alt avec une valeur pertinente renseignée sur les éléments <img>) : les textes alternatifs s’affichent lorsqu’une image ne s’affiche pas (parce que le lien est cassé, parce qu’elle est lourde et met du temps à s’afficher, ou parce que les images sont désactivées) et sont aussi là pour renseigner le contenu du visuel aux lecteurs souffrant d’un handicap. Il est impératif de renseigner correctement l’attribut alt de ces images sur les images qui ne sont pas des images décoratives : autrement dit, les visuels présents dans cette campagne méritent laaaaargement des textes alternatifs !
• Le titre principal de l’email « Les nouveautés hydratantes » est conçu en image…
• Le contenu entier du programme de parrainage est conçu en image…
• Le contenu entier du programme de fidélité est conçu en image…
• Et le contenu entier du bandeau de réassurance est conçu en image. Bref, je ne vais pas répéter ce que j’affirmais sur la dissociation des contenus textes et visuels, mais je n’en pense pas moins !
• La langue du contenu de l’email n’est pas renseignée, comme recommandé dans les bonnes pratiques de l’accesssibilité emailing, dans un attribut lang sur la balise <html> : décrire la langue permettra aux lecteurs d’écran de parcourir en lecture le contenu de l’email avec le « bon » langage. Autrement dit, d’avoir un robot « français » qui lira correctement le contenu en français (et non avec un accent anglais).
• Un attribut dir doit être renseigné sur un élément en plus de l’élément <html> pour spécifier le sens d’écriture du texte si jamais l’élement <html> venait à être supprimé sur un environnement d’ouverture. De la même façon, l’attribut lang doit aussi être renseignée sur un élément autre ou en plus que l’element <html>.
• Le contraste n’est pas suffisant des textes blancs sur fond bleu pastel pour les titres des produits et des appels à l’action, selon le Contrast Checker de WebAIM.

Code

Points positifs

• L’attribut role avec la valeur presentation est bien présent sur les <table> utilisés pour la mise en forme graphique, et non pour des tableaux de données; bravo !
• Des balises sémantiques (<h4>, <p>) sont utilisées pour les contenus textuels : très bien ! Cela permettra aux personnes utilisatrices des lecteurs d’écran d’avoir une explication adéquate des différents niveaux de textes.

Axes d’amélioration

• Le fichier fait 159ko une fois indenté et 40ko minifié. C’est énorme, le code est beaucoup trop lourd au vu de la simplicité de la conception graphique de l’email.
• Les balises <style> et le media queries sont beaucoup trop nombreuses. Certes, l’email a sans doute été développé depuis un Email Builder, mais rien n’empêche une légère repasse après coup pour alléger un peu le code en sortie !
• Des attributs HTML et propriétés CSS sont présentes, mais inutiles : valign sur cellules orphelines par exemple, ou utilisation de <th> au lieu de <td> (ce qui implique des reset CSS)… Simplifiez et soignez votre code HTML !
• Certains espacements et marges sont générés via des cellules et tableaux vides : je recommande fortement l’usage de la propriété CSS dédiée padding, pour gagner en poids du code HTML final.

Conclusion

Un email qui met en avant des produits intéressants, mais dont la conception graphique et technique pourrait être optimisée. De meilleures pratiques en matière de responsive design, d’accessibilité et de structuration HTML permettraient d’améliorer l’expérience utilisateur et d’assurer une meilleure conversion.