HTML
,MJML
MJML : le secret des emails responsives réussis
MJML, ou l'outil qui vous permettra de coder facilement des mails responsives et compatibles partout (Outlook, Gmail, Apple...)
Murat
01 juin 2021
MJML : le framework qui simplifie la création d’emails responsives
Vous voulez créer des newsletters professionnelles et adaptées à tous les écrans, mais vous ne savez pas comment faire ? Vous en avez marre de vous battre avec le code HTML et les hacks pour rendre vos emails compatibles avec tous les clients de messagerie ? Alors, vous allez adorer MJML, le framework qui simplifie la création d’emails responsives. MJML est un langage de balisage qui vous permet de créer des emails responsives facilement, en utilisant des tags simples et intuitifs. Avec MJML, vous n’avez plus besoin de vous soucier des problèmes de compatibilité, de design ou de performance de vos emails. MJML s’occupe de tout, et vous offre un résultat optimal sur tous les supports. Dans cet article, nous allons vous montrer comment utiliser MJML, ses avantages, ses fonctionnalités, et comment le tester et le déployer facilement. Vous verrez que MJML est un outil puissant et pratique, qui vous fera gagner du temps et de la qualité dans la création de vos emails.
Qu’est-ce que MJML et pourquoi l’utiliser ?
MJML est un langage basé sur le XML, qui vous permet de créer des emails responsives sans avoir à vous soucier du code HTML et des hacks. MJML utilise des balises sémantiques, qui sont ensuite converties en HTML compatible avec la plupart des clients de messagerie, y compris Outlook. MJML vous fait gagner du temps, de l’énergie et de la qualité dans la conception de vos emails.
MJML a été développé par Mailjet, une entreprise française spécialisée dans l’emailing. MJML est un projet open-source, qui bénéficie d’une large communauté de contributeurs et d’utilisateurs. MJML dispose également d’une documentation complète et de nombreux exemples de templates pour vous inspirer.
Comment fonctionne MJML ?
MJML repose sur une syntaxe simple et intuitive, qui utilise des balises pour définir les différents éléments de votre email. Par exemple, vous pouvez utiliser les balises suivantes :
<mjml>: la balise racine, qui englobe tout le code MJML.<mj-body>: la balise qui contient le corps de votre email.<mj-section>: la balise qui définit une section de votre email, qui peut contenir une ou plusieurs colonnes.<mj-column>: la balise qui définit une colonne de votre email, qui peut contenir différents types de contenu, comme du texte, des images, des boutons, etc.<mj-text>: la balise qui permet d’insérer du texte dans votre email, avec des attributs pour modifier la police, la couleur, la taille, etc.<mj-image>: la balise qui permet d’insérer une image dans votre email, avec des attributs pour modifier la largeur, la hauteur, le lien, etc.<mj-button>: la balise qui permet d’insérer un bouton dans votre email, avec des attributs pour modifier la couleur, le texte, le lien, etc.<mj-divider>: la balise qui permet d’insérer un séparateur dans votre email, avec des attributs pour modifier la couleur, l’épaisseur, etc.
Vous pouvez trouver la liste complète des balises et des attributs disponibles sur la documentation officielle de MJML.
Voici un exemple de code MJML :
<mjml><mj-body><mj-section><mj-column><mj-image width="100px" src="/assets/img/logo-small.png"></mj-image><mj-divider border-color="#F45E43"></mj-divider><mj-text font-size="20px" color="#F45E43">Hello World</mj-text><mj-button background-color="red" align="center" color="#ffffff" font-size="17px" font-weight="bold" href="https://google.com" width="300px">RSVP Today</mj-button></mj-column></mj-section></mj-body></mjml>
Et son résultat en HTML :
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><title></title><!--[if !mso]><!-- --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">#outlook a {padding: 0;}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]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!--[if lte mso 11]><style type="text/css">.mj-outlook-group-fix { width:100% !important; }</style><![endif]--><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css"><style type="text/css">@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);</style><!--<![endif]--><style type="text/css">@media only screen and (min-width:480px) {.mj-column-per-100 {width: 100% !important;max-width: 100%;}}</style><style type="text/css">@media only screen and (max-width:480px) {table.mj-full-width-mobile {width: 100% !important;}td.mj-full-width-mobile {width: auto !important;}}</style></head><body><div style=""><!--[if mso | IE]><tablealign="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--><div style="margin:0px auto;max-width:600px;"><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"><tbody><tr><td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"><!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><tdclass="" style="vertical-align:top;width:600px;"><![endif]--><div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"><tr><td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"><tbody><tr><td style="width:100px;"><img height="auto" src="/assets/img/logo-small.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100" /></td></tr></tbody></table></td></tr><tr><td style="font-size:0px;padding:10px 25px;word-break:break-word;"><p style="border-top:solid 4px #F45E43;font-size:1px;margin:0px auto;width:100%;"></p><!--[if mso | IE]><tablealign="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #F45E43;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"><div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:20px;line-height:1;text-align:left;color:#F45E43;">Hello World</div></td></tr><tr><td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:300px;line-height:100%;"><tr><td align="center" bgcolor="red" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:red;" valign="middle"><a href="https://google.com" style="display:inline-block;width:250px;background:red;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:17px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"> RSVP Today </a></td></tr></table></td></tr></table></div><!--[if mso | IE]></td></tr></table><![endif]--></td></tr></tbody></table></div><!--[if mso | IE]></td></tr></table><![endif]--></div></body></html>
Cela fait beaucoup de code et surtout beaucoup de hack pour un simple écran avec un logo, un texte et un bouton.
Mais c’est bien ce dont on a besoin pour avoir un email compatible avec tous les clients.
Développement
Vous voulez juste un code HTML compatible tout client ?
Pour obtenir un code HTML à partir de MJML, vous n’avez qu’à vous rendre sur le site web de MJML et saisir votre code MJML. Vous verrez alors le résultat en HTML et en aperçu visuel.
Vous pouvez également profiter des nombreux templates proposés par MJML, qui vous permettent de créer des emails adaptés à vos besoins et à votre secteur d’activité.
Vous voulez intégrer l’outil dans votre flux de développement ?
Par contre si vous souhaitez intégrer juste mjml dans votre processus de développement, il vous suffira alors, dans votre projet de lancer :
yarn add mjml -D
Et de créer un script dans votre package.json par exemple.
scripts: {"mjml2html": "./node_modules/.bin/mjml -r template.mjml -o template.html"}
Qui transformera alors votre fichier .mjml en .html.
Si vous utilisez Visual Studio Code, vous pouvez également installer une extension mjml pour voir en live le rendu de votre fichier.
Conclusion
En rédigeant ce billet, je me suis dit que je ne voulais plus revivre le cauchemar des années 2000 avec Internet Explorer 6. Personnellement, je n’ai plus envie d’apprendre des hacks, ou un langage compliqué comme le VML, pour simplement intégrer un email.
C’est pourquoi je préfère toujours vérifier si un outil (open-source de préférence) existe afin de m’éviter ces problèmes. Et si ça n'existe pas, à nous de peut-être le développer :)
