MJML : une solution pour faciliter la création de newsletters responsive et maximiser leur compatibilité

On les croyait disparues, elles sont plus que jamais de retour : les newsletters. Les réseaux sociaux auront essayé, en vain, de les remplacer. Leurs propriétés sont aujourd’hui appréciées des professionnels du marketing, qui imaginent des usages précis et des scénarios parfois complexes pour répondre à toutes sortes de problématiques. Ce regain d’intérêt pour les newsletters est associé à la disponibilité de nouvelles possibilités techniques. Et pourtant, on crée toujours nos newsletters en HTML avec des balises Table, TR et TD ; car sinon, c’est compliqué.

Le MJML, pour aller plus loin que les tables HTML

Ce contexte technique, relativement limité, ne permet pas de concevoir des emails à la fois complexes et compatibles avec la majorité des clients (lister les possibilités , etc.). Il existe des dizaines de messageries (Gmail, Outlook…), plusieurs navigateurs plus ou moins à jour (Chrome, Firefox…), de nombreux types de terminaux (desktop, mobile), plusieurs systèmes d’exploitation, plusieurs applications… Optimiser ses emails pour tous les écrans est un challenge. Un challenge auquel le MJML tente de répondre, via le développement d’un standard, conçu avec un objectif : la compatibilité avec tous les clients. Thomas Deneulin, CTO chez DeliPress, est venu présenter cette technologie prometteuse au Web2day.

Un markup language dédié à la conception des emails

Le MJML est un markup language, développé en JavaScript, open source et totalement gratuit. La première release date de 2016, il a été conçu par des développeurs de Mailjet (MJML signifie Mailjet Markup Language) qui souhaitaient faciliter la création des newsletters. Depuis, le langage s’est amélioré au fur et à mesure des releases, soutenu par une communauté de développeurs très active (lancement d’une API, réécriture du code sans React, développement de nouvelles fonctionnalités, amélioration de la compatibilité etc.).

Un langage facile à prendre en main

La problématique de l’emailing est souvent la suivante : la conception d’une structure responsive, mobile first, avec des tables HTML. Ce n’est pas malheureusement pas suffisant pour proposer des menus, des carousels ou des menus accordéons (beaucoup utilisés sur les sites web pour présenter des FAQ ou pour segmenter fortement des contenus qui n’ont pas vocation à être lus dans leur ensemble). MJML tente de répondre à cette problématique en proposant des composants clé en main adapté à la conception d’emails.

 Un langage proche du HTML…

Le langage ressemble beaucoup au HTML, que ce soit dans sa structure ou dans les composants supportés. On retrouve ainsi un head (<mj-head>) et un body (<mj-body>) composé de sections et de colonnes, un peu comme sur le framework Bootstrap, avec un responsive géré automatiquement et des styles appliqués par défaut pour faciliter la conception des templates.

… avec un head…

Le head permet de gérer les attributs par défaut des différents composants, notamment le style. Vous pouvez créer et appliquer des classes (alors que c’est plutôt déconseillé dans la création d’emails en HTML) et même des polices personnalisées. Dans ce cas, il est conseillé de les appeler via Google Fonts pour éviter tout problème de compatibilité et de disponibilité.

… et un body.

Dans le body, on peut ajouter de nombreux composants (texte, image, bordures, marges, tableaux, boutons… Ce sont des composants de base, permettant d’intégrer facilement un texte, une photo, des boutons et de les agencer proprement avec des bordures et des marges. D’autres composants vont plus loin : on pense à mj-navbar pour créer de vrais menus dans vos emails (hamburger ou responsive, au choix), à mjml-carousel pour intégrer des carrousels (bien que la compatibilité ne soit pas parfaite sur ce composant) et des mj-accordion pour créer des contenus en accordéon. Le langage est conçu pour s’adapter à tous les clients : si le système de l’utilisateur ne supporte pas l’affichage en accordéon, le texte sera automatiquement déroulé pour qu’il accède à l’ensemble du contenu (fallbacks).

Une communauté active et des outils dédiés

Le développement de cette technologie est intéressant, car au-delà des développeurs de chez Mailjet, une communauté active l’améliore au quotidien (on dénombre plus d’une centaine de repositories sur GitHub). Des packages existent pour la plupart des éditeurs, au moins pour la coloration de la syntaxe. Une application permet aussi de coder en MJML et de visualiser le rendu en temps réel. Et si vous utilisez Mailjet, vous pouvez insérer votre clé API afin d’envoyer des tests sans quitter l’éditeur. Une API est disponible ainsi que des outils pour facilement convertir vos fichiers MJML en fichiers HTML.

Si vous n’êtes pas développeur, vous pouvez également utiliser des outils pour concevoir facilement vos emails en MJML (Topol, DeliPress, GrapeJS…). DeliPress permet notamment de créer des emails facilement avec du contenu issu de WordPress, sans quitter le backoffice (insérer facilement les contenus d’un post, personnaliser le design…). Cet outil peut vous intéresser si votre newsletter se résume à une sélection d’articles WordPress.

Si les problématiques de compatibilité et de conception facilitée des emails vous intéresse, vous pouvez consulter le site officiel, mjml.io, ou sur le site de Mailjet : fr.mailjet.com/feature/mjml/