Stellen Sie sich vor, Sie entwickeln eine neue Funktion oder Anwendung. Das Ende ist in Sicht. Die komplizierte Infrastruktur, Datenbanken, APIs und Tests sehen gut aus. Dann stellen Sie fest, dass es Schlüsselpunkte im System gibt, an denen Sie „Transaktions-E-Mails“ senden müssen. Passwort zurücksetzen, Willkommens-E-Mails, Quittungen, Rechnungen.

Sie wissen, dass es Dienste und APIs gibt, die Sie verwenden können, um dies für Sie zu erledigen, aber wenn Sie sich mit dem Senden von E-Mails beschäftigen, werden Sie feststellen, dass es schwieriger sein wird, als Sie dachten. Vor allem, wenn Sie die Designs verwenden möchten, die Ihr Designer, Produktmanager oder Marketingmanager gedacht hat.

Dies ist ein allgemeines Szenario. Als Entwickler denken wir selten über Transaktions-E-Mails nach, bevor das Produkt erstellt wurde. Aber das ist in Ordnung, da es eine Reihe von Lösungen gibt, die Ihnen den Rücken kehren. Es ist lange her, seit Sie sich darauf verlassen mussten, Ihre eigene E-Mail-Infrastruktur für das Senden, Empfangen, Abspringen, Abbestellen usw. aufzubauen.

Allerdings gibt es einige wichtige Punkte, die Sie beim Erstellen von HTML-E-Mails, beim Senden von E-Mails und beim Beibehalten eines guten Absender-Reputationswerts beachten müssen. Diese Checkliste hilft Ihnen, sich auf Ihr nächstes Projekt mit Transaktions-E-Mails vorzubereiten. Wir werden abdecken:

1. Was sind Transaktions-E-Mails??
2. Wählen Sie Ihren E-Mail-Dienstanbieter (ESP) aus
3. Ein Leitfaden für Zustellbarkeit und Reputation
   
4. Responsive HTML-E-Mail schreiben
   
5. E-Mail-Ressourcen für Entwickler
   

Hinweis: Dieses Tutorial ist Teil einer ganzen Woche an E-Mail-Inhalten auf Tuts + Web Design. Weitere Informationen finden Sie im Mastering HTML E-Mail-Lernhandbuch!

Was sind Transaktions-E-Mails??

Sie könnten E-Mails kategorisieren, in die Unternehmen und Apps gesendet werden:

• Transaktions-E-Mails
• Marketing-E-Mails

Sie könnten diese weiter in Unterkategorien unterteilen, aber für das, worüber wir hier sprechen, bleiben wir bei diesen beiden.

Marketing-E-Mails werden in der Regel zu Werbezwecken eingesetzt und von Marketing-Teams bearbeitet. Dazu gehören monatliche Newsletter, saisonale Aktionen, Unternehmens- und Produktaktualisierungen, neue Releases usw. Es gibt eine Inhalts- und Lebenszyklusstrategie, wann und wie oft sie gesendet werden.

Transaktions-E-Mails werden durch das Benutzerverhalten ausgelöst und normalerweise von Entwicklern oder Produktteams implementiert. Der Benutzer führt in Ihrer App etwas aus, durch das eine E-Mail gesendet wird. Diese schließen ein:

• Willkommene E-Mails
• Bestätigungs-E-Mails
• Passwort wird zurückgesetzt
• Neue Rechnungen / Quittungen
• usw.

Die meisten dieser E-Mails senden Sie wahrscheinlich selbst. Sie können diese jedoch auch über Drittanbieter-Services versenden, z. B. Stripe für Quittungen, Shopify für E-Commerce.

Die Regeln für Transaktions- und Marketing-E-Mails unterscheiden sich geringfügig. Die GDPR trat am 25. Mai 2018 in Kraft. Jeder, der Marketing-E-Mails sendet, muss die ausdrückliche Erlaubnis der Abonnenten einholen und eine Aufzeichnung dieser Erlaubnis führen. So wie es aussieht, benötigen Sie keine ausdrückliche Erlaubnis, um Transaktions-E-Mails zu senden, z. eine Quittung an jemanden, der gerade etwas in Ihrem Laden gekauft hat. Es hat jedoch Vorteile, wenn Sie sich an die Bestimmungen der DS-GVO halten, unabhängig davon, welche Art von E-Mail Sie versenden.

Wählen Sie Ihren E-Mail-Dienstanbieter (ESP) aus

Es ist durchaus möglich, einen eigenen Mail-Server einzurichten und das Versenden von E-Mails selbst zu verwalten. Wenn Sie sich in einer großen Firma wie Google oder Facebook befinden, haben Sie möglicherweise sogar ein eigenes E-Mail-Infrastruktur-Team, das sich mit der Unterstützung von Transaktionsmail befasst.

