Imaginons que vous développiez une nouvelle fonctionnalité ou application. La fin est en vue. Toute l'infrastructure compliquée, les bases de données, les API, les tests ont bonne mine. Ensuite, vous réalisez qu'il existe des points clés dans le système où vous devez envoyer des courriels «transactionnels»; réinitialisation du mot de passe, e-mails de bienvenue, reçus, factures.

Vous savez qu'il existe des services et des API que vous pouvez utiliser pour gérer cela pour vous, mais lorsque vous commencez à envisager d'envoyer un courrier électronique, vous réalisez que ce sera plus difficile que vous ne le pensiez. Surtout si vous voulez utiliser les designs que votre designer, chef de produit ou responsable marketing avait en tête.

C'est un scénario courant. En tant que développeurs, nous pensons rarement aux e-mails transactionnels avant la création du produit. Mais c’est acceptable, car il existe une foule de solutions qui vous soutiennent. Cela faisait longtemps que vous n'aviez plus besoin de configurer votre propre infrastructure de messagerie pour gérer l'envoi, la réception, les rebonds, les désabonnements, etc..

Cela dit, vous devez savoir quelques points importants sur la création d’e-mails HTML, leur envoi et le maintien d’un bon score de réputation d’expéditeur. Cette liste de contrôle vous aidera à préparer votre prochain projet comportant des courriels transactionnels. Nous couvrirons:

1. Que sont les emails transactionnels??
2. Choisissez votre fournisseur de services de messagerie (ESP)
3. Un guide pour la délivrabilité et la réputation
   
4. Codage HTML sensible Email
   
5. Ressources de messagerie pour les développeurs
   

Remarque: ce tutoriel fait partie de la totalité du contenu du courrier électronique de Tuts + Web Design: consultez le guide d’apprentissage de Mastering HTML Email pour en savoir plus.!

Que sont les emails transactionnels??

Vous pouvez classer les e-mails envoyés par les entreprises et les applications à:

• Courriels transactionnels
• Courriels de marketing

Vous pouvez les décomposer davantage en sous-catégories, mais aux fins de ce dont nous parlons ici, restons avec ces deux.

Les e-mails marketing sont généralement de nature promotionnelle et gérés par des équipes marketing. Ils comprennent des lettres d’information mensuelles, des promotions saisonnières, des mises à jour de sociétés et de produits, de nouvelles versions, etc. Une stratégie de contenu et de cycle de vie est en retard, quand et à quelle fréquence les envoyer..

Les e-mails transactionnels sont ceux déclenchés par le comportement de l'utilisateur et généralement mis en œuvre par les développeurs ou les équipes de produits. L'utilisateur fait quelque chose dans votre application qui provoque l'envoi d'un courrier électronique. Ceux-ci inclus:

• Courriel de bienvenue
• Courriels de confirmation
• Réinitialisation du mot de passe
• Nouvelles factures / reçus
• etc.

La plupart de ces courriels que vous enverrez probablement vous-même, mais vous pouvez également les envoyer par le biais de services tiers, par exemple Stripe pour les reçus, Shopify pour le commerce électronique..

Les règles applicables aux courriers électroniques transactionnels et marketing diffèrent légèrement. GDPR étant entré en vigueur le 25 mai 2018, toute personne envoyant un courrier électronique marketing est tenue de recueillir l'autorisation explicite des abonnés et de conserver un enregistrement de cette autorisation. Dans l'état actuel des choses, vous n'avez pas besoin d'une autorisation explicite pour envoyer des courriels transactionnels, par exemple. un reçu à quelqu'un qui vient d'acheter quelque chose dans votre magasin. Cependant, il est avantageux de rester en conformité avec les réglementations GDPR, quel que soit le type de courrier électronique que vous envoyez..

Choisissez votre fournisseur de services de messagerie (ESP)

Il est tout à fait possible de configurer votre propre serveur de messagerie et de gérer vous-même l'envoi de courrier électronique. Si vous travaillez dans une grande entreprise telle que Google ou Facebook, vous pouvez même avoir votre propre équipe d'infrastructure de messagerie dédiée à la prise en charge du courrier transactionnel..

