Un guide complet des emails HTML

Table des matières

Vous trouverez ci-dessous des sauts rapides vers des composants particuliers dont vous pourriez avoir besoin. Faites défiler vers le bas pour un aperçu général. Ou ignorez la table des matières .

Premiers pas avec les e-mails HTML

Si vous essayez simplement de comprendre tout ce qui se passe dans les coulisses d'un monde décalé d'e-mails HTML, Caity G. O «Connor a publié un merveilleux guide sur comment commencer avec le codage des e-mails . L'article présente des cours, des didacticiels, des articles et des directives générales à garder à l'esprit lors de la création et de la conception d'e-mails, le tout dans un guide complet d'une page. Sur SmashingMag, Lee Munroe a également publié un guide détaillé pour créer et envoyer des e-mails HTML .

Alternativement, Comment coder des e-mails HTML pour n'importe quel appareil est un guide très complet sur la construction d'un modèle d'e-mail HTML fiable et comment le tester – avec un exemple pratique de création d'un modèle de newsletter à partir de zéro. En général, c'est un très bon aperçu de tout ce que vous devez savoir pour démarrer du bon pied.

Jason Rodriguez a un cours vidéo détaillé sur HTML Email (pas gratuit) avec à peu près tout pour les connaître, de l’accessibilité au dépannage, en passant par les flux de travail et les outils.

Et si vous vous trouvez aux prises avec un problème de courrier électronique ou si vous cherchez simplement l’aide d’une communauté, #emailgeeks est un excellent point de départ . C'est une communauté Slack sur invitation uniquement avec de nombreux canaux pour discuter du code, de la conception, des offres d'emploi, des événements et des nouveaux outils et ressources. Vous pouvez également trouver de nombreuses ressources partagées avec le hashtag #emailgeeks sur Twitter .

Langages et cadres de messagerie HTML

Coder des e-mails propres et réactifs qui offrent une expérience solide dans tous les clients de messagerie populaires peuvent être un défi chronophage. HEML est là pour changer cela. Le langage de balisage open-source vous donne la puissance native du HTML sans avoir à gérer toutes les bizarreries de l'e-mail. Il n'y a pas de règles spéciales ou de paradigmes de style à maîtriser, donc si vous connaissez HTML et CSS, vous êtes prêt à commencer.

MJML est basé sur la même idée de simplifier le processus de création d'e-mails réactifs. Le langage de balisage est basé sur une syntaxe sémantique qui rend le processus simple tandis qu'un moteur open-source fait le gros du travail et traduit le MJML que vous avez écrit en HTML réactif. Vous pouvez commencer avec le didacticiel pas à pas via MJML .

Une bibliothèque de composants standard vous fait gagner du temps et allège votre base de code de messagerie. Et si vous voulez créer le vôtre, Modular Template System Guide peut également vous aider.

HTML Email Framework Basé sur Tailwind CSS

Faire fonctionner un e-mail HTML sur les clients de messagerie n'est pas facile tâche. Heureusement, il existe de nombreux outils, modèles et frameworks fiables pour vous faciliter la tâche. Par exemple, Maizzle est un framework qui vous aide à créer rapidement des e-mails HTML avec Tailwind CSS et avancé, post-traitement spécifique aux e-mails . Il fournit également quelques projets prêts à l'emploi ( Maizzle Starters ) avec lesquels vous pouvez commencer tout de suite.

Maizzle utilise le framework CSS Tailwind pour permettre aux concepteurs et aux développeurs de prototyper facilement des e-mails avec HTML et CSS. plutôt que de ne pas développer tous les e-mails à partir de zéro. Vous pouvez également envisager MJML .

Modèles d'e-mails HTML à l'épreuve des balles

Cerberus et Email HTML ] fournissent de petites collections de modèles fiables et solides pour les e-mails HTML réactifs qui sont bien testés dans plus de 50 clients de messagerie, y compris Gmail, Outlook, Yahoo, AOL et bien d'autres. EmailFrame.work vous permet de créer des modèles de courrier électronique HTML réactifs avec des options de grille prédéfinies et des composants de base, pris en charge dans plus de 60 clients de messagerie.

