Exemple d'email : Time To Sign Off

Rolala, pour tant de raisons… Mais d’abord, petite parenthèse : je viens de traiter le sujet des sommaires et ancres internes dans les newsletters, où j’en concluais que des textes bien rédigés, une belle structuration et une conception graphique soignée de la newsletter devait suffire et permettre de se passer de ce type de fonctionnalité (sommaire et ancres internes, donc). La newsletter de Time To Sign Off en est, à mon sens, un très bon exemple.

• Je suis instinctivement un véritable cheminement dans la lecture des textes, avec des articulations entre les différents chapitres : un vrai travail de rédaction derrière chaque newsletter, et pas « juste » une succession d’articles les uns sous les autres ! Cette cohésion textuelle prend le lecteur par la main pour l’accompagner dans la lecture totale de l’email, jusqu’à la fin.
• La hiérarchisation graphique de l’importance des éléments est vraiment bien présente : différences majeures entre les tailles des textes, mise en exergue grâce au gras ou à l’italique, soulignement travaillé sur les liens hypertextes : le texte vit !
• Les pictos discrets à la fin de chaque chapitre pour un partage facilité sur les réseaux sociaux, quel kif ! Et cette petite surprise du picto whatsapp : très judicieux ! Je trouve d’ailleurs qu’on ne pense peut-être pas assez aux applis mobile pour les emails.
• J’apprécie grandement l’utilisation de balises sémantiques : des balises <p> (pour les paragraphes), et même des balises <h1> ou <h2> (c’est vraiment rare d’en voir !). C’est top, parce que niveau accessibilité, ça veut dire que les lecteurs d’écran pourront spécifier à leurs utilisateurs qu’il s’agit de paragraphes, de titres, etc… Et ça c’est très bien, ça fait partie des bonnes pratiques à appliquer !
• L’ajout de l’attribut role avec la valeur presentation sur les tableaux <table> HTML pour préciser aux lecteurs d’écran qu’il s’agit de tableaux pour la mise en forme et non de tableaux de données, c’est parfait !
• L’utilisation aussi de marges internes padding plutôt que des cellules vides pour créer les espacements entre les « blocs », c’est super ! Ça limite le poids du code HTML !
• Je retrouve dans le code une mise en forme graphique des textes alternatifs des images : nous avons un débat interne sur cette utilité chez Badsender, mais personnellement je suis toujours admiratif quand le travail est fait jusqu’au bout ! Je suis quelque peu… Perfectionniste.
• Tout ce qui peut être en texte EST en texte et mis en forme avec du CSS. J’adoooooore ça ! Cette newsletter est une démonstration que l’on peut faire du « beau », graphique et esthétique, avec du texte pur en HTML et de la mise en forme graphique en CSS.

Et puis je retrouve des petits points techniques un peu plus surprenants :

• L’utilisation des balises <picture> et <source> pour les images : ça montre à quel point la technique est maîtrisée, pour la gestion du logo en dark mode. Bravo ! Perso, je suis pas sûr que je m’y serai risqué…
• Le fait d’assumer un rendu dégradé sur certains environnements d’ouverture : clairement, le rendu de l’email n’est pas idéal sur des environnements d’ouverture BtoB comme Outlook logiciel de bureau pour Windows, mais je n’ai pas l’impression que cela dérange la marque : comme si la méthode d’intégation et de développement (utilisation de <div>, de la propriété CSS max-width, de la propriété CSS display avec la valeur inline-block) avait été choisie en corrélation avec les habitudes de consultation des destinataires, principalement BtoC j’imagine !
• Le jeu sur l’épaisseur de soulignement des liens hypertextes avec une épaisseur de 2px grâce à la propriété CSS text-decoration-thickness et la couleur spécifique attribuée au soulignement avec la propriété CSS text-decoration-color, je trouve ça subtil et magique !
• Les effets de survol sur les liens hypertextes et les pictogrammes : j’aime quand on vient intégrer des petits effets comme ceux-ci. Ça ne coûte pas grand-chose, et le petit effet wahou est là.
• La gestion de la bordure jaune des éléments « commentaires » : la bordure n’est justement pas gérée en tant que bordure, mais comme couleur de fond du tableau comprenant la cellule avec marge interne où se situe le texte… Bref, c’est assez original comme façon de faire ! Et même si je ne comprends pas le pourquoi, j’imagine que cela doit avoir un rapport avec le rendu sur dark mode… Non ?
• Le lien de page miroir est placé en bas de page, dans le footer : sans doute pour remonter au maximum le contenu de la newsletter.
• 3 couleurs, en tout et pour tout. 3 ! Orange, bleu et blanc. Vous le croyez ça ! Et forcément, limiter le nombre de couleurs permet aussi d’améliorer la lisibilité de la newsletter.

Bref, du travail bien fait, efficace, réfléchi, comme je les aime.