Comparatif des frameworks d’e-mails responsive

En dehors des nombreux éditeurs d’e-mails en glisser-déposer, il existe un autre moyen de simplifier et d’accélérer la création d’e-mails : les frameworks. Ils optimisent votre travail de code sans le remplacer par un environnement no-code. Nous avons déjà consacré un article à l’un des frameworks les plus populaires, MJML ; cette fois, penchons-nous sur ses concurrents pour les comparer.

Frameworks d’e-mails responsive avec ou sans balises personnalisées : quelle différence ?

Commençons par définir ce qu’est un framework. Un framework est une sorte de gabarit, un modèle prêt à l’emploi qui accélère le développement. Sur cette base, vous écrivez votre propre code. Le framework fixe la structure, définit les règles et fournit les outils nécessaires pour mener à bien un projet.

La différence entre les frameworks avec et sans balises personnalisées est simple : un framework d’e-mails avec balises personnalisées n’est généralement rien d’autre qu’un langage de balisage spécialisé. Il peut s’avérer utile si votre équipe code bien mais n’a aucune envie de s’embêter avec le HTML/CSS, ou si vous voulez automatiser votre travail.

Les frameworks d’e-mails sans balises personnalisées sont des ensembles de composants prêts à l’emploi, sans balises spécialisées : juste du HTML/CSS propre. C’est la seule différence.

Bien sûr, certains outils se situent entre les deux. Nous passons en revue les options les plus populaires avec leurs atouts et leurs limites, pour vous aider à choisir votre outil.

Frameworks d’e-mails avec balises personnalisées

1. MJML

MJML est un framework d’e-mails open source et gratuit qui accélère la création d’e-mails HTML grâce à des composants prêts à l’emploi. Il dispose d’une application de bureau et d’une galerie de modèles, permet d’envoyer des e-mails directement depuis l’outil et fonctionne avec Outlook, Apple Mail, Gmail, Yahoo Mail et Office 365. Cerise sur le gâteau : MJML a son propre éditeur d’e-mails, où vous modifiez votre e-mail dans la partie gauche de l’écran et voyez l’aperçu à droite.

Pour aller plus loin avec cet outil, lisez notre article qui lui est consacré.

2. Foundation For Emails 2

Les fonctionnalités de Foundation for Emails 2 ressemblent à celles de MJML : composants personnalisés, collection de modèles d’e-mails et création de campagnes responsive. Foundation for Emails 2 existe en deux versions : CSS et Sass. Le framework n’a pas d’éditeur d’e-mails : sur ce point, MJML l’emporte.

Nous avons déjà comparé Foundation for Emails 2 à MJML. Le rapprochement va de soi, tant ces deux frameworks d’e-mails ont de points communs. Voici leurs principales fonctionnalités partagées :

• une collection de composants personnalisés réutilisables ;
• une galerie de modèles d’e-mails HTML responsive ;
• un outil web pour intégrer le CSS en ligne (inliner).

Foundation for Emails 2 s’appuie sur son propre moteur de modèles, Inky. Au fond, il fait la même chose que le moteur de MJML : des balises abrégées simplifient le travail avec les tableaux imbriqués complexes. Voici à quoi ressemble votre code avec Inky :

Et voici sa forme finale, en HTML propre :

Il y a environ 10 balises : trois servent à créer une grille, et la balise block-grid sert à créer… une grille de blocs. Les noms des balises menu, title, button et callout parlent d’eux-mêmes.

Contrairement à MJML, Foundation for Emails 2 crée deux versions de l’e-mail : l’une pour ordinateur, l’autre pour mobile. Vous choisissez le point de rupture où l’on bascule de l’une à l’autre, et vous pouvez aussi afficher ou masquer certains blocs dans votre code avec les balises .hide-for-large et .show-for-large.

Même si Foundation for Emails 2, comme MJML, propose des modèles prêts à l’emploi, il lui manque son propre éditeur d’e-mails no-code : impossible d’afficher l’aperçu de votre e-mail et de le modifier sur place. Vous pouvez vous tourner vers d’autres solutions, par exemple Blocks 😉.

3. HEML

