Salut !
J’espère que ton été et tes vacances se sont bien passés.
Et qu’est ce qu’on fait à la rentrée après avoir glandé sur sa serviette et enchaîné un combo cocktail barbec rosé … ?
Bah on reprend le sport voyons 😉
J’ai décidé de m’y remettre aussi. Mais version email ^^
A travers l’analyse d’une newsletter, on va pouvoir voir ou revoir quelques bonnes pratiques.
Ce sera donc un email sportif mes amis !!
Des préjugés et des marques
Plus sérieusement je suis abonné à la newsletter Adidas après un achat en ligne. Même si j’aime bien cette marque, je n’en fais pas la pub non plus ! Et tu vas vite le voir.
Après plusieurs NLs sans me poser de questions, le côté pro reprend le dessus et puis je clique sur « l’affichage dans un navigateur » puis « code source de la page ».
On a l’envers du décor (après être passé par un indenteur de code en ligne). Je tombe de ma chaise…
Je suis pourtant pas novice dans l’email mais je suis toujours surpris quand je vois le prestige d’une marque et la qualité de leur communication, en l’occurrence les campagnes emailings.
Bref on se dit qu’Adidas est une des marques de vêtements ou de chaussures de sport les plus connues en France et au bien au delà. Donc si c’est connu, il y a des moyens.
Si il y a des moyens, il y a de quoi faire de belles choses propres et efficaces. Mais cela reste à démontrer n’est-ce pas ?
L’email en question
Donc je remonte sur ma chaise et je me plonge dans mon email.
Pour commencer je vois peu de texte en vrai texte, on est sur du presque full images. Voici ce que ça donne sans les images et aussi avec :
D’office ce qu’on peut dire :
1- c’est illisible sans images
2- attention le poids
3- mais surtout je me demande bien : « pourquoi on en arrive là ??? »
Allez on fait vite fait le tour du propriétaire. Certaines choses seront un peu technique mais rien de bien méchant. Et puis si tu as une question n’hésite pas.
Côté design :
Oui c’est un email commercial. Les produits doivent être mis en valeur, ce qui est fait. Mais si les images ne passent pas on ne peut même pas savoir de quel type d’email il s’agit. Certes on a bien un indice ou deux mais pour celui qui n’a pas de temps à perdre…
Après niveau design, chacun son truc. On a quelque chose de simple, de lisible sur fond blanc. Perso je trouve ça sobre et efficace. La version mobile est également travaillée, c’est un bon point. Certes on aurait pu améliorer les tailles des réseaux sociaux ainsi qu’agrandir le CTA, mais passons.
Gros bémol de design : les typos en images ! Bah là avec le fond blanc on voit bien la petite pixellisation qui empêche la netteté des caractères. On peut reconnaitre à force très vite du texte en image ou du texte en texte.
Côté code :
1- le css :
Avec le code indenté j’arrive à 1920 lignes pour un poids total de 114ko juste sur le fichier html’. L’email sera tronqué sous gmail car on dépasse les 102ko. Mais surtout comment justifier autant de lignes de code avec la ‘taille normale’ de cet email.
Entre l’entête de l’email et le css, j’ai presque 1100 lignes !!!
Une petite chose qui saute aux yeux de prime abord, c’est qu’on fait appel à des typographies hébergées. Aucun souci sur cette pratique bien évidemment. Mais vu la quantité de texte à quoi ça sert ?
Réflexe : on va passer par un analyseur de css en ligne. Ça va nous le trier en quelques secondes.
Résultat :
233 classes à enlever dans le css, ça en fait du monde qui ne sert à rien !!!
Ok ici on a donc un template tout fait générique ou un builder email qui n’optimise rien du tout. On a aussi des ‘id’ et des ‘name’ à chaque image, au nombre de 63 en tout. Pas convaincu de leur utilité mais à la limite ça peut servir pour analyser les clics selon certaines plateformes…
On a aussi 4 media queries qui gèrent 3 ‘break point’ : deux à 639 pixels, un à 480 pixels et un à 320 pixels. On aurait pu s’en passer en gérant cela avec des %. Par contre aucune gestion du 120 dpi.
Conclusion :
Rien qu’en cleanant le css avec un outil en ligne on gagne un poids pharaonique.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
2- l’html :
On va pas se leurrer c’est du full images donc il devrait y avoir peu de code. Alors qu’on pourrait avoir le titre, le texte, le CTA, les produits et leurs prix, l’encart appli en texte.
Donc en gros je ne devrais pas avoir des masse de code. Il y a quand même plus de 800 lignes d’html pourtant.
A plusieurs endroits je trouve des pixels de 1 par 1 avec des liens identique au CTA. Il y en a 14 en tout. Pourtant j’ai même le pixel de tracking d’ouverture à la fin de l’email. Donc à quoi servent ces 14 pixels ? Là je ne sais pas répondre clairement mais peut être sont-ils générés par le builder utilisé.
A 7 lignes de code par pixel on en économise quasi 100. Et là bien le bonjour à celui qui doit faire les stats sur les clics de cet email.
Sinon à part des lourdeurs d’encapsulation de <table>, le code passe. On aurait encore pu gagner un paquets de lignes.
3- l’accessibilité :
La base des ‘alts’ remplis est-elle là ? Ok sur le logo et les réseaux sociaux. Par contre rien sur l’image principale et pour les produits on a ceci décliné : ‘Product Recommendation 1’
Et les « role=’presentation' » ne sont pas présent non plus sur les <table> (si besoin se référer ici : https://www.badsender.com/2019/01/23/accessibilite-emails/)
C’est donc très moyen pour passer dans un lecteur d’écran.
Côté hébergement des images :
3 noms de domaines différents pour l’hébergement… C’est pas un modèle de délivrabilité ce genre de principes. Ça renforce ce côté ‘fouillis’ complet.
Côté darkmode :
Encore une fois on est en full images et comme ces dernières sont en fond blanc, le darkmode est correct. Sauf pour le Call To Action qui est en image sur fond noir. On aurait pu aussi mettre plus de marge blanche sur le dernier bandeau. Dommage car si on avait eu du vrai texte et certaines transparences sur les images, on aurait juste eu une inversion blanc/noir des fonds et des textes, ce qui aurait rendu l’email tout aussi esthétique que la version ‘Whitemode’.
Côté écologie :
Un paramètre à prendre en compte maintenant dans le marketing !
Grosse empreinte carbone pour un petit email. On a des images pour rien et un poids html aberrant. On va pas se mentir, cette campagne email n’est pas dans une bonne démarche écologique.
C’est dommage car ici rien n’était complexe pour arriver à quelque chose de correcte.
Conclusion :
Sans surprise c’est un gros flop pour cet email d’une grosse marque.
Flop car l’email est loin d’être à la hauteur de la réputation d’Adidas. C’est cela le souci : quand on est un poids lourd on doit avoir l’image qui va avec. On pense que cela est décliné dans tous les domaines. Y compris celui du marketing et de sa publicité.
Vous imaginez un spot TV pour cette marque avec autant de défauts que dans l’email analysé…
Ce qu’il faut retenir de cet article :
Si vous utilisez un builder email ou des outils génériques, vous pouvez constater que cela peut alourdir considérablement votre email. Du code inutile est embarqué quasi-systématiquement. Alors soit vous pouvez utiliser des outils sur-mesure comme Le Patron soit vous pouvez au moins nettoyer le css parasite.
N’oubliez pas la base d’un email : mettre en texte tout ce qui peut l’être. Ça aide le client et son expérience sur votre newsletter. Et encore une fois on baisse le poids du message. Miser sur un beau design certes ! Mais il ne faut pas que cela se transforme qu’en images.
Bien sûr tout est question de coût aussi. On sait bien qu’en utilisant certains outils ce n’est pas le même prix à la sortie. Mais cela vaut-il le coup de brader sa marque et son image ?
Si vous n’êtes pas sûr de la qualité de ce qui sort de votre builder ou de ce qui est livré par votre agence, tout est d’ailleurs facilement vérifiable. Ce sera l’objet d’un prochain sujet avec les outils utilisés ici pour cette analyse 😉
Et n’oubliez pas que certes on fait du marketing mais on peut aussi le faire d’une façon la plus propre possible au niveau écologie.
Allez je retourne m’entrainer !! Bisous et n’oublie pas hein manger, bouger et tout et tout !!