Codedmails comprend 60 modèles et thèmes de courrier électronique, tous écrits en MJML et testés pour la compatibilité. Le code est disponible sur Github, et les modèles sont gratuits pour des projets non commerciaux, tandis que les fichiers source MJML sont fournis moyennant un supplément.

Stripo Chamaileon Cartes postales Topol.io GoodEmailCode Pixelbuddha and Bee Free all propose de nombreux modèles d'e-mails HTML gratuits, Litmus fournit Modèles d'e-mails réactifs pour les bulletins d'information, les mises à jour de produits et les reçus, et CampaignMonitor dispose d'un générateur de modèles d'e-mails HTML gratuit avec la fonctionnalité glisser-déposer.

Prise en charge de la fonctionnalité de messagerie HTML: Puis-je envoyer un e-mail…?

Un outil pratique qui appartient à l'ensemble d'outils de tous ceux qui se retrouvent à se débattre avec des e-mails HTML – que ce soit de temps en temps ou régulièrement – est caniemail.com . Inspiré du concept réussi de caniuse.com Puis-je envoyer un e-mail vous permet de vérifier la prise en charge de 179 fonctionnalités HTML et CSS sur 31 clients de messagerie.

Vous pouvez saisir une fonctionnalité pour voir dans quelle mesure elle est prise en charge vérifier l'index des fonctionnalités, comparer les clients de messagerie ou afficher un tableau de bord du support client de messagerie qui classe les clients de messagerie en fonction de leur support. Les données complètes sont également disponibles sous forme de fichier JSON.

Un référentiel pour les bogues des e-mails

Apple Mail n'affiche pas les SVG incorporés, Gmail n'affiche pas les e-mails en pleine largeur, Outlook change le comportement des Gifs animés – nous savons tous à quel point c'est étrange Les clients de messagerie se comportent parfois.

Pour vous aider à comprendre ce qui se passe lorsque vous rencontrez des bogues comme ceux-ci, Rémi Parmentier maintient Email Bugs un référentiel GitHub pour les comportements étranges des clients de messagerie . Cela facilite non seulement la vie des concepteurs de courrier électronique en fournissant un espace pour discuter des bogues, mais tente également de signaler chaque bogue à l'entreprise concernée et de les corriger pour de bon. Mais juste au cas où ce ne serait pas possible, Comment cibler des clients de messagerie fournit un aperçu des solutions de contournement pour cibler des clients de messagerie spécifiques.

Mailto Link Generator

Les bons vieux liens HTML peuvent faire plus que ce que nous avons habituellement donnez-leur du crédit. Nous pourrions être habitués à mailto: préfixe mais en fait générer le code peut être assez ennuyeux. Mailtolink.me fait une chose, et il le fait bien: il génère l'extrait des liens mailto comprenant CC, BCC, la ligne d'objet et le corps du texte.

Mailto Selection Prompt

Parfois, lorsque vous cliquez sur une adresse e-mail, il peut ouvrir une application que vos clients n'utilisent pas vraiment. C'est pourquoi il est courant de copier-coller des adresses e-mail au lieu de cliquer directement sur les liens. Pour éviter toute frustration à l'autre extrémité, nous pouvons utiliser Mailgo et MailtoUI .

Au lieu d'ouvrir un client de messagerie natif, les deux outils affichent une fenêtre modale permettant à l'utilisateur de choisir l'un des services préférés, ou copier- collez le lien. De plus, Mailgo peut également adresser tous les liens tel ce qui leur permet d'ouvrir Telegram, WhatsApp, Skype, d'appeler par défaut ou de copier le numéro de téléphone – et il prend également en charge le mode sombre.

Email Inspiration [19659005] Cela peut sembler juste parce que le courrier électronique HTML semble assez ancien et obsolète, tout comme les possibilités de ce que nous pouvons faire avec le courrier électronique HTML. Cependant, il existe de nombreuses ressources des blogs et des podcasts présentant de nouvelles techniques de courrier électronique – certains d'entre eux étant souvent du côté très créatif!

