La collaboration, un véritable tournant dans le monde de l’emailing

Aujourd’hui, Mailjet lance un ensemble de fonctionnalités collaboratives. Non seulement il s’agit d’un des jours les plus importants dans l’histoire de Mailjet, mais il s’agit surtout d’une nouvelle ère pour l’emailing.

Il y a plus d’un an, nous avons commencé à étudier la manière dont les équipes travaillent (la nôtre incluse). Les équipes aux quatres coins du monde communiquent sur Slack, conçoivent leurs présentations avec Google Docs et établissent leur planning d’équipe avec Trello. Travailler ensemble, et sur des plateformes qui facilitent cette façon de travailler, est devenu la norme. Mais qu’en est-il de l’emailing ?

Aujourd’hui, les équipes travaillent ensemble quotidiennement sur leurs campagnes emailing et rencontrent toujours deux challenges majeurs : la mauvaise communication et la perte de temps*. Nous avons pris conscience qu’il était temps de sortir le marché de l’emailing des années 2000 et de poursuivre la mission de Mailjet : permettre aux équipes de travailler ensemble efficacement sur leurs emails.

Les fonctionnalités collaboratives de Mailjet

Pour la première fois dans l’industrie de l’emailing, la création, l’envoi et le suivi d’emails peut se faire de manière collaborative, de la même façon qu’avec les autres outils que vous avez déjà l’habitude d’utiliser. Exactement comme Google Docs pour les emails, mais avec bien d’autres avantages.

Collaboration en temps réel & commentaires (le Google Docs de l’email)

Travaillez à plusieurs en temps réel sur le même modèle d’email. Ajoutez vos commentaires directement au sein de votre modèle afin d’échanger plus facilement et valider plus rapidement le design et le contenu de l’email.

Sections verrouillées & demandes de publication (la sécurité enfants de l’email)

Assurez-vous que vos emails sont toujours en ligne avec votre marque en verrouillant le style et/ou le contenu de vos sections. Garantissez que vos emails sont bien approuvés par un manager en empêchant les utilisateurs de publier des modèles sans permission.

Sous-comptes & rôles et permissions avancées

Sélectionnez ce que chacun des membres de votre équipe peut voir, éditer ou publier avec un système de permissions avancées.

Psst – retrouvez le lancement de ces fonctionnalités sur Product Hunt.

Mailjet Collaboration GIF

Faites vos commentaires et travaillez en temps réel avec votre équipe grâce aux fonctionnalités collaboratives de Mailjet.

Pourquoi Mailjet a fait un grand pas en avant ?

Comme je l’ai déjà mentionné, la mission de Mailjet a toujours été d’être la plateforme emailing permettant aux équipes marketing et aux développeurs de travailler ensemble. Pourquoi ? Parce que, bien que peu de gens le sache, l’email fait appel à de nombreux contributeurs différents.

Généralement, les personnes qui travaillent sur des emails (même au sein d’une même société), travaillent en silos, utilisant des plateformes emailing distinctes conçues pour leurs besoins individuels. C’est pour cette raison que la première étape de Mailjet a été de créer une seule et même plateforme où les équipes marketing et les développeurs pouvaient à la fois créer et envoyer les emails comme ils le souhaitaient : en utilisant une interface intuitive et un éditeur d’emails en glisser-déposer pour les unes, et un puissant template language et des API pour les autres. Une unique plateforme pour l’ensemble de l’entreprise.

Avance rapide jusqu’au jour où j’ai rejoins Mailjet. Mon bébé était MJML : le framework d’email qui rend le codage d’emails responsives facile. MJML est en open source et est distinct de la plateforme Mailjet mais, fidèle à notre vision, nous avons utilisé cette technologie pour faciliter la collaboration entre les équipes marketing et les développeurs au sein de Mailjet. Aujourd’hui, les développeurs peuvent désormais coder un email en MJML et le déposer facilement dans l’éditeur d’emails de Mailjet, Passport, à partir duquel les équipes marketing peuvent l’éditer comme elles le souhaitent, en utilisant l’interface en glisser-déposer.