HEML est un langage de balisage basé sur XML, proposé sous forme de module NPM pour Node.js. Il ressemble beaucoup au HTML/CSS : inutile d’apprendre des règles particulières pour l’utiliser.

Ce framework d’e-mails veut rapprocher le code des e-mails du développement web. Vous pouvez créer vos propres éléments et règles de style. HEML a aussi, pour ainsi dire, une dimension sociale : vous pouvez partager vos ressources avec d’autres utilisateurs et profiter des leurs.

Voici les principales fonctionnalités de HEML :

• simple à utiliser : il est conçu pour ressembler au HTML, votre cerveau n’a donc pas à désapprendre ses réflexes ni à apprendre un nouveau langage ;
• intégration du CSS en ligne par défaut (désactivable) ;
• le HTML classique ne gêne pas le langage HEML, les deux peuvent être utilisés en même temps ;
• un guide de démarrage rapide dès la page d’accueil.

Exemple de code écrit en HEML

Frameworks d’e-mails sans balises personnalisées

1. Maizzle

Maizzle est un framework d’e-mails qui s’appuie sur le framework Tailwind CSS et sur Node.js au lieu de balises personnalisées. Pas de nouveau langage à apprendre : juste du HTML propre et les classes utilitaires de Tailwind. En revanche, vous renoncez aux raccourcis.

Maizzle repose sur des configurations d’environnement qui permettent de bâtir vos propres scénarios de travail à l’aide de fichiers de configuration JS. La logique des modèles passe par PostHTML : partials, boucles et contenu distant sont donc à votre disposition.

Les fonctionnalités clés de Maizzle :

• Nunjucks, le langage de modèles créé par Mozilla ;
• la prise en charge du GitHub Flavored Markdown ;
• l’intégration du code en ligne grâce aux transformers ;
• une mise en page par défaut adaptée aux exigences d’AMP.

2. Pine

Pine est un framework d’e-mails responsive conçu pour les développeurs d’e-mails. Il mise sur un code propre, avec HTML5 pour base. Le meilleur moyen de découvrir Pine est de partir de son boilerplate, qui contient déjà tout le CSS, les balises et les attributs nécessaires :

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="x-apple-disable-message-reformatting">
    <title>Pine Email Framework</title>
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      table {border-collapse: collapse;}
      td,th,div,p,a {font-size: 16px; line-height: 26px;}
      .spacer,.divider,div,p,a,h1,h2,h3,h4,h5,h6 {mso-line-height-rule: exactly;}
      td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
    </style>
    <![endif]-->

    <style type="text/css">

      /*Framework CSS - removed for demo purposes */
    </style>
  </head>
  <body style="box-sizing:border-box;margin:0;padding:0;width:100%;word-break:break-word;-webkit-font-smoothing:antialiased;">

    <div style="display:none;font-size:0;line-height:0;"><!-- Add your preheader text here --></div>

    <table class="wrapper" cellpadding="15" cellspacing="0" role="presentation" width="100%">
      <tr>
        <td align="center" bgcolor="#EEEEEE">
          <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="700">
            <tr>
              <td align="left" bgcolor="#FFFFFF">

                <!-- ADD ROWS HERE -->
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Les fonctionnalités clés de Pine :

• wrappers, conteneurs et colonnes ;
• une grille de 12 colonnes ;
• des composants interactifs (accordéon, grille tarifaire, témoignages, etc.) ;
• la prise en charge des images d’arrière-plan dans Outlook ;
• la prise en charge des images Retina.

3. Acorn

Acorn est une version allégée de Pine. Lui aussi repose sur HTML5, mais il utilise une grille de 4 colonnes, contre 12 colonnes pour Pine.

Les fonctionnalités clés d’Acorn :

• une grille de 4 colonnes ;
• des utilitaires responsive, du contenu et des composants interactifs ;
• une galerie de polices système modernes ;
• la prise en charge des images d’arrière-plan Retina dans Outlook et Windows Mail.

4. Bojler

Bojler est un framework CSS/Sass, construit avec Sass.

Bojler nécessite Node.js et NPM. Le site officiel propose une documentation complète pour suivre toute l’installation et la configuration.

Les fonctionnalités clés de Bojler :