Blog Litmus Blog CampaignMonitor et HTML Email contiennent de nombreux articles et podcasts avec les meilleures pratiques , des astuces, des ressources et même des podcasts sur des e-mails HTML. Et si vous avez besoin d'un peu d'inspiration pour les e-mails récents, triés par secteur d'activité, Really Good Emails et EmailLove vous soutiennent également.

• Vous n'avez pas besoin de vous peigner. via votre propre boîte de réception pour trouver l'inspiration de conception d'e-mails HTML. Email Love a rassemblé une fantastique sélection d'e-mails inspirants provenant de grandes entreprises.
• Really Good Emails facilite la recherche d'inspiration d'e-mails HTML. Vous avez le choix d'explorer la collection chronologiquement ou vous pouvez affiner les résultats en fonction du type de courrier électronique (par exemple, coupon, essai gratuit), de l'objectif (par exemple, récompenses client, merci), du nom de l'entreprise ou de la catégorie. et ainsi de suite.
• Pas assez? Il existe également Modèles d'e-mails HTML et Galerie d'e-mails HTML .

E-mails accessibles

Avec les e-mails, où en sommes-nous en termes d'accessibilité ? Annonçons-nous correctement les e-mails aux lecteurs d'écran? Et le mode sombre? Repo d'e-mails accessible met en évidence un certain nombre d'articles, d'outils, de présentations et de ressources sur l'accessibilité – non seulement pour les e-mails, mais surtout pour cela.

Avec Accessible-Email.org vous pouvez analyser les campagnes envoyées et vérifier les améliorations d'accessibilité. Avec Dark Mode for Email Simulator vous pouvez vérifier à quoi ressemble votre e-mail en mode sombre.

CSS en ligne et transformer les e-mails HTML

Si tout ce dont vous avez besoin est un espace propre pour transformer votre HTML et CSS, Alter.Email est une option fiable. Avec l'outil, vous pouvez choisir quelques «transformateurs» – par exemple en ligne CSS et nettoyer le code supprimer les CSS inutilisés, ainsi que formater le HTML et même empêcher les mots veuves. Vous pouvez également utiliser Postdrop qui vous permet également de réduire et d'intégrer le CSS et d'envoyer un e-mail de test.

Supprimer les CSS inutilisés des modèles d'e-mails

L'écriture de CSS n'est pas une tâche particulièrement excitante avec les e-mails HTML, parsemés de ! Important et styles en ligne partout. Pour supprimer le CSS inutilisé des modèles de courrier électronique, il existe Email Comb . L'outil vous permet d'ajouter des classes et des identifiants que vous souhaitez ignorer, de choisir si vous souhaitez le réduire et de supprimer les commentaires, et il montre exactement ce qu'il a supprimé.

Cheatsheet pour le ciblage des clients de messagerie

Les clients de messagerie modifient et suppriment une partie de votre HTML et CSS, souvent impitoyablement. Si l'un des clients de messagerie ne se comporte pas comme prévu, vous souhaiterez peut-être le traiter séparément. Une feuille de triche pour cibler les clients de messagerie vous permet de choisir un client de messagerie cible et au moins d'essayer de l'adresser directement. Cela peut ne pas fonctionner tout le temps car les clients de messagerie changent tout le temps, mais c'est quelque chose qui vaut la peine d'essayer.

Everything HTML Email Resources

Thebetter.email fournit un référentiel croissant de ressources de marketing par e-mail utiles, y compris des personnes, des sites d'apprentissage, des outils, des détails sur les fournisseurs de services de messagerie, newsletters, code et ressources électroniques interactives. Sélectionné par Jason Rodriguez, qui travaille dans l'industrie depuis des années et qui a passé beaucoup de temps à patauger dans la boue pour trouver les bonnes choses.

Ressources de marketing par e-mail

Si vous avez besoin de vous plonger dans les tranchées du courrier électronique HTML, des meilleures pratiques et du marketing par courrier électronique, Guides CampaignMonitor et Guides Mailchimp disposent de nombreuses ressources pour commencer. En effet, certains d'entre eux seront spécifiques au produit, mais il y aura aussi des guides plus généraux sur les meilleures pratiques pour l'envoi d'e-mails, des guides de conception, des conseils de livraison, des exigences anti-spam et bien d'autres sujets dans ce sens.

