Refonte d’email promotionnel et bonnes pratiques design

Il y a tant à faire dans l’optimisation des conceptions graphiques et rédactionnelles des communications email, je vous assure… D’ailleurs, il y a peu, je publiais l’analyse d’un email promotionnel de la société nantaise Beem, spécialisée dans la construction de panneaux solaires. Analyser et critiquer c’est bien, mais tant qu’à faire, autant que cela soit constructif ! Et vous commencez à me connaître, je n’aime pas m’arrêter en si bon chemin.

Décision est prise de faire une refonte pour le plaisir de cet email promotionnel ! Je ne vous infligerai pas la litanie des points positifs existants et des axes d’amélioration. Je vous laisse lire l’exemple en question pour en prendre connaissance. Mais permettez-moi un léger rappel du rendu actuel.

Allez, je vous annonce ce qui va être appliqué :

Un travail rédactionnel, une meilleure structuration des éléments, et mise en avant de données

• Désormais, zéro faute d’orthographe. C’est non-négociable. 🙂
• Insertion d’un bandeau « -27% de réduction » sous le logo, insistant plus rapidement sur l’urgence et le délai de l’offre, sans passer par des comptes à rebours et les risques qu’ils engendrent avec la mise en cache des images de l’email.
• Remonter le nouveau prix et le prix barré. Idem pour le code promo, désormais identifié comme tel.
• Ajout d’une légende en-dessous du visuel produit, aussi bien pour préciser le produit et ne pas laisser place à la confusion, que pour des questions d’accessibilité email.
• Ajout de données « Economies et rentabilité » en-dessous du visuel produit, comme arguments de conversion.
• Suppression du visuel produit sur fond bleu (avec les informations textuelles comprises dans l’image) qui ne fait que répéter le contenu du texte du dessus.
• Une communication généralement plus enrichie, avec des informations produits supplémentaires : installation, branchement, lestage…
• Création d’un module dédié à l’app : de savoir qu’une application existe pour contrôler ce type de production à distance, perso, ça me rassure et ça m’éclate.
• Enfin, mise en place de trois légers textes en fin d’email pour insister sur les aspects durables et écologiques du produit ET de la marque.

Une refonte majeure de conception graphique dans cet email promotionnel

• Couleur du logo d’origine conservée, pour une cohérence entre le site internet et l’email.
• Un logo désormais dissocié en deux parties : le soleil qui pourrait être conçu en svg (tant que la version de secours est bien prévue). Et je prends l’initiative de concevoir le texte du logo avec la typographie Arial, pour un affichage immédiat de tout ou partie du logo, sans téléchargement nécessaire des images. La dégradation de rendu n’est pas majeure, mais l’expérience utilisateur s’en trouve améliorée.
• TOUS les textes désormais conçus en HTML et mis en forme en CSS. Sans exception. Via la typographie Playfair Display pour les titres, et l’Arial pour le reste.
• Une hiérarchisation des éléments bien plus prononcée : titre principal, sous-titres, prix, prix barrés, code promo, appels à l’action, tag, légende… À chaque élément sa mise en forme !
• Visuel du produit au format PNG avec fond transparent pour une adaptation naturelle de l’arrière-plan en Dark Mode.

L’accessibilité optimisée et une réflexion sur l’éco-conception

• Ajout de lien de désabonnement et de page miroir dans le header.
• Un logo à moitié conçu en texte, comme expliqué ci-dessus.
• Des contrastes marqués entre les couleurs de premier plan et celles d’arrière-plan.
• Aucune taille de texte sous la barre des 16px : pour une lisibilité accrue.
• From textes plus explicites pour les appels à l’action, désormais entièrement conçus en HTML et mis en forme via du CSS.
• Mention des réseaux sociaux via des textes plutôt que des pictogrammes : dans l’objectif de réduire au maximum les ressources appelées.
• Mise en forme des éléments graphiques (séparateurs, dégradé de couleur, coins arrondis, puces « + », tags sur fond orange, code promo…) en HTML et CSS. Toujours dans l’objectif de réduire l’appel à des images externes.
• All the visuels seront optimisés sur leur poids en choisissant non seulement le format (jpeg, png, gif, svg) et la taille adaptés, mais aussi en les compressant au maximum, tout en conservant, bien sûr, une qualité suffisante.
• De plus, ces nouveaux blocs désormais créés pourraient faire partie d’un projet plus vaste de début de Design System Email, pour un usage régulier, et donc un gain de temps de production ET d’énergie.
• Des balises sémantiques (<h1>, <h2>, <p>, …) seront usitées pour une optimisation de l’accessibilité du code HTML.
• Le projet de cette nouvelle maquette me laisse penser qu’il serait alors possible de supprimer l’envoi d’une relance et diminuer ainsi la pression commerciale.
• Note : La typographie Playfair Display, désormais appelée pour les titres, est une Google Font : j’ai largement tendance à recommander de limiter l’appel à des ressources externes, mais c’est le seul petit « kiff » que je m’autorise. Je suis coupable.

Vous voulez voir ce que ça pourrait donner ? Trop de suspense ? Check le résultat final.

Pour visualiser la version mobile de l’email, utilisez la « flèche droite » de votre clavier.

Et pour le code alors ?

Je ne vais pas vous mentir, je n’ai pas pris le temps de développer la refonte du code HTML de cet email promotionnel (pour le moment). Honte à moi ! Je m’infligerai 50 coups de fouet ce soir. Mais voici ce que j’envisage :

• Développer l’email suivant la méthode Spongy, pour garantir une version mobile de l’email, même lorsque les media queries ne sont pas supportées. Ajouter quelques media queries (et donc, basculer sur une méthode Hybrid) pour optimiser un peu plus le rendu de la version mobile sur les environnements d’ouverture les acceptant.
• Créer le dégradé d’arrière-plan du hero en CSS, pour éviter l’appel d’image de fond ou pire, la conception du hero en image. Alors oui ! le support ne sera pas garanti sur l’intégralité des environnements d’ouverture, mais est-ce que le rendu et la compréhension des informations s’en trouve dégradés si une couleur de fond unie venait à prendre le relai ? Je ne pense pas, non.
• Dans mes rêves les plus fous, j’aimerai proposer une version « panorama » du visuel produit avec vue 3D au passage de la souris. Mais si je veux être raccord avec mes propos sur l’éco-conception, je pense qu’il est préférable que je me fasse violence…

Qu’en pensez-vous ? Je vous écoute !