Voilà où nous en sommes à ce jour, et avec le lancement des fonctionnalités collaboratives, je suis sincère quand je dis que Mailjet dispose de la meilleure plateforme collaborative du marché. Les équipes dédiées à l’emailing sont de plus en plus solides, les emails prennent une place de plus en plus importante dans l’offre des agences, et les grandes entreprises du monde entier ont besoin de mettre en place leur campagne emailing plus rapidement que jamais. Tout cela nécessite une meilleure collaboration, et je suis fier de dire que cela existe pour l’emailing.

* Etude Mailjet 2018 sur la collaboration

MJML fête ses 2 ans et monte en gamme avec une nouvelle version : MJML 4

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.

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 documentation).
  • 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.

2017 : l’année de l’email interactif

Ce n’est pas parce que les emails existent depuis longtemps qu’ils sont forcément faciles à maîtriser, notamment en raison du manque cruel de compatibilité entre les différents clients de messagerie. Mais ça ne veut pas dire non plus que l’emailing doit être une tâche rébarbative. Pourquoi ne pas tirer pleinement profit du potentiel de l’email en utilisant des fonctionnalités qui inciteront vos destinataires à interagir avec vos communications ? Suivez l’exemple de TicketMaster, qui a permis à ses utilisateurs de voter pour leur artiste préféré à l’occasion des MTV Video Music Awards directement depuis l’email. Les résultats sont bien là : à cette occasion, le taux d’ouverture a dépassé de plus de 180 % leurs performances habituelles. Un record !

Dites oui à l’interactivité

Chez Mailjet, nous sommes convaincus que 2017 sera l’année de l’email interactif. Nous en avons discuté avec l’équipe MJML, qui a donc développé son premier composant interactif, un outil qui vous permet d’afficher une galerie d’images dans vos emails à l’aide de quelques lignes de code seulement. Depuis leurs webmails (Apple Mail, Gmail, Yahoo, etc.), les clients pourront parcourir vos images. En cas d’incompatibilité, seule la première image s’affichera : c’est une bonne solution de repli, toujours d’actualité sous certains clients comme Outlook.

Carrousel intégré à Mailjet

En plus des sondages et des diaporamas, voici quelques exemples de composants interactifs qui ne manqueront pas d’impressionner vos destinataires.

Personnalisation produit

Cet élément est un vrai casse-tête, mais le jeu en vaut la chandelle ! Prenons l’exemple de Burberry, qui a envoyé un email contenant ce type d’élément pour permettre à ses clients de personnaliser leur écharpe en choisissant eux-mêmes la couleur. Le plus ? Chaque écharpe personnalisée incluait automatiquement les initiales du destinataire. Côté technique, ce n’est pas une partie de plaisir : non seulement l’email utilisait du code responsive extrêmement compliqué, mais il exploitait également des scripts stockés sur serveur pour inclure automatiquement les initiales de chaque destinataire.

Voici un petit aperçu de l’email en question (essayez la personnalisation, vous en mourrez d’envie, avouez-le) :

Exemple d'email dynamique par Burberry
Image fournie par FreshInbox.

Le problème de cet email, c’est que la fonctionnalité interactive ne fonctionne qu’avec les clients Web : les autres n’affichent qu’une version statique.

Accordéons

Les accordéons vous permettent d’inclure beaucoup d’informations dans vos emails sans allonger leur longueur à outrance. Vous l’aurez compris, ils sont particulièrement utiles sur mobile. Vous pouvez par exemple utiliser un accordéon pour lister plusieurs de vos produits ou ajouter vos réponses aux questions les plus fréquentes.

Voici un exemple créé par Email Monks, qui vous donne une idée du rendu final :

Accordéon en CSS3 intégré dans un email

Achats directement depuis l’email

