Je pensais avoir trouvé un bon exemple email de « less is more« . Un design de newsletter venant de ArtStation qui m’a parlé de par sa simplicité et sa clarté. Mais qui est loin d’être exempt de tout défaut…
The good
Dans ce qui me plaît, c’est le design. C’est clair, c’est épuré, sans fioriture. Quelques blocs de contenus facilement identifiables, des boutons clairs et contrastés. Tout est lisible, même si la typo aurait gagné à être un petit peu plus grande.
Un modèle de newsletter qui présente son contenu sans mettre de fioritures. Une newsletter que j’ai envie d’aimer et que j’avais choisie à la base comme un bon exemple. Oui mais…
The bad
Quand on gratte un peu, derrière ce design épuré, il y a beaucoup de choses qui ne vont pas. Particulièrement en accessibilité. Pas de role="presentation" sur les <table>, pas de texte alternatif sur toutes les images (même celles qui contiennent du texte), des contrastes de couleurs trop faibles pour passer les tests d’accessibilité.
Petit rappel des bonnes pratiques avec notre guide à ce sujet.
The ugly
Et quand on vérifie le rendu dans les clients emails, alors là…
Ça casse dans Outlook. La faute à la présence de balises de type <ul> et <li> mal gérées pour créer des listes.
Le comportement du soulignement des liens n’est pas défini, donc suivant les clients emails, les liens seront soulignés ou pas.
Il ne faudrait pourtant pas grand chose pour améliorer ça: Tous les points mentionnés peuvent se régler assez facilement, et cela ferait passer cet email d’un « c’est si simple et pourtant si mal fichu… » à « c’est épuré et efficace. Top! »
Comme quoi, même avec un design basique il y a moyen de se rater.
Pour éviter ce genre de problèmes, vous devez soit avoir une personne compétente pour créer vos fichiers HTML, soit utiliser un email builder qui tient compte de l’accessibité. Pour en citer un seul au hasard: LePatron 😉