MJML : un framework pour rendre vos newsletters responsives !

Partager

Article mis à jour le 24 janvier 2023 | Publié le 22 juin 2018

C’est une tendance qui revient à la mode en ce moment : la newsletter. On la croyait remplacée par les réseaux sociaux il y a quelques années, mais elle est toujours là et sa popularité remonte de plus en plus.

Cette croissance est surtout due à la pratique du marketing automation et donc à l’automatisation des tâches (dont l’emailing). Cette semaine, la rédaction de Numendo vous propose de découvrir le framework MJML : un outil qui va vous permettre de créer de belles newsletters optimisées pour tous types d’écrans !

Un Framework qui répond aux besoins de la newsletter

Que vous soyez développeur, chargé de communication ou community manager, vous avez forcément envoyé des newsletters, mais vous avez surtout tous rencontré le même problème : la compatibilité. Il est compliqué d’envoyer une newsletter qui s’affiche correctement sur tous les supports (gmail, outlook, etc) ou sur tous types d’appareils. C’est exactement sur ce problème que MJLM s’est penché !

Une prise en main facile

Le langage est très intuitif et facile à apprendre : il est très proche du HTML et s’utilise grâce à une API. Une newsletter réalisée par MJML se présente comme une page HTML (à quelques exceptions près), voici un aperçu d’un DOM basique :

See the Pen eKrqOZ by Aaron (@leox47) on CodePen.


Ce code permet d’afficher un header avec un background et un titre le tout en couleur. Au premier coup d’oeil, on observe beaucoup de similitudes avec le HTML mais aussi avec le CSS. On constate également qu’il y a différentes balises qui permettent de mieux structurer la newsletter, mais aussi d’insérer des composants inédits.

Quels composants sont disponibles sur MJML ?

Ils sont applicables à deux endroits : dans le head et dans le body. Voici quelques fonctionnalités qui ont retenu notre attention.

Les composants de la balise head

Ces modules sont en réalité des éléments fondamentaux que l’on utilise en HTML/CSS. Ils sont ici présentés de manière simplifiée. Voici quelques-uns de ces composants :

Les composants de la balise body

Enfin des modules permettant de réaliser des newsletters originales et design ! Voici selon nous les composants du body les plus intéressants :

accordion

Exemple d’application du module accordéon. (source : mjml.io)

 

Voici le code correspondant au module (source : mjml.io) :

See the Pen mKLNJG by Aaron (@leox47) on CodePen.

carousel

Démonstration du carrousel (source : mjml.io)

Le code adéquat (source : mjml.io)

See the Pen aKGedw by Aaron (@leox47) on CodePen.

wrap

Le code correspondant :

See the Pen zajgBZ by Aaron (@leox47) on CodePen.

Une communauté qui contribue à l’amélioration du framework

Comme la plupart des outils de développement web, le projet est en open-source et il est possible d’y apporter sa contribution grâce à la page GitHub et NPM du projet. Ce travail communautaire a permis d’améliorer le framework voire de créer de nouveaux composants comme le mjml – chart, qui permet d’afficher les graphiques sous forme d’images dans les e-mails.

Vous l’aurez compris, MJML est un framework qui facilite grandement la création de newsletters. Nous vous encourageons à l’essayer et à nous envoyer vos créations !

Vous pouvez toujours suivre notre blog pour être au courant des dernières tendances du développement web.

Vous serez peut-être aussi intéressé par ces articles

Depuis quelques mois, les développeurs de Numendo ont pu découvrir et tester les nouveautés de Symfony 4 : célèbre framework PHP made in...

Image représentant les actualités

Plusieurs années après avoir créé une extension de Tor sur Firefox, Mozilla a refait une collaboration avec le navigateur à l’Onion. Le but...

Vignette PWA pour blog Numendo

Un sujet différent cette semaine puisque l’on vous parle des PWA : des applications combinant web apps et mobile. Est-ce l’avenir du...

Ce site web stocke des données telles que les cookies pour activer les fonctionnalités nécessaires du site, y compris l'analyse. Vous pouvez modifier ces paramètres à tout moment ou accepter les paramètres par défaut.
Préférences en matière de dépôt de données

Lorsque vous visitez des sites Web, ils peuvent stocker ou récupérer des données dans votre navigateur. Ce stockage est souvent nécessaire pour la fonctionnalité de base du site Web.
L’analyse peut être utilisée comme stockage. La confidentialité est importante pour nous, vous avez donc la possibilité de désactiver ce type de stockage qui n’est pas être nécessaire pour le fonctionnement de base du site Web. Le blocage de l’analyse peut avoir un impact sur votre expérience sur le site Web.

Nous utilisons des cookies pour personnaliser votre expérience sur Numendo.