Exemple d'email : NETATMO

Voilà un template de newsletter à l’image de l’annonceur : à contre-courant. J’aurais pu dire moderne ou innovant, sauf qu’ici nous ne ferons pas dans la débauche d’effets d’animations ou de contenus dynamiques, non non. Mais dans les choix de design. Cette newsletter, bien qu’en apparence puisse sembler « banale », regorge de choix de design que l’on croise de moins en moins souvent en email. Pour la bonne raison qu’ils sont difficiles à mettre en œuvre d’autant qu’ils sont parfois mal supportés par les environnements d’ouverture.

Contexte d’ouverture

J’ai ouvert cet email sur mobile en soirée par conséquent dans sa version « dark mode ». De part l’essence même de mon activité chez Badsender, je suis forcément biaisé quand je jette un rapide coup d’œil à un email. Et là c’était une évidence, il fallait que je regarde de plus prêt alors je vous embarque pour faire un tour complet.

Délivrabilité

Pour un annonceur qui propose des solutions de domotique avec notamment de la sécurité et de la « surveillance optimale », un alignement dans les pratiques serait souhaitable.

S’il semble évident que Bimi n’est pas en place mais qu’il y a bien list-unsubscribe, commençons par un petit check sur les en-têtes afin de vérifier en détails les configurations.

• Leurs domaines (info.netatmo.com et netatmo.com) sont alignés en mode strict, et ça c’est cool.
• La policy quarantine sur le domaine info.netatmo.com et netatmo.com pourraient bénéficier à passer en reject.
• Pas de Bimi alors qu’on est sur de la policy quarantine, c’est dommage.
• Le SPF de info.netatmo.com est "v=spf1 ip4:130.248.193.0/24 -all", c’est un range d’IP très large, l’idéal est restreindre à ce qui est vraiment utile.

Bon ok j’avoue, j’ai demandé l’aide de Jonathan pour y voir plus clair et de son propre aveux : « Franchement, tout me semble top ! » Bien joué. Il ne reste que Bimi à mettre en place. Cela dit j’aurai aussi très bien pu lire l’excellent article de Marion pour checker les paramètres techniques de délivrabilité.

Rédaction

Commençons par le commencement. Clairement ce n’est pas le trio expéditeur, objet, préheader qui m’a poussé à ouvrir cette campagne.

Vous le savez si vous suivez cette rubrique, la personnification de l’expéditeur, très peu pour moi. D’autant plus que la fameuse « Laura » nous ne la retrouvons à aucun moment dans le contenu, pas une allusion, pas une signature, pas une blague, rien.

Et puis, à froid comme ça, je me dis que pour un service de domotique connecté, ils auraient pu faire le choix de « Nono le petit robot » quand à faire du fake.

Toujours en boîte de réception, le preheader est complètement déconnecté et n’apporte rien. Il ne rebondit pas sur l’objet, ne vient pas questionner ou compléter. Il ressemble plus à une baseline générique qu’à une information spécifique à cette campagne. Soit, passons.

Bon ok, c’est peut-être mal engagé, toutefois j’ai cliqué et ouvert.

Là il y a une promesse forte dès l’ouverture : « Une maison qui prend soin de vous et de votre environnement« .

Mis à part une ambiguïté vite levé sur le sens du mot « environnement« , ici le propos est clairement votre environnement domestique et non l’impact environnemental. Perso je trouve que ce choix de mot n’est pas très judicieux et un peu limite. « Une maison qui prend soin de vous et de vos proches au quotidien« , là il n’y a pas de doute et de plus le propos est élargi dans sa portée.

Mis à part cela, le reste du propos déroule sous forme de contenu informatif la gamme de produit Netatmo et les bénéfices qu’ils offrent dans une maison « intelligente ». Pas de mise en avant commerciale, des phrases courtes, de la mise en exergue, des conseils et avantages produits, le tout avec une seule action proposée. C’est clair et net on sait où on va. Et pourtant…

Accessibilité

Malheureusement ce n’est clairement pas le point fort de cette newsletter.

En travaillant davantage ce point, c’est toute la rédaction qui en aurait tiré les bénéfices.

• Pas de hiérarchie de titres
• Pas de balisage sémantique
• Contraste texte orange sur fond blanc

Je ne m’attarderai pas sur les alternatives textuelles pour les images. Il n’y en a pas. Sauf sur les logos, ouf on sauve les meubles. Les réseaux sociaux, rien et les illustrations non plus. Pour ces dernières ce n’est pas bien méchant car ces visuels sont « décoratifs » et le texte associé est lui explicite.