L’email est l’un des principaux canaux de l’e-commerce, car il permet d’attirer et de fidéliser de nouveaux clients. Alors pourquoi ne pas en profiter pour leur permettre de faire leurs achats directement depuis l’email ? Ce format n’a pas de secrets pour nos collègues chez Rebelmail (que nous avons accompagnés au cours du lancement de leur API). Grâce à leur expertise, vous pouvez créer des emails à partir desquels vos destinataires pourront sélectionner le produit qui les intéresse et choisir leur taille, avant d’être redirigés directement vers la page de paiement de votre site pour finaliser leur commande. Rebelmail vous propose également des services d’analyse qui vous aident à évaluer les différentes interactions dans vos emails.

Intégration d'option d'achat dans l'email, par Rebelmail

Restons en contact

Nous espérons que ces exemples vous ont inspiré ! N’hésitez pas à vous abonner au compte Twitter de l’équipe MJML, qui met au point toute une gamme de composants interactifs pour vous faciliter la vie. Vous pouvez aussi participer sur Github et discuter avec la communauté MJML sur Slack.

De nouvelles améliorations pour MJML ?

Il y a un mois et demi, nous avons lancé MJML avec une promesse ambitieuse : faciliter la création d’emails responsives. Comme à chaque lancement, nous ne savions pas comment la communauté allait réagir, mais MJML a reçu un accueil plus que chaleureux !

Avec un tel accueil, nous ne pouvions pas nous arrêter là. Ainsi, avec l’aide précieuse de notre communautés great help, nous continuons à améliorer MJML et nous l’enrichissons avec tout un écosystème d’outils, de kits, de modèles et de composants.

 

Les nouveautés

Des modèles riches

Vous avez maintenant accès à une galerie de modèles (comprenant des modèles de newsletters, des confirmations de commandes…) pouvant être utilisés tels quels ou entièrement personnalisés. Certains templates comme Arturia et Proof ont d’ailleurs été développés par des membres de la communauté. Un grand merci à celles et ceux qui nous aident à agrandir notre collection de modèles ! Si vous souhaitez apporter votre contribution à notre galerie, n’hésitez pas à partager vos modèles sur Twitter ou par email.

 

templates

Des composants de plus haut niveau

Nous savons que les composants font la force de MJML. Outre les éléments classiques, de tout nouveaux composants sont à présent disponibles pour vous aider à créer rapidement des emails responsive : <mj-invoice> & <mj-item>, <mj-location> and <mj-table>. Avantage de taille : avec ces nouveaux composants, plus besoin de créer des dizaines et des dizaines de lignes. Vous souhaitez créer un email de facture qui soit esthétique ? Utilisez simplement <mj-invoice> et le tour est joué !

 

Screen+Shot+2016-03-22+at+16.28.36 2



Et ensuite ?

Beaucoup d’éléments de MJML peuvent encore être améliorés, alors travaillons main dans la main ! N’hésitez pas à proposer vos idées et à contribuer en ouvrant un sujet sur GitHub, et donnez votre avis sur les futures fonctionnalités dans les sujets avec le label RFC !

Plus on est de fous, plus on rit, n’est-ce pas ? Alors, parlez de MJML autour de vous, et suivez @mjmlio pour connaître les dernières nouveautés !

Petite histoire des débuts de MJML

MJML, notre langage de template innovant permettant de créer des emails responsive en toute simplicité, fête ses 1 mois aujourd’hui. Nous vous l’avions fièrement présenté il y a quelque temps en espérant que vous alliez l’apprécier. Il est temps maintenant de prendre du recul pour vous en dire plus sur ce premier mois.

 

Il était une fois…

MJML est un projet très spécial pour Mailjet. Nous y avons consacré beaucoup d’efforts, de ses débuts lorsque nous travaillions encore sur Passport (notre outil en glisser-déposer pour la création d’emails) à son lancement en open source. Nous voulions créer un nouvel outil pour faciliter le processus de création d’emails responsive pour les développeurs et les intégrateurs d’emails. mjml.io est le résultat de notre expérience en la matière : il s’agit du premier langage open source dédié à la création d’emails responsive.

 

