MJML, un nouveau langage open source pour le développement d’emails

Les origines de MJML

Outre la délivrabilité (à savoir le fait que vos emails arrivent bien en boîte de réception), l’engagement de vos destinataires est également conditionné par leur expérience à la réception de votre email. En un mot, si 50 % des messages sont lus sur mobile, il est plus important que jamais de concevoir des messages responsive, dont le format s’adapte à toutes les tailles d’écrans. Voilà pourquoi, début 2015, nous avons lancé Passport, un outil en glisser-déposer pour faciliter la création d'emails responsive.

En surface, Passport permet aux utilisateurs de créer rapidement un email à l'aide d'un simple glisser-déposer. Mais lorsque l’on creuse l’outil, il y a un moteur derrière qui traduit ces simples actions en un code HTML responsive. Sur le plan technique, le message est « décrit » sémantiquement au moteur en JSON, puis le moteur le traduit en code HTML responsive. Plus précisément, le message est décomposé et « décrit », élément par élément, en JSON au moteur qui, en conséquence, génère un HTML responsive.

Nous avons rapidement réalisé que ce moteur pourrait avoir un impact bien plus large en dehors de Passport. Que se passerait-il si nous mettions cet outil entre les mains de nos utilisateurs, ou si nous leur permettions de dialoguer directement avec le moteur ? Pour le savoir, nous avons tout simplement choisi d’essayer.

Pour rendre l’ensemble plus convivial et user-friendly, nous avons décidé de remplacer JSON par un langage de balisage, de façon à le rendre presque identique au HTML. Ainsi, les principes fondamentaux du langage MJML restent connus de tous, offrent une difficulté de prise en main moindre, tout en intégrant l’aspect responsive du rendu. Nous avons créé des balises telles que <mj-section> et <mj-column>  et afin que vous puissiez rédiger des emails adaptés à vos besoins, rapidement et en toute simplicité.

D’un langage de balisage à une bibliothèque de composants open source

Bien qu’il soit impossible de résumer tous les types d’emails (newsletters, messages de bienvenue, facturation… la liste est infinie), la structure du contenu ne change pas vraiment d’un email à l’autre. Le cœur d’un email responsive repose sur un modèle de colonne simple. En revanche, le processus de conception sous HTML peut souvent s'avérer chronophage, répétitif et relativement pénible.

Prenons l’exemple type qu’est un email de facture. En HTML, le code ressemblera à ceci :

La bonne nouvelle est que le moteur MJML s’appuie sur React.js, qui permet d’utiliser et de créer des composants facilement. Vous nous suivez ? MJML vous permet donc de remplacer le code effrayant ci-dessus par celui, beaucoup plus sémantique et charmant, ci-dessous :

Tous les codes HTML générés seront également compatibles avec les principaux clients de messagerie.

Remerciements à la communauté MJML

Nous n’aurions jamais été en mesure de concevoir MJML sans les enseignements de notre communauté : vous. Partant de ce constat, il aurait été injuste de ne pas partager cette technologie... Ainsi, nous avons souhaité que le langage MJML soit en open source sous licence MIT. De cette manière, la communauté pourra exploiter facilement toute la puissance de MJML. La licence MIT est incroyablement simple et accessible. Contrairement à la licence GPL, elle permet d’intégrer le langage MJML à une application plus importante sans avoir à rendre l’ensemble de ladite application open source.

Autrement dit, vous pouvez utiliser MJML pour créer des emails HTML et intégrer le moteur MJML à une application comme vous l’entendez. Mais vous pouvez également contribuer à son amélioration à nos côtés. Si vous souhaitez en savoir plus sur le fonctionnement même de MJML, consultez la page documentation.

En termes de contributions à l’outil, vous pouvez par exemple nous aider à faire en sorte que la sortie HTML de MJML soit parfaite et cohérente avec le plus grand nombre de clients de messagerie possible. Nous espérons que la richesse des composants MJML vous pousseront aussi à créer de nouveaux éléments qui répondront à vos besoins (de l’en-tête que vous réutiliserez dans toutes vos communications aux messages plus spécifiques à votre activité). S’il vous manque un composant quelconque, le mieux est de le créer pour que d’autres personnes en bénéficient également ! Nous consulterons régulièrement les requêtes sur Github pour ajouter ces composants créés par la communauté à la bibliothèque MJML.

Notre ambition est de développer MJML accompagnés par notre communauté, afin de l’améliorer au fil du temps et de répondre au mieux à vos attentes. Nous ferons également des mises à jour régulières pour intégrer tout changement affectant le rendu HTML des clients de messagerie les plus répandus, pour que vous restiez à la pointe de la messagerie électronique !

MJML est en ligne dès maintenant, n’hésitez pas à aller le tester. Nous avons hâte d’avoir vos retours, partagez vos avis dans les