Coder ses emails sans douleur avec MJML

Coder un email est un exercice douloureux et schizophrène : comment être à la fois beau et responsif tout en restant assez rustique pour être compatible avec les applications de messagerie mobile et desktop et les webmails. C'est donc face à cet exercice que je me suis retrouvé récemment avec ma boîte de paracétamol. N'ayant guère l'envie de voyager au temps de Netscape et du fameux tableau dans le tableau, j'ai procrastiné tant que j'ai pu jusqu'au moment où MJML est apparu sur mon écran au détour d'un surf.

MJML (Mailjet Markup Language) est un langage de balisage créé en 2016 par Mailjet, une solution emailing française. Ce langage, écrit en JavaScript et open source, est entièrement dédié à l'email. Le code MJML génère le HTML qu'il vous faut sans migraine. Sa syntaxe sémantique le rend facile à prendre en main et sa bibliothèque de composants standard facilite le développement.

Notez que l'abstraction qu'offre MJML garantit d'être toujours à jour avec les évolutions de spécifications et de contraintes des clients de messagerie.

Installation

Pour utiliser mjml-cli deux solutions.

Avec Yarn

Je crée un fichier .bashrc.

# .bashrc
$ touch .bashrc

J'ajoute cette ligne.

# .bashrc
export PATH="$(yarn global bin):$PATH"

J'installe globalement MJML.

$ yarn global add mjml --prefix /user/local

Pour générer le html, je crée un script dans le package.json.

# package.json
...
"scripts": {
"mjml":"mjml email.mjml --output email.html"
}
...

Avec Yarn ou NPM

J'installe MJML.

$ yarn add mjml
# ou
$ npm install mjml

Pour générer le html, je crée un script dans le package.json.

# package.json
...
"scripts": {
"mjml":"./node_modules/.bin/mjml email.mjml --output email.html"
}
...

Si vous avez un Chromebook ou si vous ne souhaitez pas l'installer, il existe une version de MJML en ligne.

Si vous utilisez Visual Code Studio, je vous encourage vivement à installer le plugin MJML d'Attila Buti. Il dispose entre autre, d'une previsualisation directe dans l'éditeur. Plugins disponibles également pour Atom et Sublime Text.

Templating

MJML utilise un système de composants. Ils sont divisés en 3 groupes : mjml, mj-head et mj-body.
Je ne vais pas faire une revue exhaustive de tous les composants MJML, mais juste exposer quelques exemples significatifs de ce langage.

Layout de base

Le layout de base est très proche du html.

<!-- email.mjml -->
<mjml lang="fr">
<mj-head></mj-head>
<mj-body></mj-body>
</mjml>

Composants mj-head

Parmi les composants mj-head, on trouve la balise <mj-breakpoint> qui permet de contrôler le point de bascule entre affichage mobile et desktop.

La balise <mj-attributes> permet de modifier les attributs par défaut sur 3 niveaux :

  • <mj-all> tous les éléments
  • <mj-text> sur un type de composant (ici le bloc texte)
  • <mj-class> classe css disponible pour tout le document
<!-- email.mjml -->
<mj-head>
<mj-breakpoint width="320px" />
<mj-attributes>
<mj-all font-family="Arial, 'Helvetica Neue', Helvetica, sans-serif" />
<mj-all font-size="16px" />
<mj-text padding="0" />
<mj-class name="gray" color="#cccccc" />
<mj-class name="bgcolor" background-color="white" />
</mj-attributes>
</mj-head>

Composants mj-body

On trouve d'abord une série de composants dédiés au layout : <mj-wrapper>, <mj-section>, <mj-column> et <mj-group>.
Ensuite une série de composants pour la mise en page: <mj-spacer> ou <mj-divider>.
Enfin des composants pour les éléments : <mj-text>, <mj-social>, <mj-image>, <mj-hero>, <mj-button> ou <mj-accordion>.

Voici un exemple de mise en page basique.

<!-- email.mjml -->
<mj-body>
<mj-section mj-class="bgcolor">
<mj-column>
<mj-text align="center" padding-bottom="12px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</mj-text>
</mj-column>
</mj-section>
</mj-body>

Focus sur le composant mj-hero

Le composant <mj-hero> est très intéressant. Il permet d'afficher une section avec une image en arrère-plan et du contenu à l'intérieur. Il possède 2 modes : fixed-height ou fluid-height.

<mj-hero mode="fixed-height"
height="469px"
background-width="600px"
background-height="469px"
background-url="https://picsum.photos/id/537/600/469"
padding="100px 0px"
mj-class="bgcolor">

<mj-text align="center"
padding="20px"
color="#ffffff"
font-size="45px"
line-height="45px"
font-weight="900">

Voyager dans l'espace
</mj-text>
<mj-button href="https://mjml.io/" align="center">
Commandez votre ticket maintenant
</mj-button>
</mj-hero>

Validation MJML

MJML fournit un outil de validation. Pour l'utiliser il suffit de créer un script.

# package.json
"scripts": {
"mjml:validate": "mjml --validate email.mjml",
}
# ou
"scripts": {
"mjml:validate":"./node_modules/.bin/mjml --validate email.mjml"
}

Liens