Taper des e-mails est pénible. La mise en page et le test de lettres adaptatives avec interactif (par exemple, avec des formulaires et des curseurs) est une douleur dans le carré. Cependant, tout n'est pas si mal si vous choisissez les bons outils. Dans cet article, je vais parler des cadres de messagerie -
MJML et
Foundation for Emails - et de mes ressources préférées pour tester les listes de diffusion -
Litmus et
Email On Acid .
Dans l' article précédent, nous avons appris comment l'histoire de la newsletter a commencé et quel rôle Outlook y a joué, et avons également découvert quelle interactivité nous pouvons ajouter à la newsletter maintenant et laquelle à l'avenir. Cet article parlera des outils pour ceux qui traitent des listes de diffusion aujourd'hui.
Disons que vous voulez faire la newsletter
La première option: créer un nouveau document HTML, prendre un passe-partout prêt à l'emploi (par exemple, le populaire Cerberus ou le Responsive Email Framework ) et s'asseoir pour écrire des tableaux avec des styles en ligne, google en train de manquer des hacks ou des correctifs pour une mise en page qui est soudainement allée à certains Gmail pour Android. Cette option convient si vous avez une certaine expérience dans la mise en page des lettres, suffisamment de temps libre et que la tâche consiste à mettre en page une lettre simple et simple.
Un exemple de modèle de lettre «prêt à l'emploi» disponible dans Cerberus
La deuxième option: utilisez l'éditeur en ligne pour créer un modèle (par exemple, Mosaico ou Stripo ). C'est le moyen le plus simple. C'est parfait si vous n'êtes pas développeur ou si vous êtes confronté à la mise en page pour la première fois et la mise en page de la lettre est assez simple. Presque tous les éditeurs en ligne fournissent des modèles prêts à l'emploi et incluent également des hacks dans le code source du modèle pour le bon fonctionnement des e-mails dans les clients de messagerie courants. Mais ces outils ne vous permettent pratiquement pas de personnaliser la mise en page de la lettre pour votre mise en page spécifique et donnent généralement très peu de contrôle sur le code et l'apparence de la lettre.
Modifications du modèle de lettre dans le concepteur de messages de Stripo
Troisième option: utiliser un framework de messagerie. Si vous devez régulièrement rédiger la newsletter, si la mise en page des lettres est compliquée et les exigences strictes, et si vous souhaitez automatiser votre flux de travail et en partie le processus de développement de la lettre, cette option est pour vous. Je vais parler des deux outils les plus puissants: MJML et Foundation for Emails (connu sous le nom de Ink dans sa jeunesse).
Nous utilisons un cadre de messagerie électronique prêt à l'emploi. Mjml
- Github: mjmlio / mjml
- Développeur: Mailjet
- Date de sortie: 2016
- Licence: MIT
- Popularité: 7662+ étoiles
- Modèle: MJML
Les principales idées intégrées dans le cadre:
- des modèles réactifs prêts à l'emploi,
- simplification du travail avec le code grâce à son propre moteur de template,
- un ensemble de composants prêts à l'emploi à l'intérieur de la lettre,
- intégration pratique dans le processus de développement de la liste de diffusion.
Le cadre utilise le moteur de modèle du même nom. C'est simple et en même temps très puissant. Oubliez la table des balises, thead, tbody, th, tr, td. Oubliez que les styles doivent être écrits en ligne. Oubliez la structure complexe illisible du code lettre. Voici à quoi ressemblera votre e-mail utilisant MJML:
<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>
Au lieu de constructions complexes à partir de tableaux HTML de différents niveaux d'imbrication, il suffit d'écrire quelques lignes qui, lorsque le projet sera construit, seront transformées en un code HTML valide de la lettre "assaisonné" avec tous les hacks nécessaires.
MJML fournit des plugins pour les éditeurs de texte populaires - Visual Studio Code, Atom et Sublime Text. Ils ajoutent la coloration syntaxique du langage, un linter et un onglet avec un aperçu de la composition directement dans l'éditeur lui-même.
Si vous ne voulez pas vous soucier des éditeurs de cli ou de texte, il existe une application de bureau multiplateforme officielle distincte, avec un éditeur de code complet, un visualiseur de modèles de lettres prêts à l'emploi et un aperçu en direct de votre lettre.
En plus d'un ensemble de composants standard (comme un bouton ou un carrousel), il existe des composants personnalisés prêts à l'emploi (par exemple, un composant pour dessiner des graphiques). Vous pouvez trouver des utilitaires utiles sur la page des modules complémentaires de la communauté , tels que le chargeur MJML pour WebPack ou l'outil d'intégration pour l'application Laravel MJML. Et il n'y a pas si longtemps en version bêta, il est devenu possible d'utiliser l'API MJML pour générer des e-mails directement, par exemple, dans une application mobile. La chose est assez spécifique, mais elle trouvera sûrement son utilisateur.
Le principal inconvénient du cadre est en même temps l'un de ses avantages: la «réactivité». Le cadre automatiquement et sans intervention du développeur prend en charge le comportement du modèle de lettre sur les appareils avec une petite largeur d'écran. Cela se traduit par une contrainte à quatre colonnes dans la grille et un manque de capacité à régler le comportement de mise en page réactive pour répondre à vos besoins.
Un petit détail mais agréable: sur le site Web dans la section avec la documentation, il y a une section avec une description de type CanIUse de la prise en charge des composants MJML dans divers clients de messagerie. Vous pouvez immédiatement vérifier sur le site et ne pas vous demander comment la lettre se comportera, par exemple, dans Outlook 2007.
Conclusion : MJML est un outil très puissant et facile à apprendre pour créer des e-mails réactifs. Des difficultés ne peuvent survenir que si vous avez besoin d'une personnalisation de modèle parfaite très fine et parfaite.
Nous utilisons un cadre de messagerie électronique prêt à l'emploi. Fondation pour les e-mails
Si vous n'êtes pas la première année dans le monde du front-end, alors vous avez probablement entendu parler (mais - je parie - vous l'avez à peine utilisé;)) de Foundation for Sites . Ce framework, créé par des développeurs de la société ZURB, a longtemps obtenu le statut de deuxième place en popularité (après Bootstrap) parmi les frameworks web frontaux.
Foundation for Emails est créé par les mêmes personnes et fait essentiellement partie de Foundation for Sites. Cela lui donne à la fois un certain nombre d'avantages (une grande entreprise de développement, une communauté assez grande, tout ce que vous avez aimé sur Foundation for Sites) et un certain nombre de limitations (tout ce que vous n'avez pas aimé sur Foundation for Sites ne sera pas aimé chez Foundation for Emails).
La première chose à faire si vous décidez d'essayer le framework est d'installer Foundation CLI:
npm install --global foundation-cliEnsuite, vous pouvez créer un nouveau projet avec la commande:
foundation new --framework emailset commencer à développer la lettre.
Certes, vous devez attendre quelques minutes jusqu'à ce que tous les modules et composants nécessaires soient chargés. Étant donné qu'un grand nombre de fichiers sont téléchargés, ne soyez pas surpris de la taille du dossier - un projet vide pèsera plus de 400 Mo. En plus de cli, Live Reload est disponible immédiatement, un passe-partout de base avec tous les hacks nécessaires, des modèles et des partiels prêts à l'emploi, ainsi que le support SASS.
Structure du fichier de projet Foundation for Emails
FfE a son propre moteur de template - Inky. À la base, il fait la même chose que le moteur de modèle MJML - il simplifie le travail avec des tables imbriquées complexes à l'aide de balises raccourcies:
<container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>
Il y a environ dix balises au total, trois d'entre elles sont utilisées pour créer une grille (voir l'exemple ci-dessus), la balise block-grid est utilisée pour créer une grille de blocs, deux autres balises sont un menu (menu et élément), et les noms de deux autres parlent d'eux-mêmes: bouton et légende.
FfE utilise une grille à 12 colonnes, qui peut être simplifiée en 2, 3, 4 ou 6 colonnes, et vous permet également de définir le nombre de colonnes séparément pour les états mobile et de bureau.
Le système de partiels et d'aides est implémenté à l'aide du compilateur de fichiers Panini, qui utilise en interne le moteur de modèle de guidon simple et pratique.
Contrairement à MJML, lors de l'utilisation de FfE, deux versions de la lettre sont créées - une pour les clients de bureau et une pour les mobiles. Ensuite, vous décidez sur quel point d'arrêt vous souhaitez basculer entre les états bureau / mobile, et vous pouvez également activer ou désactiver les blocs de votre mise en page à l'aide de classes spéciales: .hide-for-large et .show-for-large.
Conclusion: Foundation for Emails offre un contrôle complet sur la mise en page de la lettre pour son bureau et son état mobile. Des difficultés peuvent surgir dans le processus d'immersion dans le cadre et dans la tentative de gérer ses subtilités, car il est assez grand et complexe. Mais si vous voulez contrôler tous les aspects de votre modèle - votre choix est Foundation for Emails.
Outils de test de newsletter
Notre newsletter est donc prête. Il a fière allure dans un navigateur. Qu'en est-il d'Outlook et des clients de messagerie mobile? Il est temps de se tourner vers des services spécialisés pour tester la newsletter: Tournesol et Email on Acid .
Tester la newsletter Litmus
Litmus fournit un ensemble complet d'outils dont vous pourriez avoir besoin pour tester les listes de diffusion. Il s'agit d'une idée Web pour éditer du code html (Builder), et un système d'analyse de mailing, et un ensemble de «listes de contrôle» - outils de test de performance, vérification des messages pour le spam, et bien plus encore.
La «liste de contrôle» la plus importante - Aperçu des courriels - permet de vérifier les courriels dans plus de 90 clients de courriel de bureau / mobile / Web. Cela se fait en quelques clics. Vous devez insérer le code de lettre dans le générateur, cliquez sur le bouton de test et sélectionnez les clients de messagerie nécessaires.
Récemment, les développeurs ont ajouté une fonctionnalité intéressante: l'inspecteur du code html traité par le client de messagerie (html traité). Il ressemble un peu à l'inspecteur des outils de développement de votre navigateur préféré: vous pouvez sélectionner une zone spécifique du message et voir son code. Cela aide beaucoup à analyser les problèmes spécifiques au client sans recourir à des modifications aveugles, puis à afficher le résultat dans la prévisualisation par e-mail.
Afficher le HTML traité dans Litmus
J'ai trouvé deux inconvénients avec Litmus. Le premier est le manque de réponse de l'interface utilisateur dans son ensemble et les décalages d'aperçu des e-mails qui se produisent de temps en temps et vous font passer beaucoup de temps à attendre la création de l'aperçu et à redémarrer les tests.
Deuxième moins: le prix. L'option d'abonnement minimum vous coûtera 80 $ / mois. De plus, le plan sélectionné affecte directement le nombre de prévisualisations de lettres qui seront disponibles. Je vous conseille donc de bien réfléchir si vous avez vraiment besoin de tournesol ou si vous pouvez vous en sortir avec une alternative moins chère.
Test des e-mails sur les newsletters acides
Le deuxième service dont je voudrais parler est Email On Acid . Il peut être appelé en toute sécurité le "petit frère" de Tournesol dans presque tous les aspects.
Jugez par vous-même: il existe une idée Web pour éditer la newsletter, il existe des outils pour analyser la lettre, il y a des tests de spam et, bien sûr, il y a aussi des tests d'email dans plus de 70 applications.
L'aperçu des lettres est presque le même que dans Litmus. Les différences sont principalement d'apparence, les options / paramètres sont légèrement plus petits, il n'y a pas d'inspecteur du code de lettre traité et d'autres outils moins utiles. Mais l'interface utilisateur EoA est plus pratique et plus facile que celle de Litmus et fonctionne avec pratiquement aucun décalage. Le test des e-mails s'effectue environ une fois et demie plus rapidement.
Dernier facteur important: le prix. Le courrier électronique sur Acid est la moitié du prix de Litmus avec des fonctionnalités très similaires. Et il n'y a aucune restriction sur le nombre de prévisualisations de votre lettre. Ce sont incontestablement des vins d'EoA.
Que choisir?
Les outils décrits ci-dessus coûtent beaucoup d'argent. À mon avis, il est logique de les utiliser de façon continue uniquement si vous rédigez régulièrement, au moins plusieurs fois par mois, des lettres assez complexes et si vous avez des exigences strictes pour leur prise en charge dans divers clients de messagerie, en particulier les mobiles.
Si vous effectuez des envois occasionnels, il existe deux options alternatives:
- utilisez l'essai Litmus / Email on Acid pendant 7/14 jours (selon le service) - l'argent du premier mois sera remboursé sur votre carte;
- utiliser une combinaison de services moins populaires qui ont des plans gratuits et tester manuellement les clients de messagerie.
Voici quelques services qui peuvent être utilisés gratuitement, mais dans une mesure limitée:
- PreviewMyEmail (Gmail pour Chrome / FF / IE, Thunderbird, Apple Mail pour iOS7);
- InboxInspector (Thunderbird 2/3, Outlook 2003/2007/2010 / Outlook Express);
- DirectMail (Outlook 2003, Gmail dans IE);
- Putsmail + PilotMailer (services en ligne pour l'envoi d'un code de lettre à n'importe quelle adresse, pratique à utiliser pour les tests manuels de la newsletter);
Quoi que vous choisissiez à long terme, l'essentiel est que l'outil réponde à vos besoins.
Conclusion
La portée des outils pour le codeur de mise en page a maintenant atteint le niveau de développement où nous pouvons non seulement utiliser des cadres pratiques pour développer des lettres et des applications pour les tester, mais aussi choisir les bons pour nos tâches et capacités.
Si vous tapez rarement des lettres et qu'elles sont généralement simples - n'hésitez pas à prendre le passe-partout de base, à composer et à tester «manuellement». Vous pouvez également utiliser des services gratuits pour les tests.
Si vous devez régulièrement composer des lettres et que les mises en page sont complexes et adaptatives, MJML et Foundation for Email prendront en charge certains de ces problèmes. Et Limus et Email on Acid économiseront beaucoup de temps et de cellules nerveuses dans une tentative de vaincre Outlook ou Gmail ennuyeux sur Android.
Et quelle voie choisissez-vous? Partagez dans les commentaires.