Exemple d'email : Outside

Pour dénoncer de mauvaises pratiques de conception email dans cette newsletter de sport, que diable ! et aussi pour embêter mon collègue Olivier, que je sais féru d’escalade, grimpe et autres pratiques outdoor : je SAIS que tu aurais sans doute aimé t’en occuper l’ami, sans rancune !

Je commencerai par le design de l’email…

J’aime. Beaucoup. C’est sobre, épuré, esthétique en même temps. Ça respire. Les typographies utilisées ne sont pas trop nombreuses et sont des typos websafe ou polices systèmes (Arial et Georgia). En tout cas, ça donne cette impression. Les codes graphiques du média sont tout à fait respectés, avec les codes couleurs pertinents. Les visuels sont très beaux, immersion garantie, tout-ça-tout-ça… Bref, c’est bien sympa, mais y a-t-il des points qui mériteraient une optimisation ? ET BIEN OUI, MONSIEUR-MADAME !

• Le header, comprenant le bouton « S’abonner », le logo « Outside » et le menu, est en fait une grosse image. Arrrrrrgggghhh ! Si je m’écoutais, je concevrais le bouton « S’abonner » en HTML et CSS avec une couleur de fond et des coins arrondis en border-radius (et tant pis si les coins arrondis s’affichent carrés sur quelques environnements d’ouverture), les onglets du menu seraient évidemment des textes en HTML : non seulement pour pouvoir les modifier facilement, mais aussi pour qu’ils s’affichent dès l’ouverture de l’email, sans téléchargement des images. Et j’irai même jusqu’à m’amuser à essayer de reproduire le logo « Outside » en texte avec une mise en forme en CSS : rien de bien complexe, une petite ombre portée qui ne s’affichera pas partout non plus, rien de bien dramatique. Tout ça pour dire que si j’ouvre l’email sans avoir affiché les images, le haut de l’email est bien vide ! Et je ne vous parle même pas du rendu sur mobile (c’est la même image, mais redimensionnée… Les onglets du menu sont très, très, très petits…)
• Les titres des articles sont des images, eux-aussi. Quel malheur ! Outside, si vous cherchez à obtenir exactement le même rendu que sur votre site, sachez que l’emailing est un domaine bien particulier, où il vaut mieux penser à l’expérience utilisateur qu’au rendu parfait au pixel près. Pour les titres donc, soit vous appelez la police souhaitée si elle est hébergée de votre côté (en acceptant qu’elle ne soit pas supportée partout), soit vous appelez une Google Font proche en terme de rendu (en acceptant qu’elle ne soit pas supportée partout), soit vous appelez une websafe font comme la Georgia (qui est pourtant bien la typo de substitution sur votre site). DANS TOUS LES CAS, LES TITRES DOIVENT ÊTRE EN HTML ! 🙂
• Vous imaginez bien que si les titres sont en images, les séparateurs jaune en dessous le sont aussi. Et vous n’avez pas tort. Pourtant, rien de complexe à les coder en HTML et CSS.
• Mis à part cela, je suis rassuré de constater que les textes des articles ainsi que leurs boutons sont bien en HTML. Ouf !

J’enchaînerai sur le code…

• Beaucoup de code. Trop de code. Et je vois des indices qui me laissent à penser que l’ensemble a été produit depuis le framework mjml. Le problème, c’est que ce type de framework développe beaucoup de code, même pour les éléments les plus simples. Reprenons notre grande image de header : rien que pour une image, nous avons trente lignes de code, comprenant 4 tableaux HTML imbriqués. C’est bien trop pour une simple image. Et forcément avec, des reset CSS à gogo (font-size, padding, padding-bottom, padding-top, padding-right, padding-left, word-break…). Je crois ne pas prendre trop de risque en affirmant qu’il serait sans doute possible de réduire le poids final du fichier HTML d’au moins 1/3 avec un template fait à la main et roulé sous les aisselles.
• La technique Fluid utilisée pour coder cet email est intéressante (avec des max-width). Pour autant, la version mobile ne s’adapte pas du tout comme elle le devrait. La faute peut-être aux largeurs fixes renseignées sur les visuels ? Mais là, je ne m’aventurerai point plus : étant donné qu’aucune page miroir n’existe, j’ai récupéré le code depuis mon environnement d’ouverture. Il n’est pas dit que des éléments aient été supprimés ou modifiés…

Et je finirai sur le contenu.

• D’où qu’il est le lien de page miroir ?
• Les textes des articles sont un peu trop longs à mon sens, ce qui rend la newsletter particulièrement longue, elle aussi. J’opterai pour des textes un peu plus courts, en se concentrant sur l’information principale, pour susciter le clic sur le bouton associé. C’est d’ailleurs le cas sur l’article « Alex Honnold s’attaquera-t-il un jour à l’Everest… alors qu’il déteste l’alpinisme ? »
• Les boutons des articles sont légèrement redondants… « Lire la suite », peut faire mieux j’ai envie de dire ! On alterne sur la rédaction de ces appels à l’action, pour donner envie d’aller lire l’intégralité de l’article sur le site, ou découvrir d’autres contenus.
• Les personnes sensibles aux causes écologiques ou environnementales ont, dans mon esprit, un fort sentiment communautaire et en même temps, un esprit de partage et d’altruisme : d’une manière ou d’une autre, il serait pertinent de proposer davantage de possibilités de partage, sur les articles ou sur la newsletter. Via un transfert de newsletter en mailto par exemple ? Ou par l’introduction de lien de partage sur les réseaux sociaux personnalisés ?
• Enfin, pourquoi ne pas profiter de la newsletter pour rappeler les engagements du média Outside ? Comme par exemple leur participation au mouvement « 1% for the Planet » ? Un petit encart en bas de la newsletter, ça mange pas de pain (j’adore cette expression, elle me donne faim) et ça fait l’taf !