Pour revenir sur les bases, au niveau du texte et donc de la rédaction, là nous sommes confrontés à l’écueil classique. Il n’y a pas de balisage sémantique, ok ça malheureusement ça arrive encore souvent et il est difficile de faire entrer le message sur l’utilité d’un code HTML adapté.

Sauf qu’ici cela se ressent également à la lecture car il n’y a pas de mise en forme sur une « fausse » hiérarchie de titre. Tout est au même niveau, en 14px. Cela ne permet pas un scan rapide et une accroche du regard sur des informations clés.

Quant au texte orange, là c’est toute la difficulté des chartes graphiques qui comportent cette palette de couleurs. C’est souvent le cas dans le service (mutuelle, assurance, téléphonie…), les équipes veulent « égayer » les créas avec du orange, mais s’il vous plaît pas sur du texte courant en 14px. Sur des titres en gras et avec une taille suffisamment élevée à la rigueur. Vérifier vos contrastes de couleur ET de taille, il y a plein d’outils pour ça !

En version mobile l’intégralité du texte passe en centré. Pourquoi ? Non franchement faut vraiment éviter de faire ça. Surtout avec autant de contenu rédactionnel, la lecture devient difficile.

Il ne faut pas oublier les mentions et liens obligatoires et là aussi ça pique, des liens non explicites « ici » pour la politique de confidentialité ou le désabonnement, c’est pas joli joli.

Design

Bien que les points précédents fassent partie du design et soient perfectibles, c’est bien le template dans son ensemble qui m’a interpellé.

Rappelez-vous ce que j’ai dit en introduction, une première ouverture sur mobile et en dark mode. Bigre ! Normalement c’est exactement le genre de situation dans laquelle les problèmes apparaissent rapidement. Or là c’est justement l’inverse, je me demande comment ils ont fait !

Clairement le Dark mode est bien pensé et optimisé. Aussi bien dans les déclarations de style afin de préserver un contraste entre le fond et le texte lors du changement de mode. Mais également dans la gestion des visuels. Le logo est préservé avec un cartouche blanc très judicieux lorsque la typographie du logo est fine. Ici la technique de contours « blanc » aurait eu un rendu pas très qualitatif. Pour les autres illustrations, ce sont des png transparents très propres et sans soucis.

Une petite parenthèse sur l’optimisation des ressources. Ici Adobe Campaign permet une mise en cache des images ce qui est une bonne chose. Par contre ce qui aurait été mieux c’est d’optimiser le poids des ressources avant leur hébergement. Par exemple, le haut de l’illustration principale fait 57 Ko, c’est pas énorme sauf qu’en quelque seconde grâce à un outil comme TinyPng on économise 70% et le fichier ne fait plus que 17 Ko ! Si vous ne le faite pas pour vos abonné•e•s, faites le pour la planète.

Revenons au design et à ce layout.

Ce qui m’a interpellé et que je trouve bien fait, ce sont les illustrations qui font le liens entre les blocs de contenus en zygzag. C’est purement décoratif certes, mais pas évident à mettre en place, cela demande un bel effort d’intégration technique. D’autant plus que certains sont avec débordement, certains ont des arrondis sur un angle, classe et bien joué !

Et ça passe bien en mobile également !

Cela donne à la composition un rythme original et élégant qui aurait été encore plus prononcé avec une belle hiérarchie de titre.

L’autre point bien vu et qui impose un découpage avancé du HTML comme des images, c’est le bloc d’introduction (hero ou cover). Le visuel chevauche une bande pleine largeur. Original et dynamique.

Un dernier mot ?

Pour conclure, je me pose tout de même la question de la production. Oui, une fois de plus c’est une déformation professionnelle mais lorsque je vois une telle création, je me pose la question.

Faire ceci avec un builder ? Clairement c’est pas ce qu’il y a de plus pratique. Il faut anticiper toutes les découpes d’images, donc en plus du builder avoir accès à un logiciel d’édition.

Donc je pose à nouveau la question : qui réalise ce genre de newsletter ? Quel est le profil de la personne en charge d’une telle campagne et quel est le processus de production ?

En intégration « à la main », pas de souci particulier et nous pourrions en plus aller plus loin sur le design comme sur l’accessibilité. Je vois d’ailleurs très bien notre Thomas challenger ce type de newsletter avec un redesign bien complexe et cerise sur le pompon y ajouter des micro interactions et animations, chiche ?