• un inliner intégré ;
• la conversion automatique de Sass en CSS, l’intégration du CSS en ligne et le linting Sass ;
• typographie, système de grille, classes utilitaires et composants prêts à l’emploi ;
• un serveur web avec rechargement en direct.

Clients de messagerie et appareils pris en charge par Bojler

Autres outils pour simplifier la création en HTML

Certaines solutions sont souvent qualifiées de frameworks HTML alors qu’elles n’en sont pas : patterns, modèles et boilerplates HTML, par exemple. Certes, ils facilitent le travail, mais ils conviennent surtout aux développeurs HTML expérimentés. Ces outils s’adressent à ceux qui veulent travailler sur le code sans intermédiaire.

Cerberus

Cerberus est une collection de modèles et de patterns HTML responsive gratuits pour simplifier la création d’e-mails. Chaque modèle est accompagné des informations utiles et testé dans les clients de messagerie les plus courants.

Liste de tous les clients de messagerie pris en charge par Cerberus

Anecdote amusante : le créateur de Cerberus est contre l’usage d’un inliner CSS. Selon lui, son produit doit rester simple et ne pas dépendre d’un outil comme un inliner CSS. Il estime aussi que l’intégration en ligne alourdit le code, et, dernier argument, que l’emplacement du CSS dans Cerberus est déjà optimisé.

Exemple de code dans Cerberus

Kilogram

Kilogram repose sur Nunjucks, le moteur de modèles créé par Mozilla. Il apporte aussi des outils supplémentaires pour développer des e-mails responsive. En installant Kilogram, vous obtenez des modèles d’e-mails, un inliner CSS et un minificateur HTML.

Voici la liste des clients de messagerie compatibles avec Kilogram :

• toutes les versions d’Outlook pour ordinateur ;
• Office 365 (web) ;
• Outlook.com (web, iOS, Android, Windows Phone) ;
• Thunderbird (Windows) ;
• AOL Mail (iOS) ;
• Yahoo ! Mail (web, iOS, Android) ;
• Google Inbox (web, iOS, Android) ;
• Gmail (web, iOS, Android) ;
• Mail.ru (web, iOS, Android) ;
• myMail (iOS, Android) ;
• Rambler Mail (web, iOS, Android) ;
• Yandex Mail (web, iOS, Android) ;
• Airmail (iOS, OS X) ;
• Apple Mail (iOS, OS X) ;
• Spark (iOS) ;
• Polymail (iOS, OS X).

Inkcite

Inkcite est un système de conception modulaire pour créer des e-mails modernes et responsive. Il n’utilise pas de balises personnalisées, mais quelque chose d’approchant : des «  Helpers  », qui ressemblent à des balises HTML ordinaires entre accolades.

Voici à quoi cela ressemble :

Inkcite propose trois environnements : Development, Preview et Production.

L’environnement Development permet de développer l’e-mail et son contenu en local.

L’environnement Preview sert à envoyer des versions de test de vos e-mails.

Production est l’étape finale du développement de l’e-mail. Les images sont envoyées sur le CDN, les URL sont insérées dans le HTML, le suivi des liens et les tags sont activés, le HTML est minifié et les contrôles de sécurité sont en place.

Alors, quel framework d’e-mails choisir ?

Si vous cherchez une solution qui simplifie et accélère nettement votre travail de code, et que vous êtes prêt à apprendre une nouvelle logique, de nouvelles structures et de nouvelles règles, les frameworks d’e-mails avec balises personnalisées sont faits pour vous.

Si vous cherchez un outil ou une plateforme qui vous accompagne dans votre travail de code et le structure davantage, sans vous obliger à apprendre un nouveau langage et de nouvelles règles, optez pour les frameworks d’e-mails sans balises personnalisées.

Et si vous avez juste besoin d’un coup de main, tournez-vous vers d’autres outils (parfois appelés frameworks eux aussi) : boilerplates, modèles et patterns HTML.

Enfin, si vous repérez une erreur ou une incohérence dans cet article ou dans un autre article de notre blog, n’hésitez pas à nous écrire à support@useblocks.io. Nous corrigerons tout au plus vite.