Refonte de design d’email pour le plaisir : Castorama

Le design d’email, c’est ma passion. Ça me hante, jour et nuit. Chez Badsender, nous proposons bien sûr un service dédié à la conception d’email. Mais ça ne me suffit pas. Non. Je ne peux m’empêcher de surveiller ma boîte mail, à la recherche d’un email promotionnel ou d’une newsletter que je pourrai repenser, sur laquelle je pourrai me faire « zizir ». Et c’est sur Casto que j’ai eu un flash !

Ça tombe plutôt bien parce que je suis assez fan de Castorama. Je pourrai passer mes week-ends à arpenter les rayons de cette enseigne, et ressortir de là avec mon caddie plein d’accessoires de bricolage et de matériel que je n’utiliserai sans doute jamais, puisqu’étant bricoleur du dimanche, et que le dimanche, je suis dans Casto, forcément, ça dépend ça dépasse…

Toujours est-il que j’ai reçu un email de Castorama donc, qui me parle d’ouverture ou de renouvellement de la carte de fidélité C-Casto Max.

Cliquez sur la flèche droite de votre clavier pour consulter la version mobile de l’email actuel

Analyse du design email existant

Déjà, j’avais oublié que j’avais une carte de fidélité. Mais apparemment ce n’est pas celle-là que j’ai en ma possession. Enfin si puisqu’on me parle de renouvellement. Enfin non ! Puisqu’on me dit plus bas dans l’email que j’ai une carte C-Casto tout court; Enfin si, puisqu’on me dit « Redécouvrez la carte C-Casto Max » ! Enfin c’est pas clair quoi… Les mots « renouvellement » ou « ouverture » ne m’incite pas vraiment à comprendre ce que j’ai actuellement.

Mais ce ne sont pas les seuls points de détails qui m’attristent (j’y vais un peu fort là). Tiens, je m’en vais vous en faire la liste, et vous expliquer ce que je compte faire par la suite :

• Le preheader présent dès le début de l’email pourrait être « caché » : ce n’est pas l’objectif d’un preheader d’être visible dans l’email, mais plutôt d’apporter un complément à l’objet. Ne vous trompez pas de vocation !
• Un lien de désabonnement manque terriblement à côté du lien de page miroir, pour le rendre tout de suite plus visible et accessible. C’est étonnant peut-être pour vous, mais c’est une bonne pratique !
• La baseline « changer nous fait avancer » est minuscule… Elle sera désormais passée en texte HTML et donc sortie du logo. Je prends peut-être quelques libertés, c’est vrai, mais honnêtement, je ne vois pas pourquoi je ne m’amuserai pas un peu ! C’est le principe d’une refonte pour le plaisir, non ? Ça doit me plaire à moi (aussi) !
• À quoi qu’il sert ce menu ? Franchement ? Et quel rapport avec la carte de fidélité ? Le menu sera supprimé, c’est décidé : je ne vois pas trop son intérêt dans un email qui parle d’une carte de fidélité. En tout cas, pas avec le contenu actuel.
• La cover (le bloc principal, juste en-dessous du menu), est une grosse image : NOOOOOOOON ! Pourquoiiiiiii ?? On pourrait tellement la concevoir avec une partie en HTML et une partie visuelle… Bah tiens, c’est que je vais faire d’ailleurs : elle sera dorénavant conçue différement, et toutes les zones de texte seront faites en texte pur HTML et mis en forme avec du CSS : techniquement, c’est faisable ! Alors ok, il y aura quelques petites différences de typographies, d’espacement, mais franchement minimes…
• Il se passe quelque chose sur le code barre ? Parce que perso j’ai pas de scanner chez moi, et en plus je suis pas caissière, donc bon… Pourquoi ajouter ce code barre dans l’email ? C’est quoi l’objectif ? Qu’on m’explique ! Ah on me fait signe dans l’oreillette que c’est pour le montrer en caisse… Oui bah à ce moment-là on fait un email dédié au nombre de points dispo dans ton compte fid’ avec le code-barre, et puis voilààà !
• Le bloc de réassurance avec « trouver un bricoleur », « livraison à domicile », « Drive 2h », etc. ne sont, à mon sens, pas les points majeurs à mettre en avant sur ce type d’email. J’en profiterai plutôt pour mettre en avant des points forts à la carte C-Casto-Max. Je remodèlerai donc tout le footer en amenant un « tu as vu, avec ta carte actuelle, tu as ça… Avec la Carte C-Casto Max, tu pourrais aussi avoir ça ! Ch’bim, dans ta face ! »
• Avoir un lien pour enregistrer la carte dans son wallet, c’est bien. Mais si l’email n’est pas ouvert sur mobile, je ne comprends pas… Je peux dire la même chose d’ailleurs sur les boutons pour télécharger l’appli : si le destinataire n’ouvre pas l’email depuis un smartphone, je ne vois pas l’intérêt d’insérer un tel bloc.

Rien que ça, c’est pour parler de l’existant. Et vous vous doutez bien que je ne vais pas m’arrêter là !

Les ajouts dans le nouveau design email à venir

Dans une refonte de design email, même si c’est pour le fun, je peux me permettre d’ajouter des contenus qui m’auraient semblé plus pertinents, ou d’amener un peu de fantaisie. Je commence :

• Sur les petits encarts jaune avec arrondis (à côté du texte « Exclu carte » par exemple) : je viens créer un effet d’animation en CSS pour rendre l’email vivant. Ouiiiiiiiiii, je sais : ça ne fonctionnera pas partout. Mais si ça ne fonctionne pas, ça ne casse pas l’email ! C’est ça le plus important !
• Pourquoi je n’ai pas un bouton dès le premier encart (l’encart principal sur fond jaune) qui me permettrait de changer de carte ? Hein ?
• Sur les suite de mots « C-Casto Max », j’applique des couleurs spécifiques à certains mots : à la fois pour être cohérent avec la charte de la marque, mais aussi pour faire vivre le tout et rythmer la lecture !
• J’insère un court texte de derrière les fagots pour expliquer sur quelle formule de carte de fidélité je suis, et pourquoi ça serait intéressant d’en changer !
• J’intègre par la même occasion les quelques offres Exclu de la carte pour donner un peu de matière à changer de formule. C’est vrai quoi ! Dans l’email d’origine, on trouve seulement un bouton « Les offres fidélité du moment ». Oui, mais si l’offre de fidélité du moment c’est « vos points sont multipliés par 2 de telle date à telle date », je pense que ça peut être un bon argument pour me pousser à créer/changer de carte de fidélité.
• J’intègre un simili de mini FAQ en bas de l’email, sur les questions les plus courantes et celles qui sont les plus à même de « parler » à mon destinataire : « La carte C-Casto Max est-elle vite rentabilisée ? » avec un exemple concret, et « Combien de temps sont valables les coupons de fidélité C-Casto Max ? ». Pour ce module, les textes sont parfois inventés (quand je vous dis que je prends des libertés… 🙂 ). Mais c’est le genre d’indication que j’aimerai bien trouver dans ce type d’email.
• Tout ce qui peut être fait en HTML et en CSS au lieu d’une image sera fait ainsi ! Les arrondis pour les éléments du bloc de réassurance, les bordures, les séparateurs, les tags, les boutons avec flèche intégrée… TOUT ! J’aime me rajouter du boulot.

Cliquez sur la flèche droite de votre clavier pour consulter la version mobile de l’email actuel

Le développement HTML et CSS de la refonte du design email Casto

Affirmer « les effets graphiques seront codés en CSS, les contenus textes et contenus visuels seront dissociés, un maximum d’éléments seront développés en HTML… », c’est facile, si derrière ce n’est fait qu’en maquette Figma et pas en code ! Et les pains-surprises multipliés, et l’eau changée en Paix Dieu, hein, on demande à voir copain !

J’en vois tellement passer sur les réseaux sociaux pros des refontes rapides, bâclées, avec « pouce en l’air pour la version de gauche, cœur pour celle de droite ? »… Très peu pour moi ! Quand je m’attèle à un devoir je le fais jusqu’au bout, comme investi d’une mission ! (sauf pour la refonte d’email Darty 🙂 )

Voilà donc le nouveau design d’email de Castorama, développée en HTML et CSS, disponible sur Codepen, pour que vous puissiez constater mes dires.

Et je vais même plus loin : voici les résultats des tests d’email preview. Parce que c’est la même tambouille hein ! Dire que c’est codé, mais pas testé, ça n’a point de sens !

Quelle est la différence entre la maquette et le rendu du code email ?

Dans les grandes lignes hein :

• Les arrondis appliqués à certains éléments ne sont pas respectés sur la totalité des environnements d’ouverture, en particulier Outlook.
• Les animations en CSS via keyframes et animate ne fonctionnent pas partout, mais ce n’est pas « grave-grave » en soit.
• Les typographies utilisées, soit la Google Font « Poppins » et la typographie de substitution, la « Century Gothic » n’apparaissent pas sur l’intégralité des clients mail. Ça ne change pas le contenu pour autant, et les typographies de substitution renseignées permettent une dégradation gracieuse.
• J’aurai aimé améliorer le rendu dark mode sur certains environnements d’ouverture des textes noir sur fond jaune qui passent en blanc sur fond jaune et donc, avec un contraste clairement insuffisant. Mais il est très complexe de pallier à toutes les problématiques de rendu du dark mode. Il serait sans doute possible d’appliquer la méthode des modes de fusion CSS de Rémi Parmentier pour résoudre les problèmes de mode sombre de Gmail, mais ça reste un article « pour le plaisir » : je ne peux pas non plus prendre deux semaines pour coder un email qu’on ne m’a jamais demandé, vous le comprendrez ! 🙂
• Certains visuels ne sont pas en PNG fond transparent, tout simplement parce que je n’ai pas accès à la librairie de visuels de Castorama, et qu’ils étaient déjà en JPEG dans l’email d’origine.
• Les avantages de la carte C-Casto et de la carte C-Casto Max se superposent les uns sous les autres sur certaines versions d’Outlook… Enfin bon, les destinataires ne seront probablement pas sur Outlook logiciel de bureau Windows, puisqu’il s’agit d’un email BtoC. Mais je ne me cherche pas d’excuses, et préfère jouer la transparence !

Et… C’est à peu près tout ! Alors oui, si vous chipotez, vous listerez sans doute encore quelques petits correctifs et palliatifs à amener de-ci de-là. Mais tiens, ne perdez pas plus de temps : prenez plutôt votre téléphone ou votre plus belle plume, et contactez-nous pour nous confier votre refonte d’email !