Des limitations chez les éditeurs

Chez Breizhtorm, nous utilisons Mailchimp pour envoyer nos campagnes de mailing. L’éditeur de templates de Mailchimp est très complet et, comme certains de ses concurrents, propose pléthore de composants qui vous permettront de créer des newsletters aux contenus riches et au design attractif.

 

 

 

 

Mais en matière de responsive design, qui rappelons-le permet un affichage optimal de l’e-mail quelque soit le terminal sur lequel on le consulte (ordinateur de bureau, tablette, mobile, télé connectée, …), on reste tout de même sur sa faim.

 

 

C’est tout petit !

 

 

Ce serait tout de même plus agréable si l’on pouvait a minima bénéficier des 2 fonctionnalités suivantes :

• Mettre des sections de contenus en pleine largeur
• Modifier l’alignement de blocs de contenu en fonction de la taille de l’écran (viewport)

 

La seule solution est alors de construire soi-même son propre template HTML “from scratch”, ce qui est une véritable croisade en regard du nombre de clients mails du marché. Tous ces clients n’offrent pas le même support des nombreuses techniques qui pourraient permettre de faire un joli template bien responsive : media queries, fluid layout, tables, etc.

Et c’est donc pour cette raison que l’éditeur de templates de Mailchimp et ceux de la concurrence restent généralement très limités en la matière.

 

 

MJML à la rescousse

Au hasard de nos recherches sur la question, nous sommes donc tombés sur le projet MJML, développé par des membres de l’équipe de Mailjet, et qui est à la base de leur excellent outil de création d’e-mail, Passport, l’un des seuls à ma connaissance qui actuellement propose les concepts de responsive design précédemment cités. De quoi vous faire revenir sur votre choix de prestataire en matière de mailing, mais là n’est pas la question …

La promesse est simple : faciliter la création d’e-mails responsives, sur la base d’un langage très accessible.

 

Le principe de fonctionnement est tout aussi facile d’accès : on écrit son template dans un langage balisé (comme on pourrait écrire du HTML), et on laisse le moteur MJML transcrire le tout pour obtenir le fichier HTML final de son template.

C’est écrit en nodeJS, donc ça s’installe en 2 secondes :

 

sudo npm i -g mjml

 

 

Le moteur peut être exécuté à la demande :

 

mjml -r source.mjml -o mon-email.html

 

 

Ou automatiquement dès qu’un changement est effectué sur le fichier source :

 

mjml --watch source.mjml

 

 

Quelques exemples

La sémantique MJML repose sur des concepts simples :
L’e-mail possède, comme toute page HTML, un corps. Ce corps est obligatoirement divisé en sections (des lignes), puis en colonnes. Ce sont ces colonnes qui vont recevoir votre contenu. La structure de base d’un template en MJML ressemble donc a minima à cela :

 

<mj-body>
    <mj-section>
        <mj-column>
            LE CONTENU
        </mj-column>
    </mj-section>
</mj-body>

 

 

Pour l’instant, notre mailing ne va pas donner grand chose. Rentrons dans le vif du sujet : nous souhaitons que le corps de notre mail soit sur fond blanc, avec un header en bandeau sur fond bleu marine. Dans ce header, nous voulons un logo sur la gauche et une baseline sur la droite, et que ces 2 éléments se comportent comme 2 blocs responsives : la baseline passe sous le logo sur les petits écrans. Il nous suffit alors d’écrire le code MJML suivant :

 

<mj-body background-color="#FFF">
    
    <!-- LE HEADER -->
    <mj-section background-color="#1a2b4d" full-width="full-width">

        <!-- LE LOGO -->
        <mj-column>
            <mj-image width="200px" align="center" src="logo.png"></mj-image>
        </mj-column>

        <!-- LA BASELINE -->
        <mj-column vertical-align="bottom">
            <mj-text color="#FFF" align="center" padding="0">
                    <h1>UNE BASELINE</h1>
            </mj-text>
            <mj-text color="#FFF" align="center" padding-top="0">
                    Un sous-titre qui tue
            </mj-text>
        </mj-column>
    </mj-section>

    <!-- LE CONTENU -->
    <mj-section>
        <mj-column>
            <mj-text align="center">DU CONTENU</mj-text>
        </mj-column>
    </mj-section>

</mj-body>

 

 

Je vous épargne le code généré parce qu’il faudrait mettre en place un système de scroll infini sur ce blog mais croyez-moi, on gagne déjà cruellement en lisibilité du code et en temps de développement. On a donc désormais un header sympathique, que ce soit sur un ordinateur de bureau (à gauche) ou sur mobile (à droite) :

 

 

A partir de là, à peu près tous les types de mise en page sont possibles : il suffit de jouer sur le nombre et la largeur des colonnes d’une section, sur le fait que ces sections soient en “full-width” ou non, et sur bien d’autres choses encore. Il est par exemple possible de mettre des images étirables en fond de section, et donc d’avoir une bannière et un texte en superposition (avec quelques limitations pour le moment, tout de même).

 

<mj-section background-url="https://placehold.it/350x150" background-size="cover" full-width="full-width">
    <mj-column>
        <mj-text font-family="helvetica" align="center" font-size="50" padding="60" line-height="1" color="#FFF">
            Lorem ipsum
        </mj-text>
    </mj-column>
</mj-section>

 

 

A noter également que MJML propose un système de création de composants si toute fois une fonctionnalité venait à vous manquer.

Dans le cas de Mailchimp, il ne nous reste plus qu’à insérer les tags à disposition dans le fichier HTML généré et c’est gagné : on a un beau template à disposition.

 

 

Il y a certainement un workflow adéquate à mettre en place avec grunt ou gulp à ce sujet, mais ça fera l’objet d’un autre article.

 

 

En conclusion

MJML est sans nul doute sur le point de devenir un outil incontournable pour tout développeur qui souhaite élaborer des templates d’e-mailing un tant soit peu complexes et responsives.

Les quelques tests que nous avons effectués jusqu’ici n’ont pas révélé de grands dysfonctionnement sur les (quelques) clients mails à notre disposition à l’agence.

MJML est open-source et a déjà reçu un accueil plus que chaleureux de la part de la communauté. Les contributions se multiplient et les demandes d’évolutions commencent à affluer, en témoignent le nombre d’ouverture d’issues et de pull requests sur le github du projet.

En tous cas, c’est un grand pouce levé pour nous, et c’est un projet que l’on va suivre avec attention ces prochains mois afin de terminer notre propre super template à nous. Affaire à suivre.