Qu’est-ce que MJML ?
MJML est un langage de balisage conçu pour faciliter la création de newsletter. Le moteur open-source se charge de traduire le MJML en HTML. Ce langage va aider pour la création d’e-mails responsive en générant le code qui formera la newsletter. Les utilisateurs de cet outil n’ont plus qu’à rédiger leur mailing en MJML, qui est un langage de balisage simple, et le moteur de rendu leur donnera automatiquement le code HTML.
La sémantique est bien différente par rapport à la création de newsletter classique puisque vous n’utiliserez plus les tableaux et les colonnes. C’est MJML qui le fera pour vous. La syntaxe est facile à apprendre avec de simples balises telles que <mj-body>, <mj-section>, <mj-column>, <mj-text>, <mj-image>…
MJML prend en compte nativement le responsive avec une reconnaissance des différents services de messagerie tels que Gmail, Yahoo Mail et Hotmail.
Voir toute la documentation sur le site dédiée :
MJML – The Responsive Email Framework
L’exercice consiste à créer une newsletter en MJML :
Etape 1 : Visual Studio Code
La newsletter est construite avec l’éditeur de code Visual Studio Code.
Note :
Pour ré-indenter tout le code :ctrl + alt + f
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, avec un responsive géré automatiquement et des styles appliqués par défaut pour faciliter la conception des templates.
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é.
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.
Etape 2 : Exportation en HTML
Une fois la newsletter terminée, il ne reste plus qu’à exporter la page MJML en HTML. Il suffit de faire un clic droit sur la page, sélectionner Palette de commandes dans la fenêtre, puis MJML: export HTML. Enfin il ne reste plus qu’à appuyer sur ‘entrée’ pour confirmer. Une page html sera donc générée à partir de la page MJML.
Une autre possibilité est de passer par Powershell, un interpréteur de commande, en faisant shift + clic droit sur le dossier www, puis ouvrir la fenêtre PowerShell et entrer la commande suivante : mjml newsletter-b.mjml -o newsletter-b.html.
Pour voir la version en ligne, il faudra créer un sous-domaine sur o2switch : mjml.pascalfurlan.com et mettre en ligne le fichier principal renommé index.html ainsi que le logo dans un dossier images.
Etape 3 : la vérification
Pour tester et optimiser l’affichage de la newsletter, on va utiliser Inbox inspector et ainsi la prévisualiser dans plusieurs services de messagerie, tels que Gmail, Outlook, ou même Android.