Et si vous recherchez des tendances en cours dans le marketing par e-mail, Oracle's Email Marketing Trends incluent de nombreuses vidéos sur la délivrabilité des e-mails, l'architecture modulaire des e-mails, l'accessibilité des e-mails et le marketing par e-mail.

Mode sombre dans Gmail et Outlook

Nous nous sommes tous habitués au mode sombre dans de nombreuses applications et sites Web. là, mais qu'en est-il de la prise en charge du mode sombre dans les clients de messagerie HTML? Nous pourrions bien sûr envoyer le même e-mail à tous les abonnés, mais si vous êtes habitué au mode sombre sur votre système d'exploitation, un e-mail brillant pourrait plutôt être dérangeant et encourager l'abandon .

Le Guide du développeur sur le mode sombre dans les e-mails met en évidence certaines des consignes importantes à garder à l'esprit lorsque vous créez une version en mode sombre de votre e-mail HTML. Il explique comment cibler le mode sombre, comment gérer les images et la prise en charge générale du navigateur (ce qui est plutôt bien!).

Rémi Parmentier s'en va un peu plus loin, montrant comment résoudre les problèmes de mode sombre de Gmail avec les modes de fusion CSS . Gmail impose le changement de toute couleur de texte clair en une couleur de texte sombre. Si vous avez besoin de résoudre ce problème, Rémi a proposé une utilisation créative du mix-blend-mode (pris en charge dans Gmail) pour conserver la couleur du texte clair si vous en avez besoin. Et si vous devez vous assurer que vos e-mails répondent au mode sombre de Outlook.com Remi vous a également couvert .

IDE de développement d'e-mails HTML

Si vous passez pas mal de temps avec les e-mails HTML, vous voudrez peut-être utiliser un code HTML dédié Editeur de courrier électronique. Parcel est juste cela: un éditeur de code spécialement conçu pour le codage et la conception de courriels. Il fournit des aperçus en direct, afin que vous puissiez voir en temps réel ce que vous construisez, et il dispose également de fonctionnalités d'accessibilité prêtes à l'emploi, afin que vous puissiez vérifier les problèmes d'accessibilité pendant que vous créez ou concevez l'e-mail. De plus, l'outil vous permet également de collaborer avec votre équipe et d'exécuter des tests de courrier électronique directement à partir de l'outil.

Vous pouvez également consulter Mail Studio une application de bureau sophistiquée (pour Windows, macOS et Linux) qui combine visuel et édition de code dans un seul e-mail IDE .

L'application est livrée avec une bibliothèque de composants, des en-têtes aux barres de navigation et accordéons, quelques modèles d'e-mails réactifs, intégrations Google Fonts, prise en charge Sass intégrée, palette de commandes , des outils de collaboration, des aperçus d'e-mails et même l'intégration avec des fournisseurs de services de messagerie tels que MailChimp, Campaign Monitor et Sendgrid. L'intégration Figma est censée arriver prochainement.

Générer un aperçu de l'e-mail pleine page

Si vous avez besoin d'un aperçu pleine page de votre e-mail HTML, Emailpreview.io est peut-être exactement ce dont vous avez besoin . Vous pouvez copier / coller du code HTML ou importer un fichier EML que vous venez de recevoir, et l'outil génère une image entièrement rendue de votre e-mail. Vous pouvez également choisir la largeur de l'appareil. Un petit outil utile à garder à proximité.

Mail Tracker Blocker

Most Les e-mails marketing incluent des trackers dans les e-mails HTML, afin qu'ils puissent suivre à quelle fréquence, quand et où les clients ouvrent des e-mails. MailTrackerBlocker agit à peu près comme un bloqueur de publicités pour les navigateurs, mais fonctionne avec les clients de messagerie. L'outil identifie qui suit les clients et supprime les pixels de suivi avant qu'ils ne puissent être affichés, afin que vous puissiez toujours charger tout le contenu distant et garder votre comportement privé. Actuellement disponible uniquement pour Apple Mail sur macOS 10.11 – 11.x ( bravo à Jeremy Keith! ).