Encore aujourd’hui, il est difficile d’intégrer des emails à partir de rien. Malheureusement, le rendu des clients mail sur mobile, desktop et navigateurs n’est pas du tout unifié et il faudra encore beaucoup de temps pour que ce le soit. Pire encore, les techniques modernes d’intégration ne sont pas disponibles. Oubliez flexbox et grid, les tableaux sont vos nouveaux meilleurs amis.
L’intégration d’email est ainsi une expertise à part entière, qu’on ne détient pas toujours dans son entreprise ou qui prend une éternité à maîtriser. Heureusement, des outils existent pour pallier ce manque d’expertise et nous économiser du temps de l’intégration au débug.
Nous avons à disposition plusieurs types d’outils:
- les builders, online ou offline, permettent de créer des emails en glissant des blocs HTML configurable sans toucher au code
- le framework email, un ensemble de fonctionnalités accompagné d’un langage propre qui se traduit en HTML.
- les boilerplate, des templates d’email avec des patterns de bloc réutilisables
Pourquoi utiliser un framework email ?
Avec un framework email vous pouvez implémenter de multiples templates d’email simplement sans avoir de grandes connaissances de l’intégration d’email tout en ayant la maîtrise et la propriété de votre code. Éviter les erreurs d’intégrations d’email les plus fatales devient alors un jeu d’enfant.
5 frameworks HTML, CSS et responsives
Plusieurs critères sont à prendre en compte dans le choix de n’importe quel framework. Ici nous allons comparer framework avec les critères suivants :
- Popularité sur Github
- Fonctionnalités principales
- Est-il toujours actif ?
- Est-il facile de l’intégrer avec un framework MVC ou un CMS ? (plugins, cli, packages dans le langage cible…)
- DX (Developper Experience) (plugins d’éditeur de code/texte, documentation, guides…)
MJML
MJML est un framework basé sur des balises et des composants customisés qu’il transforme en HTML responsive. Open-source, il est notamment développé et maintenu par Mailjet et l’utilise principalement pour son builder. Ce framework email est le plus populaire à ce jour, culminant à 14.6k étoiles sur Github.
Il est utilisable aussi bien en ligne, avec sa prévisualisation en temps réel, que hors-ligne avec son application desktop et son package node.js.
Ce framework est encore bien maintenu et très suivi, ce qui est un atout pour pouvoir suivre les changements dans le monde des moteurs de rendus d’email sans trop d’inquiétude. MJML n’étant pas infaillible, vous avez aussi à disposition des tableaux de compatibilité disponibles pour chaque composants.
Fonctionnalités principales
- Une liste composants allant des colonnes à des carrousels avec une possibilité de créer ses propres composants
- Un éditeur avec prévisualisation en temps réel qui est aussi disponible hors-ligne avec une application
- Une liste de templates à disposition dans différents thèmes (transactionnel, newsletter, e-commerce…)
- Un binaire exploitable avec juste Node.js d’installé. Une seule ligne de commande suffit alors de transformer du mjml en HTML responsive
- Des extensions et des linters pour les principaux éditeurs de texte/code
- Des guides qui couvrent un usage basique ou plus poussé
- Disponible sur Ruby On Rails, Node.js, Symfony, Laravel…
Un seul bémol, l’API des options des composants est parfois trop fermée à la personnalisation. Ce qui peut se comprendre puisqu’il est très facile de casser un email avec quelques propriétés, mais pour des développeurs avancés, ce peut être un frein.
Cerberus
Atteignant les 4.6k étoiles sur Github, Cerberus est très apprécié et recommandé par la communauté de l’email. Ce n’est pas un framework à proprement parler, mais un ensemble de templates et de patterns robustes et testés sur un très faible nombre de clients mail. Il ne requiert donc aucune installation et peut se moduler à l’infini pas vos soins.
Grâce à sa documentation très détaillée, vous pouvez en même temps monter en compétences sur la création d’emails.
Fonctionnalités principales
- Une liste de templates et de composants parés pour tous les clients mails. Chaque composant est expliqué, autant ses limites que ses moyens de personnalisation
- Une liste des meilleures pratiques pour la création d’email
- Une liste de template contenant une base solide de composants comme des colonnes, contenu avec média à gauche ou à droite, un héro…
Utiliser un inliner de CSS sur Cerberus n’est pas recommandé.
Foundation for Emails 2
Foundation for Emails 2, anciennement Inky, est aussi un framework avec un langage qui lui est propre et composants à disposition. C’est le framework dans cette liste qui a le plus de longévité et atteint aujourd’hui 7.7k étoiles sur Github.
Fonctionnalités principales
- Fonctionne avec du CSS ou Sass
- Utilise un CSS/Sass inliner, qui transforme des règles css en attribut style, ce qui nous évite de faire des copiés-collés d’attribut style
- Une compatibilité avec 30+ clients mails robuste et mise à jour régulièrement
- Une multitude de templates à personnaliser
- Des modules disponibles pour faciliter son intégration dans plusieurs framework
Quelques templates ne sont pas mis à jour (images cassées) et le style semble dépassé, mais restent une très bonne base pour commencer. De plus, il n’est pas aussi mis à jour que MJML. Si vous rencontrez un bug récent dans les clients mails ou dans le framework, il se peut qu’il ne soit pas traité tout de suite.
Maizzle
Maizzle, à ce jour, culmine à 1.7k étoiles sur Github, malgré son jeune âge. C’est un framework vraiment intéressant si vous êtes déjà dans l’éco-système Tailwind CSS. En effet, il permet d’utiliser les classes utilitaires de ce framework css très prisé. De plus, vous pouvez partager votre config Tailwind avec celle Maizzle et ainsi conserver votre source de vérité pour vos design tokens.
Fonctionnalités principales
- Transforme des classes Tailwind CSS en style inline
- Création de ses propres composants réutilisables
- Possibilité d’écrire ses templates email avec du markdown Github
- De multitudes fonctionnalités de traitement à postériori comme le css inliner, génération de texte brut, le nettoyage de CSS inutilisé ou encore l’ajout automatique de paramètre d’url (ex: utm)…
- Des exemples de composants HTML comme des boutons
- Hot reload
- Autocomplétion des classes Tailwind CSS avec Tailwind CSS IntelliSense
Avec Maizzle vous êtes libre de coder l’HTML que vous voulez, il vous faut alors chercher les bonnes pratiques, la compatibilité de votre code sur les différents clients mails par vous même à l’aide Pacomail, Caniemail, Litmus ou encore Email On Acid.
Bojler
Bojler est un petit framework utilisant Sass qui culmine à 974 étoiles sur Github. Il propose une panoplie de composants à travers une liste de snippets de code disponible dans sa documentation. Ces composants couplés à des classes BEM sont configurables sans réécrire de CSS grâce à leurs variables Sass.
Fonctionnalités principales
- Style minimal, proche d’un design system, configurable avec des variables Sass
- CSS inliner
- Style de reset qui permet de lisser votre style de base pour qu’il soit le même sur tous les clients emails
- Classes CSS utilitaires qui modifient la couleur, la couleur de fond ou encore ajoutent du padding à vos éléments sans jamais écrire dans l’attribut style grâce l’inliner de CSS
- Un système de grille pour vous aider à placer votre contenu en colonne
Bojler propose une bonne base, son point fort est son style par défaut configurable qui peut faire penser à un bootstrap mais en beaucoup plus léger et moins restrictif. Il vous faudra de bonnes connaissances en construction d’email pour aller plus loin tout de même.
Acorn
Acorn par The Mountain est aussi un petit framework à 90 étoiles sur Github. Il ne requiert aucune installation et se base sur des bouts d’HTML couplé avec du CSS responsive écrit avec des media queries.
Ce qui le différencie des 4 autres frameworks cités précédemment, qui sont des frameworks dits “hybrides” qui gèrent Outlook avec des tableaux dont l’affichage est conditionné, est que c’est un framework email dit responsive, qui gère l’affichage mobile uniquement à l’aide de media queries. Encore à ce jour, les media queries ne sont pas supportées par les comptes non Gmail utilisés dans Gmail webmail, android et iOS, les emails créés avec Acorn verront donc leurs versions desktop.
Autrement, Acorn a été testé avec moult clients mail et de navigateurs et convient parfaitement à des mails destinés à un grand nombre d’utilisateurs.
Fonctionnalités principales
- Très léger
- Composants complexes à réaliser seul (un tableau de prix, accordéons…)
- Système de grille préconçu à 4 colonnes
- CSS Reset
- Documentation claire et formatrice. Chaque conception de bout de code est expliquée, accompagnée d’un exemple visuel et le code correspondant.
- Classes utilitaires et responsives (ex: .show-sm, .hide-sm)
Acorn est encore mis à jour, mais les prévisualisations responsives, à l’heure à laquelle cet article est rédigé, sont cassées. On déplore aussi l’absence de template d’email préfaits pour se lancer plus rapidement.
Vous avez maintenant toutes les armes pour réaliser de superbes mails transactionnels ! N’oubliez pas, une fois intégrés, de les tester avant de les mettre en production. Branchez votre application à Pacomail et vérifiez qu’ils arriveront correctement à votre destinataire.
Sources: