Parce que je suis scotché. Je ne m’attendais pas du tout à ce genre d’email de la part du Cultura. Et je vous rassure tout de suite, je suis positivement scotché. Je vais aborder principalement le design : nous sommes ici sur un email de type trigger, envoyé après la création d’un compte sur Cultura. Et la marque ne s’est clairement pas contentée d’un email basique, sans mise en forme graphique. J’apprécie. Beaucoup.
Ce qui me plaît en particulier ici sur le design, c’est :
- Une mise en forme originale, qu’on trouve rarement dans des emails, puisque les fonds de couleur prennent toute la largeur du corps (
<body>). Cela ne peut pas se voir sur la capture d’écran, mais c’est bien le cas. Vous avez déjà entendu parler d’innnovations dans les emails, hein ? Et bien mettez un peu de côté les carrousels, les vidés, les formulaires, etc… Ce genre de design, c’est déjà une innovation en soi, puisque rare et donc… Innovant 😀 - Les textes avec des tailles assez conséquentes pour être bien lisibles, le plus petit texte (les mentions légales) étant tout de même conçu en
12px. - La plupart des textes sont conçus en HTML et CSS (quasiment tous d’ailleurs).
- L’utilisation de la Poppins, typographie que j’apprécie particulièrement et dont le jeu de graisse est ici très bien pensé !
- Une hiérarchie marquée des titres, textes, boutons.
- Un design esthétique et graphique et ce, malgré très peu d’images !
Personnellement, il y a juste un ou deux points que je modifierai : mettre le texte « Gérer mon compte » à côté de l’icône par exemple, pour réduire un peu en hauteur le header. J’en profiterai pour cacher le preheader. S’il n’y a qu’un seul privilège présenté, peut-être tenter de placer l’appel à l’action à côté du privilège, et non en-dessous. J’essaierai aussi de concevoir l’image « Privilèges Cultur’addict » en image(s) fixe(s) et non en image de fond, pour s’assurer de l’affichage de ce visuel. Et pour fignoler un peu plus le rendu final, j’abandonnerai le système de flèche un peu grossier pour les appels à l’action, pour se limiter à un simple chevron.
Si je m’attèle un peu au code HTML, je note particulièrement :
- La mise en forme MA-GNI-FI-QUE des textes alternatifs ! C’est-à-dire que lorsque le logo « Cultura » n’est pas affiché par exemple, et bien la mise en forme du texte alternatif (texte blanc, en Poppins, grand et en bold) est bluffante : je ne me rends presque pas compte que le logo n’est pas affiché !
- Il en va de même pour les titres « CulturaCréas », « CulturaLivres », ou bien même le numéro Cristal !
- Mise à part la mise en forme, même le « remplissage » de ces textes alternatifs est soigné, puisque dans la partie « Et ce n’est pas fini », les deux pictogrammes sont remplacés par des émojis (cohérents) lorsque ces pictos ne sont pas affichés.
Par contre, le code est trop lourd, chargé et complexe à mon sens. Il pourrait être largement simplifié, et quelques optimisations pour l’accessibilité peuvent être apportées (comme l’utilisation de balises sémantiques pour les textes par exemple, ou l’ajout d’un attribut lang sur la balise <html>).