Les résultats sont là !

Nous sommes extrêmement heureux d’avoir reçu un très grand nombre de retours positifs. En quelques jours seulement, les résultats ont largement dépassé nos attentes ! Cet accueil chaleureux par la communauté s’est traduit par des chiffres impressionnants dans les deux jours qui ont suivi le lancement :

 

  • Plus de 800 votes sur Product Hunt ;
  • Plus de 1 200 étoiles sur GitHub ;
  • une multitude de mentions sur Twitter.

Capture d’écran 2016-03-11 à 17.17.11
MJML a d’ailleurs figuré dans la newsletter de Product Hunt dans la semaine de son lancement, grâce au grand nombre de votes reçus en quelques heures seulement.

 

Tout cela était déjà très impressionnant et palpitant -mais la meilleure partie, c’est que c’était loin d’être fini ! Nous avons reçu encore plus de retours positifs ces dernières semaines.
Voici quelques chiffres à date :

  • Plus de 86 000 vues uniques sur le site MJML.io depuis son lancement ;
  • Plus de 3 200 téléchargements, avec une croissance accélérée de 30 % par semaine ;
  • Plus de 2 800 étoiles sur GitHub
  • Plus de 900 votes sur Product Hunt avec un passage en page d’accueil du site.

MJML a également été mentionné dans HackerNews, Litmus et d’autres blogs ou sites comme Silicon.fr, L’informaticien et Le Blog du Webdesign. Sur les réseaux sociaux, nous avons reçu de nombreux commentaires positifs sur la facilité d’utilisation de MJML, en particulier concernant les emails responsive.

 

 

 


 

 

 


 

 

 


 

 

 


 

 

 

Et ce n’est pas tout. Notre communauté ne se contente pas de transmettre ses retours positifs sur MJML,  elle l’améliore aussi au quotidien ! En l’espace d’un mois, nous avons reçu de nombreuses contributions, des modèles aux outils en passant par des kits de démarrage et des composants.

 

MJML est utilisé partout dans le monde : nous avons reçu des contributions d’utilisateurs basés en Europe (France, Royaume-Uni, Espagne, Belgique, Italie, Portugal, etc.), mais aussi en  Russie, en Corée, en Inde, au Brésil ou encore aux Etats-Unis.

 

Mailjet a besoin de vous !

 

L’adoption rapide de MJML montre bien que le secteur de l’emailing a besoin de solutions innovantes et conviviales. MJML n’est pas encore parfait, c’est pourquoi nous comptons sur vous pour l’améliorer au fil du temps grâce à vos retours, vos suggestions ou vos contributions sur GitHub. Vous pouvez également nous envoyer vos modèles ou composants pour publication ! N’hésitez pas à nous contacter sur Twitter et GitHub ou par email. MJML est un outil gratuit qui offre des possibilités infinies, alors n’hésitez pas à l’utiliser extensivement !

Et ensuite ?

Nous allons continuer à travailler en collaboration avec notre communauté pour optimiser MJML en ajoutant de nouveaux modèles et composants. Vous aurez ainsi de plus en plus de choix !

Nous tenons à vous remercier pour votre accueil chaleureux, votre enthousiasme et votre soutien quotidien.

Longue vie à MJML, qui vous aidera à créer des emails responsive jusqu’à la fin des temps !

 
 

Plus de proximité avec vos contacts grâce au templating language

Mailjet a une grande nouvelle pour les développeurs : nous lançons aujourd’hui notre propre templating laguage. Passport pour l’emailing transactionnel vous permet d’ores et déjà d’utiliser des modèles conçus avec Passport pour vos emails transactionnels et de renforcer la collaboration entre équipe marketing et technique. Notre nouveau templating language repousse encore les limites en matière de personnalisation des emails transactionnels.

Vous connaissez déjà certainement les balises personnalisées, comme « Bonjour {{first_name}} », qui vous permettent de vous adresser à vos destinataires de manière nominative. Maintenant, vous pouvez faire encore mieux en adaptant le contenu, l’objet et la présentation de l’email selon les données de vos utilisateurs, quelles qu’elles soient du moment que vous les trouvez pertinentes. Il peut s’agir de leur expérience avec votre marque, de leur équipe de football préférée ou simplement de leur âge. C’est à vous de choisir !

« Nous utilisons le Template Language de Mailjet pour tous nos emails transactionnels. Ce système de fonctionnement est bien plus simple à utiliser et efficace, et nous offre une meilleure délivrabilité que la solution maison que nous utilisions par le passé. Par ailleurs, l’outil d’édition en glisser-déposer de Mailjet permet à nos équipes marketing de travailler facilement à l’amélioration continue de nos modèles d’emails. »
Camille Richon, Fondateur et CEO de Payfacile
Pour vous donner un meilleur aperçu des possibilités que ce langage vous offre, penchons-nous sur quelques exemples d’utilisation. Nous remercions par ailleurs notre communauté de bêta testeurs qui nous a aidé à identifier les cas d’utilisation les plus courants et a ainsi contribué à l’amélioration de notre templating language.

L’utilisation de conditions pour offrir un contenu ultra-personnalisé à chaque utilisateur

Quel est l’intérêt d’envoyer des emails nominatifs à vos utilisateurs si le contenu est générique ? Notre templating language repose sur des variables prédéfinies (noms de famille de vos contacts, adresses email, etc.). Cependant, vous avez également la possibilité de créer vos propres variables et de les ajouter à votre modèle, ou même de les réutiliser dans des déclarations. Cette fonctionnalité vous permet d’inclure des sections conditionnelles et donc d’insérer différents contenus dans votre modèle, selon le statut de ces conditions.

Plutôt que tout gérer de votre côté, tous les aspects complexes sont désormais pris en charge par le templating language de Mailjet.

Passage en revue des produits achetés pour envoyer un reçu

Un exemple commun d’email transactionnel que tout le monde a déjà croisé est le reçu. Aussi anodin soit-il, il est pourtant chronophage à implémenter et à gérer au quotidien. Vous avez besoin de ressources hébergées sur vos serveurs (comme le numéro de commande), puis de modifier votre structure d’email avant d’effectuer l’envoi. Et malgré cela, la structure elle-même d’un email de reçu est assez simple. Les éléments qui le compliquent sont donc le numéro de commande, la date, les tarifs… Désormais, grâce à notre templating language, plus besoin de gérer les modifications de votre modèle : notre API les prend en charge nativement. Il vous suffit d’appeler notre API avec l’ID de votre modèle (oui, un modèle peut être créé à partir de Passport et être hébergé sur les serveurs Mailjet !). Ainsi, l’API prendra en compte toute modification, dès lors que vous avez utilisé notre templating language pour vos modèles. C’est aussi simple que cela ! Regardez ce reçu :  

templating_language_receipt

  Voici ce à quoi le code de ce message ressemble :

Il existe évidemment bien d’autres cas où le traitement en boucle booste la productivité tout en simplifiant le processus. On peut par exemple traiter en boucle une liste d’articles pour des résumés quotidiens curationnés ou les messages non lus d’une application de chat.

Et ensuite ?

Consultez notre documentation pour obtenir la liste complète des déclarations, expressions, opérateurs et fonctions disponibles dans notre templating language. Il offre des possibilités infinies ! Nous sommes impatients de découvrir vos nouvelles techniques d’engagement utilisateur. N’hésitez donc pas à nous faire part de vos expériences avec le templating language de Mailjet !

De notre côté, pour plus de productivité et d’efficacité, nous nous engageons à ajouter de nouvelles fonctionnalités à notre langage afin que vous puissiez faire plus en codant moins.

Et puisque l’on parle d’efficacité, connaissez-vous MJML, notre langage de balisage open source facilitant la création d’emails responsive ? MJML a reçu un accueil extraordinaire de la part des membres de la communauté (plus de 800 votes positifs sur Product Hunt et plus de 2 000 étoiles sur GitHub) et nous tenons à remercier toutes les personnes qui nous ont apporté leur soutien !

Avec Passport, Passport pour l’emailing transactionnel, MJML et notre tout nouveau templating language, vous avez toutes les cartes en main pour créer des emails exceptionnels.

MJML, un nouveau langage open source pour le développement d’emails

Si vous baignez un peu dans ce secteur, comme nous, vous le savez déjà : développer des emails est un cauchemar. C’est la raison pour laquelle nous avons créé MJML, un nouveau langage qui épargne aux développeurs d’emails les affres du développement d’emails HTML responsive en générant ce code à leur place. Oui, vous avez bien lu : les utilisateurs n’ont qu’à rédiger leur message en MJML, un langage sémantique et simple, et le moteur associé produira automatiquement le code HTML responsive correspondant.

Les origines de MJML

Outre la délivrabilité (à savoir le fait que vos emails arrivent bien en boîte de réception), l’engagement de vos destinataires est également conditionné par leur expérience à la réception de votre email. En un mot, si 50 % des messages sont lus sur mobile, il est plus important que jamais de concevoir des messages responsive, dont le format s’adapte à toutes les tailles d’écrans. Voilà pourquoi, début 2015, nous avons lancé Passport, un outil en glisser-déposer pour faciliter la création d’emails responsive.

En surface, Passport permet aux utilisateurs de créer rapidement un email à l’aide d’un simple glisser-déposer. Mais lorsque l’on creuse l’outil, il y a un moteur derrière qui traduit ces simples actions en un code HTML responsive. Sur le plan technique, le message est « décrit » sémantiquement au moteur en JSON, puis le moteur le traduit en code HTML responsive. Plus précisément, le message est décomposé et « décrit », élément par élément, en JSON au moteur qui, en conséquence, génère un HTML responsive.

mjml01
Nous avons rapidement réalisé que ce moteur pourrait avoir un impact bien plus large en dehors de Passport. Que se passerait-il si nous mettions cet outil entre les mains de nos utilisateurs, ou si nous leur permettions de dialoguer directement avec le moteur ? Pour le savoir, nous avons tout simplement choisi d’essayer.

Pour rendre l’ensemble plus convivial et user-friendly, nous avons décidé de remplacer JSON par un langage de balisage, de façon à le rendre presque identique au HTML. Ainsi, les principes fondamentaux du langage MJML restent connus de tous, offrent une difficulté de prise en main moindre, tout en intégrant l’aspect responsive du rendu. Nous avons créé des balises telles que <mj-section> et <mj-column>  et afin que vous puissiez rédiger des emails adaptés à vos besoins, rapidement et en toute simplicité.

D’un langage de balisage à une bibliothèque de composants open source

Bien qu’il soit impossible de résumer tous les types d’emails (newsletters, messages de bienvenue, facturation… la liste est infinie), la structure du contenu ne change pas vraiment d’un email à l’autre.
Le cœur d’un email responsive repose sur un modèle de colonne simple. En revanche, le processus de conception sous HTML peut souvent s’avérer chronophage, répétitif et relativement pénible.

Prenons l’exemple type qu’est un email de facture. En HTML, le code ressemblera à ceci :

La bonne nouvelle est que le moteur MJML s’appuie sur React.js, qui permet d’utiliser et de créer des composants facilement. Vous nous suivez ? MJML vous permet donc de remplacer le code effrayant ci-dessus par celui, beaucoup plus sémantique et charmant, ci-dessous :

Tous les codes HTML générés seront également compatibles avec les principaux clients de messagerie.

Remerciements à la communauté MJML

Nous n’aurions jamais été en mesure de concevoir MJML sans les enseignements de notre communauté : vous. Partant de ce constat, il aurait été injuste de ne pas partager cette technologie… Ainsi, nous avons souhaité que le langage MJML soit en open source sous licence MIT. De cette manière, la communauté pourra exploiter facilement toute la puissance de MJML. La licence MIT est incroyablement simple et accessible. Contrairement à la licence GPL, elle permet d’intégrer le langage MJML à une application plus importante sans avoir à rendre l’ensemble de ladite application open source.

Autrement dit, vous pouvez utiliser MJML pour créer des emails HTML et intégrer le moteur MJML à une application comme vous l’entendez. Mais vous pouvez également contribuer à son amélioration à nos côtés. Si vous souhaitez en savoir plus sur le fonctionnement même de MJML, consultez la page documentation.

En termes de contributions à l’outil, vous pouvez par exemple nous aider à faire en sorte que la sortie HTML de MJML soit parfaite et cohérente avec le plus grand nombre de clients de messagerie possible. Nous espérons que la richesse des composants MJML vous pousseront aussi à créer de nouveaux éléments qui répondront à vos besoins (de l’en-tête que vous réutiliserez dans toutes vos communications aux messages plus spécifiques à votre activité). S’il vous manque un composant quelconque, le mieux est de le créer pour que d’autres personnes en bénéficient également ! Nous consulterons régulièrement les requêtes sur Github pour ajouter ces composants créés par la communauté à la bibliothèque MJML.

Notre ambition est de développer MJML accompagnés par notre communauté, afin de l’améliorer au fil du temps et de répondre au mieux à vos attentes. Nous ferons également des mises à jour régulières pour intégrer tout changement affectant le rendu HTML des clients de messagerie les plus répandus, pour que vous restiez à la pointe de la messagerie électronique !

MJML est en ligne dès maintenant, n’hésitez pas à aller le tester. Nous avons hâte d’avoir vos retours, partagez vos avis dans les commentaires !

Comment les API sont en train de révolutionner le monde des logiciels

Vous souvenez-vous du temps où « le cloud » faisait simplement référence à un ensemble de serveurs externes voir à Internet en général ? Au cours des dernières années, ce terme a évolué pour donner naissance à de nouveaux modèles économiques comme les SaaS (Software-as-a-Service : le logiciel comme service).

Les SaaS sont particulièrement avantageuses pour l’utilisateur final. Elles permettent de rendre des services accessibles aux petites sociétés ou aux particuliers. Mais en tant que développeur, je trouve les API (interfaces de programmation) plus intéressantes : c’est grâce aux API que les SaaS réinventent des choses que nous connaissons depuis des décennies. Ainsi, en 2011, Marc Andreessen, entrepreneur et co-fondateur de Netscape, déclare dans son discours « Software is eating the world » : « Grâce à des coûts de lancement réduits et un marché de services en ligne en pleine expansion, nous vivons dans une économie globale et pour la première fois intégralement numérique. » J’adore l’expression « intégralement numérique » qui résume parfaitement la situation. Or, comment relier plus efficacement cette économique numérique ? Grâce aux API bien évidemment, qui par définition permettent à deux logiciels de se connecter et d’interagir entre eux.

« Les API sont les éléments de base de l’économie numérique », Laura Merling, VP Ecosystems and Solutions, AT&T. (source)

Ce qui est génial pour un développeur – et qui m’a donné envie d’apprendre la programmation par moi-même – c’est la possibilité de construire et hacker autant que possible. Aujourd’hui, nous vivons le meilleur moment pour programmer, développer, hacker, parce que plein d’autres personnes peuvent vous épauler. Vous trouverez très facilement toute l’assistance dont vous aurez besoin auprès de communautés en ligne et hors ligne : sur des forums spécialisés comme Stackoverflow, sur des événements hors ligne ou lors de hackathons, qu’il s’agisse d’un hackathon local ou d’un événement d’envergure mondiale comme Techcrunch Disrupt. En plus de l’aide que vous trouverez auprès de ces communautés, nous avons également de nombreux outils et ressources à notre disposition. En tant que développeur, si vous essayez d’imaginer un outil – quelque chose vous permettant d’atteindre facilement un objectif – les API vous viennent immédiatement à l’esprit. Les API les plus en vue proviennent généralement de services tels que Yo, Twilio ou Venmo. Pourquoi ?