Pour la majorité d'entre nous, je ne recommande pas la configuration et la maintenance de votre propre serveur de messagerie. Il y a beaucoup de frais généraux impliqués dans le support et la maintenance. Au lieu de cela, utilisez l'un des ESP disponibles. Ils ont d'excellentes API pour les développeurs et sont à prix raisonnable, généralement avec de généreux niveaux gratuits.

SendGridMailgunCachet de la posteMailjetSparkPost

Chacun de ces ESP contient de nombreuses fonctionnalités avec tout ce dont vous avez besoin pour gérer le courrier transactionnel:

• Envoi de courrier électronique via API ou SMTP.
• Réception et analyse du courrier électronique entrant.
• Mesures pour les courriels envoyés, reçus, renvoyés, ouverts et cliqués.
• Désinscription et gestion de la liste de suppression.
• Surveillance de la réputation.
• Gestion de la boucle de rétroaction.
• Conformité GDPR et plus.

Une fois que vous avez choisi votre ESP, il est temps de mettre les choses en place.

Un guide pour la délivrabilité et la réputation

Les fournisseurs de boîtes aux lettres (comme Gmail et Outlook) examinent une petite chose appelée réputation. Vous voulez une bonne réputation pour vous assurer que votre courrier électronique parvient dans les boîtes de réception des destinataires. Si votre réputation est mauvaise, votre courrier électronique sera envoyé au courrier indésirable ou le fournisseur de messagerie peut le rejeter et il sera renvoyé..

Selon Talos, en juillet 2018, le volume quotidien moyen de spam envoyé dans le monde était de 305,95 milliards de dollars. Vous ne voulez pas que votre courrier tombe dans ce seau.

Volume de spam quotidien moyen

Les choses qui peuvent contribuer à une mauvaise réputation:

• Destinataires marquant votre email comme spam.
• Les destinataires n'ouvrent pas ou n'engagent pas avec votre email.
• Vous envoyez trop d'emails.
• Vous envoyez des emails à partir d'une adresse IP qui a un mauvais score.
• Vous n'avez pas configuré DKIM, SPF et DMARC.
• Le contenu que vous envoyez ressemble à du spam.

Les trois principales méthodes d'authentification à prendre en compte sont SPF (Sender Policy Framework), DKIM (DomainKeys Identified Mail) et DMARC (authentification, rapport et conformité des messages basés sur le domaine)..

SPF est un moyen pour les fournisseurs de boîtes aux lettres d'authentifier que l'e-mail provient bien de votre domaine. C’est un enregistrement DNS TXT que vous devrez ajouter vous-même via votre gestion DNS.

domain.com. TXT "v = spf1 include: domaine ~ tous"

DKIM utilise des paires de clés publique / privée pour signer chaque message avec une signature cryptographique unique, conçue pour détecter l'usurpation de courrier électronique. Lorsque vous appuyez sur envoyer, votre ESP ajoute une signature privée, puis votre signature publique est apposée sur votre DNS, que le fournisseur de boîtes aux lettres du destinataire appellera pour s'assurer que tout va bien..

_domainkey.domain.com. TXT "v = DKIM1; k = rsa; p = PUBLIC_KEY"

DMARC n'est pas un protocole d'authentification, mais vous permet de définir une stratégie d'utilisation des messages qui ne passent pas SPF ou DKIM, qu'il s'agisse d'un rejet ou d'une mise en quarantaine..

_dmarc.domain.com. TXT "v = DMARC1; p = rejeter; pct = 100; [email protected]"

Voici un exemple de la manière dont l’authentification par courrier électronique s’assemble. Ceci est trop simpliste, mais vous donne une idée de la façon dont cela fonctionne.

Authentification par courrier électronique (src: htmlemail.io)

La réputation est liée à la fois à votre domaine d'envoi et à l'adresse IP que vous utilisez, vous voulez donc que cela soit statique. La vérification de votre adresse IP est la méthode la plus élémentaire utilisée par un fournisseur de boîtes aux lettres (Gmail, Outlook, Hotmail, Yahoo, AOL, etc.) lors de la vérification de votre réputation. Lorsque vous envoyez plus de 50 000 courriels par semaine, vous devriez envisager d'utiliser une adresse IP dédiée afin de ne pas la partager avec d'autres personnes, ce qui vous isolera davantage. Et gardez à l’esprit que vous devez «réchauffer» les IP. Vous ne devriez pas simplement commencer à envoyer immédiatement des millions d'e-mails à partir d'une nouvelle adresse IP dédiée. La plupart des ESP offrent cette fonctionnalité.

