Mjml : framework pour des emails responsive

Présentation

MJML est un framework open-source, développé par Mailjet en collaboration avec Dernier Cri,  qui a pour but de faciliter l’écriture des emails responsives.

MJML est un nouveau langage qui évite aux développeurs de se prendre la tête avec toutes les contraintes des compatibilités de clients mails, de terminaux. Il génère le code à la place des développeurs : ces derniers rédigent leur message en MJML, langage sémantique et simple, et le moteur associé produira automatiquement le code HTML responsive correspondant.

Il n’y a pas de système de grille comme souvent en responsive mais MJML permet de découper l’email en sections horizontales et en colonnes verticales. En mobile, les colonnes viennent s’empiler et prennent toute la largeur de l’écran. Il existe une balise spécifique si on veut un rendu mutli colonnes en mobile.

mjml

Installation

Le code écrit avec MJML est en fait converti en HTML par le package NPM. Il est donc indispensable de l’avoir. Il faut d’abord installer NodeJS et NPM :

Ensuite, lancer la commande pour installer MJML :

sudo npm install -g mjml

Pour convertir le fichier .mjml en .html, il faut utiliser la commande suivante :

mjml -r index.mjml -o index.html

Démonstration

Pour créer des templates et se familiariser avec le langage MJML, je vous invite à suivre la documentation pas à pas : https://mjml.io/documentation/.

Pour faire des essais en live, vous pouvez utiliser l’outil suivant : https://mjml.io/try-it-live.

SublimeText

Il existe un package pour faciliter l’édition dans SublimeText (coloration de la syntaxe, snippet, autocomplétion..). C’est disponible sur Github et sur le site Sublime Package Control.

 

Sources :

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.