Für die meisten von uns empfehle ich nicht, einen eigenen Mail-Server einzurichten und zu warten. Support und Wartung sind mit einem erheblichen Aufwand verbunden. Verwenden Sie stattdessen eines der ESPs da draußen. Sie haben großartige APIs für Entwickler und sind preisgünstig, meistens mit großzügigen kostenlosen Stufen.

SendGridMailgunStempelMailjetSparkPost

Jedes dieser ESPs verfügt über alle Funktionen, die Sie zur Verwaltung von Transaktionsnachrichten benötigen:

• Senden von E-Mails über API oder SMTP.
• Eingehende E-Mails empfangen und analysieren.
• Metriken für gesendete, empfangene, zurückgewiesene, geöffnete und angeklickte E-Mails.
• Abmelden und Unterdrückungslistenverwaltung.
• Reputationsüberwachung.
• Rückkopplungsschleifen-Management.
• DSGVO-Konformität und mehr.

Sobald Sie Ihr ESP ausgewählt haben, können Sie alles einrichten.

Ein Leitfaden für Zustellbarkeit und Reputation

Postfachanbieter (wie Google Mail und Outlook) betrachten eine Kleinigkeit Ruf. Sie möchten einen guten Ruf haben, um sicherzustellen, dass Ihre E-Mails in die Posteingänge der Empfänger gelangen. Wenn Sie einen schlechten Ruf haben, geht Ihre E-Mail entweder an Spam, oder der E-Mail-Anbieter lehnt die E-Mail ab und die Nachricht wird zurückgeschickt.

Nach Angaben von Talos betrug die durchschnittliche tägliche Spam-Menge im Juli 2018 305,95 Milliarden Euro. Sie möchten nicht, dass Ihre Post in diesen Eimer fällt.

Durchschnittliches tägliches Spam-Volumen

Dinge, die zu einem schlechten Ruf beitragen können:

• Empfänger, die Ihre E-Mail als Spam kennzeichnen.
• Empfänger öffnen Ihre E-Mail nicht oder greifen nicht auf sie ein.
• Sie senden zu viele E-Mails.
• Sie senden E-Mails von einer IP-Adresse mit schlechter Punktzahl.
• Sie haben DKIM, SPF und DMARC nicht eingerichtet.
• Der Inhalt, den Sie senden, sieht wie Spam aus.

Die drei wichtigsten Authentifizierungsmethoden, die Sie berücksichtigen müssen, sind SPF (Sender Policy Framework), DKIM (DomainKeys Identified Mail) und DMARC (domänenbasierte Nachrichtenauthentifizierung, Berichterstellung und Konformität)..

Mit SPF können Postfachanbieter authentifizieren, dass die E-Mail tatsächlich von Ihrer Domäne stammt. Es ist ein TXT-DNS-Eintrag, den Sie über Ihre DNS-Verwaltung hinzufügen müssen.

domain.com. TXT "v = spf1 include: domain ~ all"

DKIM verwendet öffentliche / private Schlüsselpaare, um jede Nachricht mit einer eindeutigen kryptografischen Signatur zu signieren, mit der E-Mail-Spoofing erkannt werden kann. Wenn Sie auf "Senden" klicken, fügt Ihr ESP eine private Signatur hinzu. In Ihrem DNS befindet sich Ihre öffentliche Signatur, die der Postfachanbieter des Empfängers anruft, um sicherzustellen, dass alles gut aussieht.

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

DMARC ist kein Authentifizierungsprotokoll, sondern ermöglicht Ihnen das Festlegen einer Richtlinie für das Verhalten von Nachrichten, die weder SPF noch DKIM bestehen (Ablehnung oder Quarantäne).

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

Hier ein Beispiel, wie die E-Mail-Authentifizierung zusammenkommt. Dies ist zu stark vereinfacht, gibt Ihnen jedoch eine Vorstellung davon, wie es funktioniert.

E-Mail-Authentifizierung (src: htmlemail.io)

Die Reputation ist sowohl an Ihre sendende Domäne als auch an die von Ihnen verwendete IP-Adresse gebunden. Sie möchten also, dass dies statisch ist. Die Überprüfung Ihrer IP-Adresse ist die einfachste Methode, die ein Postfachanbieter (Google Mail, Outlook, Hotmail, Yahoo, AOL usw.) bei der Überprüfung Ihrer Reputation hat. Wenn Sie mehr als 50.000 E-Mails pro Woche versenden, sollten Sie eine dedizierte IP-Adresse in Betracht ziehen, damit Sie sie nicht mit anderen teilen und Ihnen mehr Isolation bieten. Denken Sie daran, dass Sie IPs "aufwärmen" müssen. Sie sollten nicht gleich damit beginnen, Millionen von E-Mails von einer neuen dedizierten IP-Adresse aus zu senden. Die meisten ESPs bieten diese Funktion an.