Une autre chose à considérer consiste à utiliser des adresses IP et des sous-domaines distincts pour votre courrier électronique transactionnel et marketing. Je met généralement en place quelque chose comme send.mydomain.com pour le marketing et notifications.mydomain.com pour les emails transactionnels.

N'envoyez pas depuis une adresse e-mail «sans réponse». Tout d’abord, vos destinataires ont l’impression que vous ne vous en souciez pas et que vous ne voulez pas les entendre. Deuxièmement, c'est un génial chose quand les destinataires répondent et s’engagent. C'est ce que les fournisseurs de boîtes aux lettres aiment voir.

Utilisez des outils tels que SenderScore et SenderBase pour surveiller votre réputation.

Codage HTML sensible Email

MIME Multipart

Lorsque vous envoyez un email, il est composé d'en-têtes et de différentes parties. Cela s'appelle MIME (Multipurpose Internet Mail Extensions). Cela combine du texte brut, HTML et / ou d’autres éléments et laisse le choix au client destinataire de choisir son mode d’affichage..

• Les en-têtes contiennent des paires de valeurs clés telles que l'identité de l'expéditeur d'origine, le sujet, l'adresse de réponse et de nombreuses autres données intéressantes. Dans votre corps, vous avez différentes "parties".
• text / plain est la forme la plus simple d'envoi d'un courrier électronique avec du texte uniquement et sans mise en forme..
• text / html active le HTML. C'est là que va votre email HTML.
• text / watch-html est destiné aux montres, comme Apple Watch, et a un support HTML limité.
• text / x-amp-html est une nouvelle partie qui apporte du contenu interactif à Gmail avec AMP pour le courrier électronique..

Pour la plupart des courriels, vous envoyez une partie en texte brut et une partie HTML. Les fournisseurs de boîtes aux lettres aiment voir les deux. La bonne nouvelle est que les ESP gèrent tout cela pour vous. Ce n'est probablement pas une chose à laquelle vous devez penser sauf si vous essayez de faire quelque chose de plus avancé avec le courrier électronique..

Si vous êtes curieux de voir à quoi ça ressemble, dans Gmail, cliquez sur Voir l'original (ou Montrer l'original) et il vous montrera comment la saucisse est faite. Il est très compliqué de combiner tous ces éléments, ce qui est une autre bonne raison d’utiliser un ESP qui le fait pour vous..

Tableaux et CSS en ligne

