Intégration d’emails responsives avec MJML

En tant qu’intégrateur HTML, nous sommes souvent sollicités pour intégrer des newsletters / campagnes promotionnelles pour des clients.

La mise en forme de ces newsletters est assez chronophage car nous devons intégrer les éléments d’une maquette via des tableaux, et aussi veiller à ce que les styles utilisés soient pris en charge par les messageries électroniques les plus utilisées.

Toutes ces problématiques nous ont amenés à chercher un outil qui nous permettrait de créer ces newsletters plus rapidement, tout en s’assurant de leur compatibilité.

mjml

Qu’est ce que MJML ?

MJML ( https://mjml.io ) est un framework permettant de créer des emails responsives avec plus de rapidité et efficacité qu’en partant de zéro, ou d’un éditeur html.

Grâce à cet outil, vous aurez moins de code à taper, et assurerez la compatibilité entre webmails / logiciels de messagerie tout en gagnant un temps précieux.

Les prérequis

MJML nécessite l’installation de NodeJS (que vous trouverez ici), NodeJS est un serveur web basé sur le javascript.

Comment l’installer ?

L’installation de ce framework nécessite que vous ayez installé au préalable « npm » (Node Package Manager) , il vous suffit de taper :

npm install mjml

Via MS-DOS ou le Powershell de Windows.

En se déplaçant dans le dossier où l’on souhaite travailler, il suffit de lancer cette ligne de commande pour lancer MJML :

mjml -r index.mjml

Une fois votre newsletter créée vous pouvez l’exporter au format HTML avec cette ligne de commande :

mjml -r index.mjml -o index.html

Comment l’utiliser ?

Il vous faudra d’abord écrire la structure de base :

<mjml>

<mj-body>

<mj-container></mj-container>

</mj-body>
</mjml>

Ce framework est divisé en plusieurs composants :

Ceux de base :

 

<mj-section>

 

 

Ajout d’un conteneur

 

<mj-column>

 

 

Ajout d’une colonne

 

<mj-text>

 

 

Ajout de texte personnalisable

 

<mj-section background –url=’’/img/bg.jpg’’>

 

Ajout d’une image de fond (sous reserve de prise en compte pour les webmails / logiciels de messagerie)

 

 

<mj-image src="/img/image.jpeg"></mj-image>

 

 

Ajout d’un visuel

Ceux plus avancés

<mj-social mode="vertical" display="google facebook" google-icon-color="#424242" facebook-icon-color="#424242" facebook-href="Mon Facebook" google-href="Mon google+ page" />

 

Ajout des boutons de réseaux sociaux
<mj-invoice format="0,00.00€" intl="name:Nom">
<mj-invoice-item name="TV" price="549€" quantité="1" />
<mj-invoice-item name="DVD - Iron Man II" prix="22.99€" quantité="2" />
</mj-invoice>
Création d’une facture avec un design simple. Ce module ne supporte que l’anglais
<mj-table>
<tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
<th style="padding: 0 15px 0 0;">Année</th>
<th style="padding: 0 15px;">Langage</th>
<th style="padding: 0 0 0 15px;">Inspiré de</th>
</tr><tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
</tr><tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Formation</td>
</tr>
</mj-table>
Génération d’un tableau de données

 

<mj-location address="37 bis, rue du Sentier 75002 Paris" />

 

Faire apparaître une icône Google Map ainsi qu’une adresse

 

<mj-button font-family="Helvetica" background-color="#f45e43" color="white">
Ciquez ici
</mj-button>
Générer un bouton d’action

 

          <mj-list>

<li>Aller au supermarché</li>

<li>Dormir</li>

<li>Manger</li>

<li>Retourner dormir</li>

</mj-list>

 

Génération d’une liste à puce

 

<mj-navbar background-color="#ef6451">
<mj-column width="20%">
<mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
</mj-column>
<mj-column width="80%">
<mj-inline-links base-url="https://mjml.io">
<mj-link href="/gettings-started-onboard" color="#ffffff">Lien 1</mj-link>
<mj-link href="/try-it-live" color="#ffffff"> Lien 2</mj-link>
<mj-link href="/templates" color="#ffffff"> Lien 3</mj-link>
<mj-link href="/components" color="#ffffff"> Lien 4</mj-link>
<mj-link href="/documentation" color="#ffffff"> Lien 5</mj-link>
</mj-inline-links>
</mj-column>
</mj-navbar>
 

Navigation responsive

 

<mj-hero mode="fixed-height" height="469px" background-width="600px" background-height="469px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="100px 0px">
<!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
<mj-hero-content width="100%">
<mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45" line-height="45" font-weight="900">
GO TO SPACE
</mj-text>
<mj-button href="https://mjml.io/" align="center">
ORDER YOUR TICKET NOW
</mj-button>
</mj-hero-content>
</mj-hero>
Ensemble d’éléments comprenant : une image de fond, un texte et un bouton centrés sur la hauteur de la zone.

 

Pour en savoir plus sur les composants gérés par MJML, je vous invite à consulter la documentation sur le site officiel ici.

 

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.