Zu beachten ist auch die Verwendung separater IP-Adressen und Subdomains für Ihre Transaktions- und Marketing-E-Mails. Ich habe normalerweise so etwas eingerichtet send.mydomain.com für Marketing und notifications.mydomain.com für Transaktions-E-Mails.

Senden Sie nicht von einer E-Mail-Adresse "no-reply @". Zuallererst sieht es für Ihre Empfänger schlecht aus, da es so aussieht, als ob es Ihnen egal ist und Sie nicht von ihnen hören möchten. Zweitens ist es eine großartig Sache, wenn Empfänger antworten und sich engagieren. Dies ist, was Postfachanbieter sehen möchten.

Verwenden Sie Tools wie SenderScore und SenderBase, um Ihre Reputation zu überwachen.

Responsive HTML-E-Mail schreiben

MIME Multipart

Wenn Sie eine E-Mail senden, besteht sie aus Kopfzeilen und verschiedenen Teilen. Dies wird als Multipurpose Internet Mail Extensions (MIME) bezeichnet. Dadurch werden Nur-Text-, HTML- und / oder andere Teile kombiniert und dem Empfänger-Client überlassen, zu entscheiden, was und wie er angezeigt wird.

• Header enthalten Schlüsselwertpaare, z. B. wer der ursprüngliche Absender war, Betreff, Antwortadresse und eine Reihe anderer interessanter Daten. In Ihrem Körper haben Sie verschiedene "Teile".
• text / plain ist die einfachste Form, um eine E-Mail nur mit Text und ohne Formatierung zu senden.
• Text / HTML ermöglicht HTML. Hier geht Ihre HTML-E-Mail hin.
• text / watch-html ist für Uhren wie die Apple Watch gedacht und hat eine eingeschränkte HTML-Unterstützung.
• text / x-amp-html ist ein neuer Teil, der mit AMP for Email interaktiven Inhalt für Google Mail bereitstellt.

Für die meisten E-Mails senden Sie einen Nur-Text-Teil und einen HTML-Teil. Postfachanbieter sehen beide gerne. Die gute Nachricht ist, dass ESPs dies alles für Sie erledigen. Wahrscheinlich müssen Sie nicht darüber nachdenken, es sei denn, Sie versuchen etwas Fortgeschrittenes mit E-Mail zu tun.

Wenn Sie wissen möchten, wie alles aussieht, klicken Sie in Gmail auf Original anzeigen (oder Original zeigen) und es wird Ihnen zeigen, wie die Wurst hergestellt wird. Das Zusammenstellen dieser Elemente ist ziemlich kompliziert. Dies ist ein weiterer guter Grund, ein ESP einzusetzen, das dies alles für Sie erledigt.

Tabellen und Inline-CSS

