Pourquoi un email d’helios ? Simplement parce que j’étais persuadé de l’avoir déjà fait et que ce n’est pas le cas. Et ils le méritent bien avec un template email en apparence minimaliste mais sacrément efficace.
Faire simple c’est difficile et pourtant tellement malin
Ils ont su faire évoluer leur template à la fois pour améliorer la compatibilité de rendu sur mobile et en darkmode. Sûrement pour simplifier le processus de production au passage également ? Mais avant tout pour faire passer leurs messages ultra efficacement.
Un template avec un zoning bien différencié et identifiable tout en étant en une seule colonne. Pas besoin de redistribuer le contenu en mobile ou de prévoir des adaptations avec des images ou contenus différents.
De plus la largeur du template est très étroite. Nous sommes habitués à voir des templates desktop en 600 ou 640px de large, ici c’est du 480px maximum pour tout le monde. Et en dessous c’est fluide à 100%. Comme c’est malin pour produire des emails responsive sans embûche ! Bonus ça passera également en desktop dans des applications avec volet de prévisualisation latéral, pratique.
Une vraie hiérarchie de titres avec des balises sémantiques ! Si ça ne vous dit rien et bien c’est bien dommage et tellement rare en email qu’il faut le souligner.
Peu d’images et aucune n’est à vocation purement décorative. Le gif animé du bloc d’introduction permet un aperçu rapide de la fonctionnalité tout en restant assez léger pour ce type de visuel (moins de 500ko) et peu intrusif (pas de clignotement, scintillement ou de boucle trop rapide).
Les pictos et logos sont optimisés pour le darkmode avec un filet blanc. De plus, ils comportent tous des attributs de texte alternatif. Pour chipoter, là ils en font peut-être un peu trop et cela sort de la description d’image. Cela ressemble presque à de la sur-optimisation SEO (inutile et encore plus en email).
Le message ultra clair et direct. C’est simple, il n’y en a qu’un et il est déroulé depuis l’objet en passant par un bloc de cover efficace en introduction, suivi d’un bloc de bénéfice et d’un bloc de reassurance sous forme d’une FAQ avec réponses en 3 étapes. Difficile de faire plus efficace.
Et puis enfin ce footer, tellement clean et identifiable. Une fois de plus « less is more ». Il respecte à la lettre les obligations de la CNIL : identification de l’annonceur et lien de désabonnement. Pour le coup dans le secteur bancaire quelques mentions ou informations de contact sont absentes et cela pourrait être un élément de de réassurance non négligeable du footer.
Bonus spécial pour les #emailGeeks : il y a une vraie version texte brut de l’email qui est prévue ! Merci <3
Mais est-ce qu’helios peut faire mieux pour ses emails ?
Toujours.
Et pour le coup il reste des choses à simplifier et qui auraient un impact concret en éco-conception et en éthique.
Déjà des appels à des Google fonts c’est pas ultra aligné avec le positionnement d’helios, mais en plus pour de la « Roboto » ultra basique qui en plus n’est pas présente sur le site d’helios. Ici aucune justification de branding pour faire une surcharge avec une custom font d’#EvilCorp.
Si vous souhaitez économiser un peu de poids sur le HTML (il n’est clairement pas excessif de base), revoyez la rédaction de vos attributs alt. Exemple dans le header pour le logo « helios » nous avons « helios : le compte qui accélère la transition écologique » alors que « logo helios » serait la bonne alternative textuelle. D’autre part toutes les images se voient attribuer un attribut de titre title qui est clairement superflu voire contre productif étant donné qu’il reprend mot pour mot le contenu de l’attribut alt.
Le rendu du bloc FAQ « Comment ouvrir des coffres ? » en mobile. Ce bloc a une bordure , des coins arrondis et une marge interne (padding), mais aucune marge externe. Par conséquent en mobile la bordure est collée aux bords du viewport (zone d’affichage de l’écran). C’est pas très classe pour le coup. Et comme il y a déjà des media queries dans le template cela peut se résoudre facilement.
Je vous l’ai dit avec l’exemple email de Clémentine d’Alltricks, je ne suis pas un grand fan des nom d’expéditeur personnifié. Outre les impacts possibles dans les boîtes de réception, c’est peu crédible que cette personne existe réellement. Et encore plus qu’elle incarne à elle seule tout le service client ou marketing de l’annonceur. Donc Lucas pourquoi pas, mais bof bof. Par contre il est là en fin de lecture de mail pour me faire passer un message positif. Une petite attention bien vue et alignée avec la posture de marque.
Dans le footer, beaucoup de picto de réseaux sociaux. Trop ? Et puis c’est à la mode de quitter X alors ensemble dépolluons l’internet 😉
Dans les éléments visibles avant ouverture. Le préheader est identique au titre H1 du bloc d’introduction. Je suis sûr que vous pouvez faire mieux étant donné la qualité de la rédaction sur le reste de la campagne.
Et pour finir, le grand absent… Bimi. Pour un service bancaire c’est un vrai gage de sécurité et de confiance à l’heure actuelle.