C’est assez rare pour le souligner, donc voici un mail qui respecte un principe très cher à mes yeux : la dissociation des contenus textuels du design. Autrement dit, les textes sont pensés dès le design pour être conçus en HTML dans l’email, et non en images. Et je parle bien ici de TOUS les textes ! Onglets de menu, titres, boutons et appels à l’action, édito, descriptif produit, prix… Vous les voyez, ces titres faits de typos avec empattement et sans empattement, en rouge et noir ? Bah c’est du code HTML, pas une image… Même le texte présent dans la cover et entouré par la bordure rouge est en HTML ! Tous les textes vous dis-je !
Quels sont les avantages de cette méthode ? Si vous vous pouvez la question, c’est que vous n’avez jamais lu un de mes articles 😀 :
- Améliorer l’accessibilité de la campagne : les lecteurs d’écran pourront plus aisément parcourir ces contenus textuels et les restituer aux destinataires
- Proposer quasiment l’intégralité de l’email DI-REC-TE-MENT visible et lisible dès l’ouverture de l’email, sans téléchargement obligatoire des images. On fait ainsi économiser une action aux destinataires, pour concentrer les interactions sur les clics des appels à l’action.
- Simplifier la mise à jour du contenu : pas besoin de créer des images à chaque fois et d’avoir des compétences en design, il suffit juste de changer le texte dans le code HTML.
Je ne le répèterai jamais assez, mais il est primordial, à mon sens, d’arrêter de concevoir des emails en full image, comprenant des textes dans des images. C’est une perte de temps, et un non-sens en accessibilité. C’est une balle tirée dans le pied de sa propre campagne. Acceptez le fait que l’email est un domaine particulier, où votre typographie propre à votre marque ne sera pas supportée. Trouvez un équivalent dans les typos websafe. Acceptez le fait que les dégradés de couleurs ne sont pas supportés partout non plus. Ni les coins arrondis. Ni la vidéo. Ni les formulaires. Ni tout plein de choses. Rédigez, une bonne fois pour toute, un design system EMAILING (spécifique à l’email) et vos templates emailing avec vos textes EN HTML ! Désolé, j’insiste beaucoup…
Voilà ! Je pourrai (et je vais) pousser le bouchon un peu trop loin en disant qu’au point où on en est, vous auriez pu, chez La Grande Epicerie De Paris, accepter le fait que votre logo soit, lui-aussi, dans une « autre » typo, pour pouvoir le concevoir, de la même façon… En full HTML et CSS 😉