Beim Codieren von HTML-E-Mails wird (noch) empfohlen, Tabellen zu verwenden (

), Tabellenzeilen () und Tabellenzellen (

). Viele E-Mail-Clients verbessern die Unterstützung von modernem HTML und CSS, aber Sie riskieren, dass sie bei bestimmten E-Mail-Clients auseinander fallen. Es gibt viele E-Mail-Clients. Derzeit unterstützt Litmus, ein E-Mail-Test-Tool, über 90 Clients für Desktop, Web und Mobile. Diese E-Mail-Clients verwenden alle unterschiedliche Rendering-Engines. Einige verwenden Webkit, einige Internet Explorer, einige Microsoft Word. Und alle fügen ihre eigenen Stile und Klassen hinzu, zusätzlich zu dem, was Sie anbieten. In diesem Sinne ist es ratsam, auf Nummer sicher zu gehen und sich beim Codieren für E-Mail an einige Regeln zu halten. Benutzen anstatt Verwenden Sie volle Hexadezimalfarben # ff6600 anstelle der Abkürzung # f60 Benutzen Polsterung anstatt Spanne Benutzen Hintergrundfarbe anstatt Hintergrund Verwenden Sie inline CSS anstelle von eingebettetem CSS Halten Sie sich an system- und webgeschützte Schriftarten Hinzufügen Rolle = "Präsentation" zu jeder Tabelle, so dass es für Screen-Reader klar ist, dass die Tabelle für das Layout verwendet wird Verwenden Sie semantische HTML-Tags, z und , wo anwendbar Beispielsweise codiere ich normalerweise Tasten für HTML-E-Mails, wobei ich eine äußere Tabelle für die Ausrichtung und eine innere Tabelle für die Tastenform verwende. Es ist eine ziemlich kugelsichere Lösung: Das Inline-Schreiben von CSS kann eintönig sein, ganz zu schweigen von der Wartung und ist insbesondere für große Teams nicht skalierbar. Hier möchten Sie einen CSS-Inliner oder ein Automatisierungs-Toolset verwenden, um Sie beim Erstellen und Inline-Erstellen Ihrer Vorlagen zu unterstützen. Frameworks wie MJML und Inky bieten Entwicklern eine freundliche Schablonensprache, mit der sie arbeiten können. InkyMJML Hinweis: Sie können Verwenden Sie Medienabfragen und bedingte Anweisungen, um bestimmte Clients als Ziel festzulegen. Mit ihnen können Sie spezielle Layouts für Outlook verwenden oder Webfonts in Webkit-Clients verwenden. Sehen Sie sich diese einfache, auf Open Source reagierende E-Mail-Vorlage an, um den Einstieg zu erleichtern, oder erfahren Sie mehr über diese Techniken zum Codieren von erweiterten HTML-E-Mail-Vorlagen. Muss ich wirklich Tabellen und Inline-CSS im Jahr 2018 verwenden?? Es hängt davon ab, ob. Wenn Sie auf Nummer sicher gehen wollen und sicherstellen möchten, dass Ihre E-Mails kugelsicher sind, dann ja. Wenn Sie einen guten Einblick in Ihre Empfänger haben und wissen, dass sie E-Mail-Clients verwenden, die Embedded CSS und das Box-Modell unterstützen, dann vielleicht nicht. Sie können das Risiko definitiv eingehen und es ist möglicherweise kein Problem. Ich persönlich halte mich an alte Gewohnheiten und benutze Tabellen und Inline-CSS, aber viele andere experimentieren mit der Option "keine Inline". Bilder, GIFs, Video & Medien Einige Clients (insbesondere Outlook) blockieren standardmäßig das Bild-Rendering, sodass Empfänger die Anzeige Ihrer Bilder aktivieren müssen. In diesem Sinne geben Sie Ihren Bildern immer einen aussagekräftigen ALT-Text. Sie sollten qualitativ hochwertige Bilder für Retina-Bildschirme (z. B. iPhone) bereitstellen. Daher sollten Ihre Bilder mindestens das Doppelte der Abmessungen haben, in denen sie angezeigt werden sollen. In diesem Sinne, geben Sie Ihrem Bild immer ein Breite Attribut, um das Überlaufen einiger Clients zu verhindern. Animierte GIFs werden in den meisten Clients unterstützt. Video wird von iOS, Apple Mail und Outlook.com unterstützt. Sie können auch mit Emojis in Ihren Betreffzeilen experimentieren, um die Aufmerksamkeit der Empfänger zu erlangen 🤯 Komprimieren Sie Ihre Medienassets und laden Sie sie in ein Content Delivery Network (CDN) wie Amazon Web Services, Cloudinary oder imgix hoch. Viele ESPs werden das für Sie erledigen. tl; dr Und wir sind fertig! Lassen Sie uns rekapitulieren: Das Versenden von E-Mails hat mehr zu bieten, als auf den ersten Blick erscheint. Verwenden Sie einen entwicklerfreundlichen API-Dienst, um E-Mails für Sie zu verwalten. Richten Sie SPF, DKIM und DMARC für Ihre sendende Domäne ein. Wenn Sie viel E-Mail senden, zahlen Sie lieber für eine dedizierte IP-Adresse als für eine gemeinsame IP-Adresse. Senden Sie Text und HTML-E-Mails. Verwenden Sie Tabellen und Inline-CSS, damit sie nicht von E-Mail-Clients getrennt werden. Denken Sie daran, Ihre E-Mails auf E-Mail-Clients und geräteübergreifend zu testen. E-Mail-Ressourcen für Entwickler E-Mail-Design-Inspiration durch wirklich gute E-Mails E-Mail-Vorlagen für Startups und Entwickler Grundlage für E-Mail-Vorlagen MJML-Template-Framework CSS im E-Mail-Support von Campaign Monitor Email Design System für Sketch DMARC-Monitor nach Poststempel Senden einer Transaktions-E-Mail mit Ruby on Rails So senden Sie eine Transaktions-E-Mail mit PHP So senden Sie eine Transaktions-E-Mail mit Node.js Web-Design Alles, was Sie möglicherweise über Importanweisungen wissen möchten * Alles außer der Kamera Wesentlichere Ausrüstung für Nachtaufnahmen ×