Convertisseur MJML en HTML pour e-mails réactifs

L'MJML (Mailjet Markup Language) est une langue de marquage open-source conçue pour rendre le développement de courriels réactifs plus accessible. Écrire des courriels en HTML manuellement est pénible car les clients de courrier (surtout les versions anciennes d'Outlook) exigent des tables imbriquées, des styles inline et des commentaires conditionnels MSO pour s'afficher correctement. L'MJML propose un vocabulaire de composants plus élevé (mj-section, mj-column, mj-button, mj-image, mj-text) qui se compile automatiquement en HTML basé sur des tables, vous offrant une seule source qui s'affiche de manière cohérente sur les clients modernes et anciens.

Les clients de courrier sandboxent et réécrivent le HTML qu'ils reçoivent. Beaucoup de clients suppriment les styles, ignorent les feuilles de style externes et ne reconnaissent que quelques propriétés CSS. Outlook pour Windows utilise le rendu HTML de Microsoft Word, qui ne supporte pas les grilles, les flexbox ou même les flots. La seule primitive de mise en page qui s'affiche partout est la table HTML avec des attributs de largeur explicites et des styles inline sur chaque élément. L'MJML masque cette structure verbale et pénible derrière des composants clairs.

Les commentaires conditionnels MSO sont des commentaires HTML spéciaux de la forme qui sont traités uniquement par Microsoft Outlook (Windows). Ils vous permettent d'envoyer un code alternatif pour Outlook — par exemple, des formes VML pour des boutons robustes qui s'affichent comme des rectangles même dans le rendu défectueux d'Outlook. Les sorties compilées de MJML incluent ces commentaires afin que le même modèle s'adapte de manière fluide de Apple Mail et Gmail à Outlook 2007 et versions ultérieures.

Un courrier électronique responsive combine généralement deux stratégies : un layout de bureau fluide basé sur des tables (largeur maximale autour de 600px, centré) et un ensemble de requêtes CSS qui empile les colonnes verticalement et réduit les polices sur des affichages étroits. Comme certains clients ignorent les requêtes CSS, le MJML génère un layout qui s'adapte déjà à des largeurs courantes grâce à des tables à base de pourcentages, puis ajoute des surcharges de requêtes CSS pour les clients qui les reconnaissent. Le résultat est un courrier qui semble intentionnel sur un téléphone même si le support CSS est partiel.

La sortie beautifiée conserve les indentations et les retours à la ligne, ce qui est utile lors de l'inspection du code, lors de la comparaison de modifications de modèle ou lors de la copie dans un examen de code. La sortie minifiée supprime les espaces et les commentaires pour réduire la taille du contenu — utile car certains fournisseurs de services de courrier (ESPs) facturent par kilobyte et Gmail coupe les messages à environ 102 KB. Fonctionnellement, les deux sorties produisent le même courrier électronique affiché ; choisissez la sortie beautifiée lors de la création et la sortie minifiée lors de l'envoi.