Lors du codage de courrier électronique HTML, il est (toujours) recommandé d’utiliser des tableaux (

), rangées de table () et des cellules de table (

). De nombreux clients de messagerie ont de mieux en mieux à prendre en charge le HTML et les CSS modernes, mais vous risquez de les perdre dans certains clients de messagerie.. Il existe de nombreux clients de messagerie. Litmus, un outil de test de courrier électronique, prend actuellement en charge plus de 90 clients des ordinateurs de bureau, Web et mobiles. Ces clients de messagerie utilisent tous des moteurs de rendu différents. Certains utilisent Webkit, certains Internet Explorer, certains Microsoft Word. Et ils ajoutent tous leur propre style de styles et de classes à ce que vous fournissez.. Dans cet esprit, il est conseillé de jouer prudemment et de respecter certaines règles lors du codage de courrier électronique.. Utilisation au lieu de Utiliser des couleurs hexadécimales complètes # ff6600 au lieu de sténographie # f60 Utilisation rembourrage au lieu de marge Utilisation Couleur de fond au lieu de Contexte Utiliser du CSS intégré au lieu du CSS intégré S'en tenir à des polices système et Web sûres Ajouter role = "presentation" à chaque table afin qu'il soit clair pour les lecteurs d'écran que la table est utilisée pour la mise en page Utilisez des balises HTML sémantique, telles que et , le cas échéant Par exemple, voici comment je code généralement des boutons pour un courrier électronique HTML, en utilisant une table externe pour l’alignement et une table interne pour la forme du bouton.. C'est une jolie solution pare-balles: L'écriture de CSS en ligne peut être monotone, sans parler de la difficulté à la maintenir et de la mettre à l'échelle, en particulier pour les grandes équipes. C'est là que vous souhaitez utiliser un inliner CSS ou un ensemble d'outils d'automatisation pour vous aider à construire et à intégrer vos modèles. Les frameworks tels que MJML et Inky offrent aux développeurs un langage de gabarit plus convivial à utiliser.. InkyMJML Remarque: vous pouvez Utilisez des requêtes multimédias et des instructions conditionnelles pour cibler certains clients. Avec eux, vous pouvez avoir des présentations spéciales pour Outlook ou utiliser des polices Web dans les clients Webkit. Découvrez ce modèle de courrier électronique réactif open source simple pour vous lancer ou en savoir plus sur ces techniques de codage de modèles de courrier électronique HTML plus avancés.. Ai-je vraiment besoin d'utiliser des tableaux et des CSS en ligne en 2018?? Ça dépend. Si vous voulez jouer la sécurité et vous assurer que vos courriels sont à l'épreuve des balles, alors oui. Si vous avez une bonne idée de vos destinataires et que vous savez qu'ils utilisent des clients de messagerie prenant en charge le CSS intégré et le modèle de boîte, alors peut-être que non. Vous pouvez certainement prendre le risque et ce n'est peut-être pas un problème. Personnellement, je m'en tiens à de vieilles habitudes et utilise des tableaux et des CSS en ligne, mais beaucoup d'autres commencent à expérimenter l'option «pas de ligne».. Images, GIF, Vidéo et Média Certains clients (notamment Outlook) bloquent par défaut le rendu des images, ce qui oblige les destinataires à choisir de voir vos images. Dans cet esprit, donnez toujours à vos images du texte ALT significatif. Vous souhaiterez fournir des images de haute qualité pour les écrans Retina (par exemple, un iPhone). Par conséquent, vos images doivent avoir au moins 2 fois les dimensions que vous souhaitez afficher. Dans cet esprit, donnez toujours à votre image une largeur attribuer pour arrêter le débordement sur certains clients. Les GIF animés sont pris en charge par la plupart des clients. La vidéo est prise en charge sur iOS, Apple Mail et Outlook.com. Vous pouvez également expérimenter avec des émoticônes dans vos lignes d'objet pour attirer l'attention des destinataires Compressez vos ressources multimédias et chargez-les sur un réseau de distribution de contenu (CDN), tel qu'Amazon Web Services, Cloudinary ou imgix. Beaucoup de ESP vont gérer cela pour vous. tl; dr Et nous avons fini! Résumons: L'envoi d'e-mails ne se limite pas à l'œil. Utilisez un service d'API convivial pour les développeurs pour gérer le courrier électronique pour vous. Configurez SPF, DKIM et DMARC pour votre domaine d'envoi. Si vous envoyez beaucoup d'e-mails, payez pour une adresse IP dédiée plutôt que d'utiliser une adresse IP partagée. Envoyer des e-mails en texte brut et HTML. Utilisez des tableaux et insérez votre CSS pour qu'ils ne tombent pas en morceaux entre les clients de messagerie.. N'oubliez pas de tester vos emails sur des clients de messagerie et sur plusieurs appareils. Ressources de messagerie pour les développeurs E-mail Design Inspiration de Really Good Emails Modèles de courrier électronique pour les startups et les développeurs Fondation pour les modèles de messagerie Cadre de modélisation MJML CSS dans l'assistance par courrier électronique par le moniteur de campagne Système de conception de courrier électronique pour Sketch Moniteur DMARC par la poste Comment envoyer un courriel transactionnel avec Ruby on Rails Comment envoyer un email transactionnel avec PHP Comment envoyer un email transactionnel avec Node.js Création de sites web Tout ce que vous pourriez vouloir savoir sur les déclarations d'importation * Tout sauf la caméra un équipement de photographie de nuit plus essentiel ×