Mjml est un framework qui va vous permettre de coder vos émails responsive beauxoup plus facilement et donc plus rapidement. Fini les <td> à répétition pour créer un émail séduisant. Grâce à sa syntaxe très simple, mjml va vous simplifier la vie.
Le language mjml est tout simplement du html simplifié, et avec seulement quelques minutes passé sur la documentation, l'on s'apperçoit que c'est intuitif, et l'on peux ainsi démarer rapidement.
L'installation
Mjml est dévelopé avec node.js, l'installation est donc facilité, il vous suffit d'utiliser la commande suivante pour l'installer globalement.
npm install -g mjml
Premiers pas
Avant de créer son premier fichier, si comme moi vous utilisez Sublime text, vous trouverez un package MJML-Syntax pour cet éditeur. Pour ceux qui utilisent Atom c'est language-mjml.
Voici un exemple de fichier mjml
<mj-body>
<mj-section>
<mj-column>
<!-- First column content -->
</mj-column>
<mj-column>
<!-- Second column content -->
</mj-column>
</mj-section>
</mj-body>
La compilation
Il faut ensuite compiler le fichier, pour cela vous avez cette commande
mjml -r input.mjml -o output.html
il est aussi possible d'utiliser une commande qui permet de compiler votre fichier à chaque modification de celui-ci
mjml -w input.mjml -o output.html Il est bien sur possible d'utiliser son outil de tâches automatisées préféré, dans mon cas c'est Grunt . Vous trouverez un plugin pour ajouter cette tâche supplémentaire à vos fichiers déjà en surveillance grunt-mjml.
Et finalement ça donne quoi comme code html
Voici un exemple de fichier de sortie Html par rapport à l'exemple ci-dessus
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass * { line-height:100%; }
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300);
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport { width:320px; }
@viewport { width:320px; }
}
</style>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300" rel="stylesheet" type="text/css">
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-50, * [aria-labelledby="mj-column-per-50"] { width:50%!important; }
}</style></head>
<body id="YIELD_MJML" style=""><div class="mj-body"><!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
<![endif]--><div style="margin:0 auto;max-width:600px;"><table class="" cellpadding="0" cellspacing="0" style="width:100%;font-size:0px;" align="center"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0;padding:20px 0;"><!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:300px;">
<![endif]--><div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;" class="mj-column-per-50" aria-labelledby="mj-column-per-50"><table width="100%"><tbody></tbody></table></div><!--[if mso]>
</td><td style="width:300px;">
<![endif]--><div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;" class="mj-column-per-50" aria-labelledby="mj-column-per-50"><table width="100%"><tbody></tbody></table></div><!--[if mso]>
</td></tr></table>
<![endif]--></td></tr></tbody></table></div><!--[if mso]>
</td></tr></table>
<![endif]--></div></body>
</html>
Mon avis
Pour moi c'est simple, je n'utilisais pas d'outil pour créer mes emails. Et j'ai trouvé mjml très simple à utiliser et facile à apprendre. De plus il s'intègre parfaitement avec mes autres outils.
De mon côté c'était juste "l'essayer c'est l'adopter" ...
Social