Newsletter responsive avec MJML

Newsletter avec MJML

Il y a quelques jours, je me suis plongée dans l’intégration de newsletter responsive.
« Il était temps », me direz-vous, mais jusque là le temps passé à la mise en place était trop important comparé à nos besoins et ce, pour un résultat encore assez instable.
Désormais, proposer des newsletters responsive sans devenir fou est du domaine du possible.

Outils existant

J’ai principalement testé deux outils permettant une création facilitée de ce type de newsletter : Foundation et MJML.
Pour le premier, j’avoue avoir vite abandonné car la structure des fichiers ne me convenait pas du tout, bien trop complexe à mon sens pour un « simple » e-mail.
J’ai donc préféré regarder de plus près le deuxième outil avant de me décider à approfondir. MJML étant vraiment facile à prendre en main, je ne suis pas allée plus loin !

Pour une comparaison plus poussée de ces deux outils, j’ai trouvé ce commentaire sur le forum Litmus très intéressant.

MJML en bref

A l’origine, j’étais réticente à l’idée d’avoir une nouvelle syntaxe à apprendre uniquement pour les newsletters. C’était stupide, disons le. Surtout que la syntaxe MJML est très simple et logique.

Il sera tout de même nécessaire de garder la documentation sous la main au début mais c’est un faible prix à payer pour arrêter de coder en tableau.
D’autant plus qu’il est possible d’utiliser les styles CSS puisqu’ils seront directement mis inline une fois la newsletter générée, un vrai bonheur.

Exemple de newsletter

<mjml>

  <mj-head>
    <mj-font name="Libre baskerville" href="https://fonts.googleapis.com/css?family=Libre+Baskerville" />     
    <mj-title>MJML chez O2Sources</mj-title>
    <mj-attributes>
      <mj-all font-family="Helvetica, sans-serif" color="#3E3D3C" />       
      <mj-class name="bg-blue" background-color="#05A1DC" color="#ffffff" />
    </mj-attributes>
    <mj-style>
      h2 { font-family:Libre baskerville, Helvetica, sans-serif; }
      strong { color:#F8B133; }
    </mj-style>
  </mj-head>

  <mj-body>
    <mj-container>

      <mj-section>
        <mj-column>
          <mj-image width="200" src="img/logo.png"></mj-image>
          <mj-divider border-width="10px" border-color="#05A1DC"></mj-divider>
          <mj-text font-size="20px" font-family="Libre baskerville, serif" align="center">
            Newsletter responsive facile avec MJML
          </mj-text>
        </mj-column>
      </mj-section>

      <mj-section>
          <mj-column>
            <mj-image width="150px" height="111px" padding="0" src="img/mjml-o2-left.png" />
            <mj-text align="center">
              <h2>Elément gauche</h2>
              <p>Un <strong>peu de texte</strong>.</p>
            </mj-text>
          </mj-column>
          <mj-column>
            <mj-image width="150px" height="111px" padding="0" src="img/mjml-o2-right.png" />
            <mj-text align="center">
              <h2>Elément droite</h2>
              <p>Un peu de texte.</p>
            </mj-text>
          </mj-column>
      </mj-section>

      <mj-section>
        <mj-group>
          <mj-column>            
            <mj-button mj-class="bg-blue" padding="20px 30px" href="http://www.o2sources.com">
              Bouton
            </mj-button>
          </mj-column>
          <mj-column>            
            <mj-button mj-class="bg-blue" inner-padding="20px 30px" href="http://www.o2sources.com">
              Bouton
            </mj-button>
          </mj-column>
        </mj-group>
        <mj-column>  
          <mj-text>Sur mobile les boutons restent sur la même ligne avec mj-group.</mj-text>
        </mj-column>
      </mj-section>

    </mj-container>
  </mj-body>
</mjml>
Exemple de code MJML

Voici un code tout simple qui nous génère un magnifique code HTML pleins de tableaux et de commentaires conditionnels dont voici un bout :

<!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]--><div style="margin:0px auto;max-width:600px;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0"><tbody><tr><td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;"><!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
      <![endif]--><div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;"><table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0"><tbody><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0"><tbody><tr><td style="width:200px;"><img alt="" title="" height="auto" src="img/logo.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="200"></td></tr></tbody></table></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;"><p style="font-size:1px;margin:0px auto;border-top:10px solid #05A1DC;width:100%;"></p><!--[if mso | IE]><table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" style="font-size:1px;margin:0px auto;border-top:10px solid #05A1DC;width:100%;" width="600"><tr><td style="height:0;line-height:0;"> </td></tr></table><![endif]--></td></tr><tr><td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="center"><div class="" style="cursor:auto;color:#3E3D3C;font-family:Libre baskerville, serif;font-size:20px;line-height:22px;text-align:center;">
            Newsletter responsive facile avec MJML
          </div></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso | IE]>
      </td></tr></table>
      <![endif]-->
Exemple de code généré par MJML

Et tout ça pour ça :

Compatibilité

Le code généré est compatible sur la plupart des clients mails. Toutefois, quelques exceptions sont à prendre en compte selon votre cible.
Par exemple, si votre client utilise Outlook 2010 et qu’il se plaint de ne pas voir la bordure sur l’image, c’est normal. Il faut tout simplement adapter selon nos besoins et toujours bien tester, comme toujours finalement. Pour plus de détails c’est par ici.

Il faut savoir que l’approche est « mobile-first ». Cela signifie que, pour certains clients mail ne gérant pas correctement les différences mobile/desktop – comme outlook web app – c’est l’affichage mobile qui prime.

Liens utiles

Un super article parlant de MJML vient tout juste de sortir sur smashing magazine. Il est vrai que la prise en main de l’outil n’est pas très complexe mais si cet article était sorti quelques jours plus tôt, ça m’aurait encore plus facilité le travail !

Pour l’installer c’est par ici. Et contrairement à ce qui est affiché encore sur la page, il fonctionne sur Windows.
Si vous souhaitez vous faire une idée plus précise du code avant d’installer vous pouvez tester en live ici (attention sur firefox, il faut ajouter du contenu dans une balise mjml pour générer le rendu).

Maintenant, au travail !

2 Commentaires

  1. Pingback: L'évolution des designs d'emails / D SIGNED / Le Blog ! Graphiste freelance (Lyon / Paris)

  2. Pingback: L'évolution des designs d'emails · DSIGNED

Laisser un commentaire

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