studenthackers

Source: http://studenthackers.devpost.com/

Les API sont formidables car elles vous permettent de créer des fonctions complexes que vous auriez eu bien du mal à développer par vous-même, en raison de leur complexité, du temps que cela vous aurait pris, ou des deux à la fois. Les API vous permettent de déléguer les tâches moins essentielles pour votre société, tout en gardant le contrôle. Que vous cherchiez à intégrer une fonctionnalité d’email transactionnel pour communiquer avec vos utilisateurs ou leur offrir une expérience de recherche plus riche, opter pour la facilité avec une SaaS telle que Mailjet (pour les emails) ou Algolia (pour la recherche) sera toujours plus intelligent que d’essayer de réinventer la roue.

Il est fort probable qu’un produit SaaS permettant de réaliser exactement la tâche que vous avez en tête existe déjà. Elle ne nécessite donc qu’une simple intégration de votre côté. Ceci explique la transition de certaines SaaS, qui deviennent des API-en-tant-que-Service. Elles vous permettent d’intégrer le marché plus rapidement, avec un produit plus complet, tout en vous proposant un service solide, sûr, abordable et évolutif. Le tout grâce à quelques lignes de code seulement.

Les API sont les nouvelles références. Elles modifient notre façon de développer les logiciels en réduisant le volume de code que nous écrivons tout en enrichissant notre façon de développer. Il est souvent possible de réutiliser le modèle fourni par le service que l’on souhaite intégrer et de l’adapter pour répondre à nos besoins.

Et pourquoi ne pas penser différemment et innover ? Pourquoi ne pas pousser les choses plus loin et imaginer les API comme des éléments modulaires grâce auxquels il n’est plus nécessaire d’écrire de code ? Cela semble impossible. Mais cela existe déjà grâce aux connecteurs API comme Zapier ou IFTTT. Besoin de générer des tâches pour votre Calendrier Google ? Facile ! Besoin de faire une sauvegarde automatique de vos pièces jointes Gmail sur Google Drive ? Tout aussi simple !

Vous allez me dire : « OK, super. Mais cela se limite à des actions sur mesure qui ne nous font pas profiter pleinement du potentiel des API. Et ce n’est pas demain que les services tels que Twilio deviendront accessibles aux non-développeurs. » En fait, cela n’est pas tout à fait vrai. Avec l’aide de services tels que Blockspring, tout non développeur peut utiliser Twilio, extraire des données fournies par le gouvernement américain ou créer une datavisualisation. Je suis d’accord avec Blockspring sur le fait que les API peuvent également être utilisées par les utilisateurs finaux ; le fait qu’Andreessen Horowitz et SV Angel leur aient donné 3,4 millions de dollars tend à confirmer cela.

Ne vous méprenez pas. Je ne suis pas en train de dire que les développeurs vont devenir obsolètes ni que quiconque sera capable de décrocher un poste dans la programmation sans aucune formation. Du moins, pas tout de suite. Je veux dire que, bien que les logiciels soient de plus en plus complexes, ils restent toutefois accessibles grâce aux API. Et heureusement. Cela nous permet à nous, développeurs, de nous concentrer sur ce qui est le plus important au niveau du développement et de l’utilisation des API. Dans le cadre de l’entreprise, cela veut dire une chose: toute société de SaaS peut sérieusement envisager de proposer des API, mais si elle décide de faire cela, elle devrait s’assurer d’avoir une solide expérience en programmation. Dès qu’il s’agit d’API, les développeurs ont certaines attentes : documentation, assistance, communauté, respect des standards (REST). Ces points sont importants non seulement parce qu’ils satisferont les développeurs qui utiliseront vos APIs, mais également parce qu’ils sont nécessaires pour que l’API soit reconnue et productive.