Blog

Juil 15

Templates d’emails responsive avec MJML.io

MJML.io est un framework qui a la prétention de rendre rapide et indolore l’intégration de templates d’emails responsive. Découverte.

Au cours du mois de juin, j’ai pris le temps d’essayer le framework MJML, dont la promesse est de rendre simple l’intégration d’emails responsive. Si vous vous êtes déjà frottés à cet exercice, vous devriez comprendre que l’attrait était fort puisque, il faut le dire, c’est un véritable BORDEL : les clients, nombreux et variés (de Gmail à Outlook en passant par le webmail Orange…), ont chacun leurs normes et leurs limites. Faisant assez peu d’emailing, à part du transactionnel (confirmations de paiement, etc), je ne peux pas me permettre de tenir mes connaissances parfaitement à jour dans ce domaine, le temps que ça demanderait est vraiment trop important. Je suis donc parfaitement dans la cible de MJML, et j’en attendais beaucoup.

MJML est un framework sorti des labs de Mailjet, un service en ligne qui permet d’envoyer des mails en SMTP via une API simple mais efficace.

Spoiler alert : je n’ai pas été déçu.

MJML : le principe

Le framework définit des balises HTML étendues comme « mj-column » qui sont traduites en HTML+CSS classique par un exécutable. Le HTML généré peut alors être utilisé directement dans votre appli, et est censé passer proprement dans la plupart des clients email.

Getting started : installation et premier essai

Bonne nouvelle ici: l’installation se fait très rapidement via npm par un classique npm install mjml. Le binaire installé prend en charge des file watcherset le live-reload out-of-the-box.

Si vous n’avez pas encore utilisé ce genre de choses, il s’agit d’un système qui vise à surveiller les fichiers que vous éditez, pour les « recompiler » à la volée et rafraîchir la page où vous affichez le fichier. Ca permet de gagner un temps fou, puisque vous n’avez besoin ni de relancer la compilation à chaque modif, ni même de garder un doigt près de F5, ni de switcher d’une fenêtre à l’autre pendant que vous bossez.

Il y a un éditeur en ligne (« Try it Live ») mais je préfère utiliser mon éditeur habituel pour ce genre de tâches, à savoir PhpStorm. Malheureusement, pas de plugin particulier pour un support avancé (avec autocompletion par exemple), mais en enregistrant un type de fichier .mjml parsé comme du HTML, j’ai déjà pu avoir la coloration syntaxique et une indentation propre (Control+Alt+L sous PhpStorm… découvert récemment et immédiatement devenu indispensable). Ca me suffira pour le moment.

Pour faciliter la prise en mains, MJML propose une quinzaine de d’exemples de templates. le framework. Le code MJML est fourni, ils se transpilent sans modification ; tous ne sont pas forcément démentiels, mais largement suffisants pour prendre MJML en mains.

Laravel Blade

J’ai testé ce framework pour les mails transactionnels de mon service Soumettre.fr : mail de bienvenue, confirmation de paiement, alertes lors de publications, etc. Ce projet étant développé sous Laravel, il fallait absolument que MJML soit capable de me sortir du HTML compatible avec Blade, le moteur de templates du site. Aucun souci : les variables blade {{ $variable }} ne sont pas parsées, en cas de souci, il y a une balise <mj-raw> qui permet de faire du literal.

Le template email

Au total, il m’aura fallu une petite heure, installation comprise, pour arriver à une première version du mail qui puisse passer en production. Celui-ci est simple mais efficace.

About The Author

Leave a reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *