Accueil
Le blog de Mailjet
Produit
MJML fête ses 2 ans et monte en gamme avec une nouvelle version : MJML 4
Produit
MJML fête ses 2 ans et monte en gamme avec une nouvelle version : MJML 4
Alors que MJML fête ses deux ans ce mois-ci, nous sommes fiers d’annoncer sa plus grande mise à jour depuis son lancement : MJML 4. MJML 4 est une réécriture complète de MJML et apporte tout un ensemble de nouvelles fonctionnalités.
Il y a 2 ans, nous avons open-sourcé MJML, un framework permettant de créer des emails responsives que nous avons développé chez Mailjet pour Passport, notre propre éditeur d’email en drap-and-drop. En effet, nous avions besoin de générer un HTML propre qui s’afficherait correctement dans toutes les boîtes de réception principales.
Table des matières
Espaces entre les colonnes
Affichage desktop sur Outlook.com
Breakpoints personnalisables
Validation des fichiers inclus dans les fichiers inclus dans les fichiers incl... enfin vous voyez
Meilleure syntaxe
Nouvelle façon de créer des composants personnalisés
Interface en ligne de commande améliorée
Utilisation de MJML localement via NPM
Utilisation de MJML via un outil ou en ligne
Votre avis nous intéresse !
Conscients du défi que représente l’email responsive, nous avons vite réalisé que MJML pouvait être bénéfique pour un grand nombre de développeurs. C'est la raison pour laquelle nous avons décidé de l’open-sourcer après l'avoir utilisé en interne pendant des mois. Depuis, nous avons parcouru un long chemin !
Nous sommes fiers de constater qu’aujourd’hui MJML est le framework d’email responsive le plus utilisé dans le monde entier, en qui les grandes sociétés comme The New York Times et Ryanair ont confiance. Chaque mois, un nouveau record est établi en termes de téléchargements et le mois de février 2018 ne fait pas exception à la règle puisque MJML a été téléchargé plus de 60 000 fois ce mois-ci.
Téléchargements mensuels depuis la version initiale
Alors que MJML fête ses deux ans ce mois-ci, nous sommes fiers d'annoncer sa plus grande mise à jour depuis son lancement : MJML 4. MJML 4 est une réécriture complète de MJML et apporte tout un ensemble de nouvelles fonctionnalités.
Les nouvelles fonctionnalités de MJML 4
Espaces entre les colonnes
Etant donné qu’il s’agit d’un style de mise en page courant, l'option d'ajouter des espaces entre les colonnes était une demande populaire. Vous pouvez désormais le faire en ajoutant l’attribut “padding” sur mj-column (voir la documentation).
Exemple de disposition avec des espaces entre les colonnes
Affichage desktop sur Outlook.com
Comme il n'y a aucun moyen de différencier la version mobile de la version desktop d'Outlook.com, nous avons d'abord fait le choix d'afficher la version mobile par défaut (il est plus facile de lire une mise en page mobile sur un écran desktop que l’inverse).
Avec MJML 4, vous pouvez maintenant modifier ce comportement en ajoutant un attribut sur la balise mjml pour forcer la mise en page desktop sur Outlook.com : <mjml owa=”desktop”>.
Disposition multi-colonnes avec un affichage desktop sur Outlook.com
Breakpoints personnalisables
Vous pouvez désormais facilement remplacer le breakpoint par défaut de MJML (480px) en utilisant le composant dédié mj-breakpoint (voir la documentation).
<mj-head>
<mj-breakpoint width=”540px” />
</mj-head>
Validation des fichiers inclus dans les fichiers inclus dans les fichiers incl... enfin vous voyez
Le moteur MJML supporte maintenant le composant mj-include, et mieux encore, il validera tous les fichiers inclus, y compris les imbrications sur plusieurs niveaux.
Meilleure syntaxe
La syntaxe des différents composants a été simplifiée et améliorée au niveau de la sémantique :
mj-container a été retiré de la liste des composants MJML et tous ses attributs appartiennent maintenant à tomj-body (voir la documentatio).
La syntaxe mj-social a été améliorée et facilite l'ajout de réseaux personnalisés. Chaque réseau social doit maintenant être ajouté en tant qu’enfant de mj-social (voir la documentation).
mj-hero-content a été retiré de la liste des composants. Le contenu de votre composant hero doit aller directement à l'intérieur de mj-hero (voir la documentation).
mj-navbar n'est plus un composant de type section et doit maintenant être placé directement dans une mj-column (voir la documentation).
Nouvelle façon de créer des composants personnalisés
Bien que la possibilité de créer des composants personnalisés a été une caractéristique de MJML depuis le début, c'est devenu beaucoup plus facile. Tout d'abord, il n'y a plus de dépendance à ReactJS et il est maintenant possible d'utiliser des composants MJML directement dans votre propre composant.
Nous publierons un tutoriel dédi é pour créer vos propres composants avec MJML 4 dans les semaines à venir.
Interface en ligne de commande améliorée
Comme MJML 4, l'interface en ligne de commande a été totalement réécrite. Elle suit maintenant une syntaxe plus standard et apporte également de nouvelles fonctionnalités, comme la migration d'un template de la syntaxe v3 vers la syntaxe v4 ou l'affichage de plusieurs fichiers ou même d'un dossier entier (voir la documentation).
Prochaines étapes
Utilisation de MJML localement via NPM
Si vous êtes familier avec l'utilisation de NPM et de la ligne de commande, vous pouvez installer la v4 en exécutant npm install mjml et commencer à l'utiliser immédiatement. Si vous exécutez MJML sur vos modèles écrits pour la v3, ils seront convertis de manière transparente à la syntaxe v4 et traduits en HTML.
Vous pouvez également migrer vos templates écrits avec la syntaxe v3 en utilisant l'option -m du CLI, qui produira votre template MJML avec la syntaxe v4 sans le traduire en HTML.
Consultez la documentation de la ligne de commande pour retrouver toutes les options disponibles.
Utilisation de MJML via un outil ou en ligne
Les plugins MJML pour les éditeurs de texte (comme Atom, Sublime Text, Visual Studio Code) ont été mis à jour. L'application MJML et l'éditeur Online sont toujours en cours de migration vers MJML 4.
Votre avis nous intéresse !
Cette actualité vous intéresse ? N'hésitez pas à venir chatter sur Slack ou à passer nous dire bonjour sur Twitter.
Si vous rencontrez un problème ou si vous remarquez un bug d’affichage avec MJML, merci de nous notifier du problème sur Github.
Lectures associées
Articles populaires
Marketing
En savoir plus
Deliverability
7 min
Noreply email address: Best practices for your email strategy
En savoir plus
Email best practices
13 min
66+ email subject lines that beg to be opened
En savoir plus