Créer des templates d’emails en html
ELEPHANT technologies, c'est l’ESN locale et à taille humaine spécialisée sur 2 métiers : le développement et le pilotage autour de 4 expertises : Embedded & IoT, Digital et Agile.
Aujourd’hui, retrouvez Yohan notre elephantech fullstack qui nous parle de la création d'email en HTML. Il va commencer par vous expliquer l'intérêt d'écrire des emails en HTML, puis les solutions pour régler les problèmes d'alignement et de structures lorsque le taux de couverture de certaines applications est faible .
Introduction
De nombreuses applications web nécessitent l’envoi d’emails automatique à des usagers tiers. On peut penser évidemment à la confirmation de commande pour du e-commerce, à la gestion des mots de passe et de la sécurité en général ou plus simplement à des newsletters.
Si l’envoi d’email de manière automatisée ne pose pas de difficulté majeure en soi et ce, quel que soit le langage utilisé, il s’avère cependant plus difficile de générer des emails en HTML.
Pourquoi écrire des emails en HTML ? Tout simplement car, contrairement à du texte brut, on peut facilement rajouter du style et le faire ressembler à une page web moderne en termes d’intégration d’images, de vidéos, l’ajout de boutons pour des liens par exemple, la responsivité...
C’est aujourd’hui ce qu’on retrouve majoritairement, par exemple pour confirmer un rendez-vous sur Doctolib ou informer d’un abonnement Netflix ou d’une commande Amazon.
Ce qui tombe bien, c’est qu’écrire des pages en HTML et ajouter du style en CSS, c’est ce que les développeurs font déjà tous les jours pour des pages front (merci captain obvious !). Ça ne devrait donc pas poser de difficultés particulières de faire la même chose avec des emails, n’est-ce pas ?
Problématique
Eh bien en fait si. Et la raison est la suivante :
Source : https://www.caniemail.com/scoreboard/ consulté en avril 2023. En vert, ce qui est supporté ; en orange, ce qui est partiellement supporté ; en rouge, ce qui n’est pas supporté et en gris, ce qui n’est pas connu.
Ce tableau présente les fonctionnalités HTML et CSS supportées par les différentes solutions de client d’email. Plus de 250 fonctionnalités ont été testées et les résultats ont été mis à jour en décembre 2022 (à l’heure d’écrire l’article).
Si des fonctionnalités utilisées dans un email ne sont pas ou partiellement supportées, cela veut dire que l’affichage de l’email ne correspondra pas à l’attendu, avec des décalages, des polices, couleurs et alignement différents etc… Bref, la structure et le style des différents éléments de l’email ne seront pas conformes.
Si, comme on peut le constater, les solutions sur macOS et iOS donnent en général de bons scores (plus de 90% de fonctionnalités supportées pour AppleMail et Outlook par exemple), le niveau de ce qui est supporté baisse rapidement quand on passe sur des solutions utilisant les navigateurs web : autour de 50-60% pour Outlook et Gmail. On reste à peu près dans la même gamme pour la majorité des solutions Android. Ce score devient même très mauvais pour certains clients lourds Windows comme Outlook (Windows ou Windows Mail) : environ 20% de fonctionnalités supportées seulement !
Or, non seulement le taux de couverture de fonctionnalités supportées varie énormément d’une solution à une autre et donc d’un utilisateur à un autre, mais en plus, certaines solutions parmi les plus utilisées dans le monde comme Outlook présentent un taux de couverture très bas. Autrement dit, si on souhaite envoyer un email, on est obligé de prendre en compte le faible taux de couverture de certaines applications comme Outlook sous Windows (merci Microsoft)…
Une des raisons à ce très mauvais score pour Outlook provient du fait qu’il repose historiquement sur Microsoft Word pour l’affichage des emails. Cela pouvait se comprendre il y a 20 ans lorsque les emails comportaient principalement du texte de manière basique, mais ce n’est évidemment plus du tout d’actualité aujourd’hui… Plus généralement, la plupart des clients de messagerie font des modifications sur les emails pour des raisons techniques ou de sécurité.
Parmi les fonctionnalités peu ou mal supportées par certaines solutions de messagerie, on peut citer :
-
Le padding sur les paragraphes (permet de gérer les espacements)
-
Certaines polices et les fallbacks de police (permettent d’avoir une police « de secours »)
-
Hover (le survol d’éléments pour pouvoir afficher un texte par exemple)
-
Les balises html <div>
Solutions
Heureusement, il est quand même possible de s’en sortir.
Tout d’abord, on peut contourner une bonne partie des problèmes d’alignement entre les composants en utilisant des tableaux html classiques. Rester simple, en particulier dans la structure du mail, permet d’éviter de nombreux écueils.
Enfin, se baser sur des fonctionnalités communes, par exemple en utilisant des polices qui sont supportées par toutes les solutions de messagerie comme Arial ou Helvetica (pas le Times New Roman svp) permet de garantir un rendu uniforme sur toutes les plateformes.
On peut également utiliser des frameworks spécialisés comme MJML ou Foundations for emails (tous deux gratuits) qui permettent de simplifier le code en utilisant leurs propres solutions de templates. Ces frameworks nécessitent un certain temps de prise en main mais permettent d’éviter la plupart des écueils et de faciliter l’écriture et la lisibilité du code.
On remarque que les deux solutions MJML et Foundations for emails utilisent les tableaux html et proposent d’en simplifier l’écriture et l’intégration au travers de balises custom sur lesquelles on peut également appliquer du style. Elles permettent aussi de gérer plus facilement la responsivité, donc le fait d’avoir un affichage adapté aux différents formats d’écran : smartphone, tablette, ordinateurs…
Ces deux solutions sont aussi adaptées à l’intégration de valeurs dynamiques via Thymeleaf par exemple. Concrètement, cela permet d’assigner des variables dans le html au moment de la génération de l’email. On peut d’ailleurs utiliser des boucles via les syntaxes th:if et th:each, ce qui peut ressembler alors à quelque chose comme :
Exemple d’utilisation de Thymeleaf et de Foundations for email pour générer des emails dynamiques
On notera d’ailleurs qu’on peut facilement intégrer des templates au sein d’autres templates permettant la réutilisation de templates génériques comme on le fait avec les frameworks front (autreTemplate dans l’exemple ci-dessus).
Enfin, de manière générale et dans le cas de la création d’emails en particulier, il ne faut pas hésiter à tester. Tester sur navigateur, Outlook, Gmail etc… pour être sûr que le rendu est conforme sur la plupart des solutions de messagerie. Car typiquement, même si Outlook supporte globalement moins de fonctionnalités que Gmail, une fonctionnalité supportée sous Outlook ne l’est peut-être pas sous Gmail… Les solutions présentées ci-dessus proposent d’ailleurs de faciliter la réalisation de tests manuels.
Conclusion
Si envoyer des emails de manière automatique en html apporte de nombreux avantages, la génération des templates peut s’avérer complexe et fastidieux du fait des taux de support de fonctionnalités html/css des différents clients de messagerie. Plusieurs solutions peuvent heureusement être utilisées pour simplifier leur écriture, s’assurer d’un minimum de compatibilité et obtenir un affichage des emails clair et moderne.
🐘 Nous remercions Yohan pour son article, et si vous souhaitez découvrir d'autres articles tech: c'est juste ici
Sources :
https://www.caniemail.com/scoreboard/
https://css-tricks.com/choosing-a-responsive-email-framework%E2%80%8Amjml-vs-foundation-for-emails/
https://kinsta.com/fr/blog/creation-envoi-e-mail-html/
https://www.litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients/