création | test

MJML est un langage de balisage open-source créer par Mailjet.
Grâce à une syntaxe simple et un ensemble de composants, MJML permet de rapidement créer des emails HTML responsive et directement compatibles avec une grande majorité de clients mail.
C'est le moteur MJML qui se charge de compiler le template en HTML.

https://documentation.mjml.io/

<!-- ./app/views/user_mailer/_info.html.erb -->
<mj-text>This is <%= @user.username %></mj-text>

<!-- ./app/views/user_mailer/email.html.mjml -->
<mjml>
  <mj-head>
    <mj-preview>Hello World</mj-preview>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello World</mj-text>
        <%= render partial: "info" %>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

⚠️ Il est préférable de générer une version HTML minifiée car elle supprime les attributs style vides qui peuvent poser problème sur Outlook.

<!-- balise principale -->
<mjml>
  <!-- métadonnées + styles -->
  <mj-head>
    <!-- texte de l'onglet navigateur -->
    <mj-title></mj-title>
    <!-- texte d'aperçu dans la boite mail -->
    <mj-preview></mj-preview>
    <!-- attributs par défaut des balises MJML + class -->
    <mj-attributes>
      <mj-all padding="0" />
      <mj-text font-size="18px" line-height="24px" />
      <mj-class name="header" font-size="48px" />
    </mj-attributes>
    <!-- styles appliqués au HTML généré -->
    <mj-style>
      .primary div {
        color: tomato !important;
      }
    </mj-style>
  </mj-head>
  
  <!-- corps du mail -->
  <mj-body>
    <!-- division verticale -->
    <mj-section>
      <!-- division horizontale -->
      <mj-column>
        <mj-text mj-class="header">Hello World !</mj-text>
        <mj-text css-class="primary">Lorem ipsum dolor sit amet...</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

MJML va générer une structure de plusieurs éléments HTML en convertissant un composant.
⚠️ Une <css-class> est toujours appliquée à l'élément parent. Pour appliquer correctement un style il va donc parfois être nécessaire d'inspecter le code généré pour cibler le bon élément enfant.
⚠️ Comme les styles inline sont très utilisés dans les emails HTML il est indispensable de toujours ajouter !important.

specificity.mjml : règles de spécificité.

La largeur des <mj-column> est en pourcentages (%) mais pour tout le reste il semble préférable de rester en pixels (px).
Un exemple : Outlook va transformer un padding définit en pourcentages... en pouces, et d'une façon étrange.
L'unité em peut également être utilisée sur tout les clients mail (source).

• .gif(pas d'animation sur Outlook)
• .png (même avec alpha)
• .jpeg
• Pas de .svg 🚫
  source

⚠️ Donnez à chaque élément <mj-image> décoratif un attribut alt vide : alt=""

MJML met à disposition un composant <mj-column> au comportement responsive.
Placés dans une <mj-section>, les <mj-column> se partagent sa largeur sur desktop et vont automatiquement s'empiler verticalement sur mobile. La largeur des <mj-column> est définie en pourcentage sans que la somme ne dépasse les 100%. Par défaut l'espace est réparti uniformément sur chaque <mj-column>.
Un composant <mj-group> englobant des <mj-column> va annuler ce comportement responsive pour les grader côte à côte sur mobile.

columns.mjml : layout en 2 colonnes.

Support : plutôt bon.
Il faut bien les placer dans une balise <mj-style> SANS l'attribut <inline>. Vous pouvez créer plusieurs balises <mj-style> dans <mj-head>.
⚠️ Utilisez la règle !important sur chaque propriété.

<mj-head>
  ...
  <mj-style inline="inline">
    .mobile table {
      display: none !important;
      mso-hide: all;
    }
  </mj-style>

  <!-- mj-style SANS l'attribut inline -->
  <mj-style>
    @media (max-width: 480px) {
      .paragraph div {
        font-size: 16px !important;
        color: tomato !important;
      }
      .desktop table {
        display: none !important;
        mso-hide: all;
      }
      .mobile table {
        display: table !important;
      }
    }
  </mj-style>
</mj-head>

media_query.mjml : afficher/masquer des images différentes sur mobile et desktop et appliquer différents styles à un même élément.

Support : très mauvais.
Utilisez la balise <mj-font> dans <mj-head> et pointez l'attribut href vers un fichier contenant la déclaration @font-face de la police (ex : Creepster).

<mj-head>
  ...
  <mj-font name="Creepster" href="https://fonts.googleapis.com/css2?family=Creepster" />
  ...
</mj-head>

<mj-body>
  ...
  <mj-section>
    <mj-column>
      <mj-text font-family="Creepster, sans-serif">
        custom font
      </mj-text>
    </mj-column>
  </mj-section>
  ...
</mj-body>

custom_font.mjml : appliquer une police distante.

Support : bon... sauf sur Outlook (Windows) mais possibilité de faire mieux directement dans le html.
Utilisez l'attribut full-width="full-width" sur la balise <mj-wrapper> et pointez l'attribut background-url vers le fichier image.

  <mj-body>
    <mj-wrapper background-url="./assets/pattern.png" background-size="400px">
      ...
    </mj-wrapper>
  </mj-body>

background_image.mjml : appliquer une image de fond sur toute la fenêtre du client.

template.mjml : template utilisant différents composants MJML.

Une fois le template généré il faut impérativement le tester et c'est ce que propose le site testi.at grâce à l'aperçu de plus de 90 clients mail sur desktop, mobile et webmail.

Testi@ dispose lui aussi d'un éditeur avec sa preview.
Il suffit de créer un nouveau test (1), coller le code html dans l'éditeur (2), sélectionner les clients mail (3) dans la liste et de lancer le test (4).
L'interface permet aussi de

Vous pouvez aussi recevoir des emails sur votre alias de compte.
C'est pratique pour tester une campagne MailChimp par exemple.
Depuis l'onglet Settings / Profile, vous pouvez copier l'adresse et vous connecter pour recevoir le mail qui va lancer le test automatiquement.

Enfin, l'interface de présentation des captures d'écrans permet de visualiser le rendu du mail sur les différents clients.
Vous pouvez déplier/replier toutes les fenêtres d'aperçus (1), parfois visualiser le code source (2) et relancer un client (3).