Die Werkzeuge eines HTML-E-Mail-Workflows

Die ShopTalk Show letzter Woche drehte sich alles um HTML-E-Mails. Es ist ein so faszinierendes Thema, denn technisch gesehen ist es *Frontend-Webentwicklung*, aber es fühlt sich fast wie ein bizarr verdrehtes Paralleluniversum an.

Wir haben Dutzende von Browsern zu berücksichtigen, sie haben Hunderte von Clients zu berücksichtigen. Wir machen uns Sorgen, ob schicke neue APIs unterstützt werden, sie machen sich Sorgen, ob Padding unterstützt wird. Wir haben Grid-Layout, sie haben.... Grid-Layout?!

Es ist verlockend, den Witz zu machen: „Es ist Codierung wie im Jahr 1999!“, aber wie wir in dieser Folge besprechen, stimmt das nicht wirklich.

Abgesehen davon ist eine weitere Sache, die ich faszinierend finde, all die involvierten Werkzeuge. Lass mich das mal durchdenken.

Erstellungswerkzeuge: Bare Metal

Sie können eine E-Mail nur mit HTML erstellen. Ich bin sicher, dass eine ganze Menge HTML-E-Mails auf diese Weise erstellt werden. Editor öffnen, HTML-E-Mail erstellen, HTML-E-Mail senden. Ich weiß, dass ich dazu verleitet werde und oft diesen Weg gehe, besonders wenn ich eine wichtige einmalige E-Mail erstelle.

Schauen Sie sich Really Good Emails auf CodePen an, wo sie viele vollständige HTML-Codes von gesendeten E-Mail-Kampagnen archiviert haben.

Das Builder-Tool in Litmus ist ebenfalls ein Bare-Metal-Editor. Sie sehen und bearbeiten das gesamte HTML-Dokument.

Erstellungswerkzeuge: HTML-Vorlagen

Es ist immer noch manuelle und handgeschriebene HTML-Erstellung, aber Sie können auf HTML-E-Mail-Vorlagen zurückgreifen. Dies ist wahrscheinlich ein sehr guter Weg für die meisten von uns, da HTML-E-Mails schwierig richtig hinzubekommen sind. Glücklicherweise wurde bereits viel von der mühsamen Arbeit erledigt, schöne und einfache E-Mail-Vorlagen mit funktionalem Layout und Typografie zu entwickeln.

• Lee Monroe bietet eine Really Simple Responsive HTML Email Template und verkauft ein Paket mit weiteren Vorlagen.
• Cerberus: „Einige einfache, aber solide Muster für responsive HTML-E-Mails.“
• MailChimp hat Email Blueprints auf GitHub. Sie wurden jedoch seit 3 Jahren nicht mehr angefasst, und ich bin mir nicht sicher, ob das bedeutet, dass sie neue/große/wichtige Techniken in der HTML-E-Mail-Entwicklung verpassen oder nicht.
• TABLE TR TD hat eine Build-Vorlage.
• Wenn Sie Ihre E-Mail gegen eine Gebühr bei 99 designs einreichen, sieht es so aus, als würden sie Ihnen einige zusenden.

Erstellungswerkzeuge: Abstrakte Vorlagen

Das Erstellen einer E-Mail durch direkte Arbeit mit einem großen, komplizierten HTML-Dokument ist zwar möglich, aber Front-End-Entwickler arbeiten selten so. Eine der ersten Abstraktionen, zu denen wir immer greifen, ist die Abstraktion von HTML in Teile. Das können Sie auch für E-Mails tun.

• Sie könnten Ihre eigenen serverseitigen Partial-Dateien verwenden, um das HTML in Teile zu zerlegen, sodass Sie beim Erstellen neuer E-Mails diese Teile wiederverwenden können, was die Erstellung beschleunigt und die Wartung erleichtert.
• Dan Denney hat ein System namens eMMail, das Middleman, Haml und Sass verwendet, um E-Mails in handhabbare Teile zu zerlegen.
• Lee Monroe hat einen Grunt Email Design Workflow, der Handlebars/Assemble und Sass verwendet, um E-Mails zusammenzusetzen.
• Foundation Emails verwendet eine abstrakte HTML-Sprache namens Inky, die in für E-Mails geeignetes HTML kompiliert wird.
• MJML ist ebenfalls eine abstrakte HTML-Sprache, die dafür konzipiert ist, zu HTML für E-Mails vorverarbeitet zu werden.

UI-Builder und Versandtools

Anstatt überhaupt Code anzurühren, könnten Sie eine E-Mail direkt über ein dafür entwickeltes Tool entwerfen und schreiben. Diese Optionen sind für die meisten Leute wahrscheinlich ziemlich offensichtlich, da es dafür eine riesige Nachfrage gibt. Zu Recht! Werkzeuge wie diese ermöglichen es Ihnen, sich direkt auf das Schreiben und Entwerfen der E-Mail zu konzentrieren, ohne sich von den Werkzeugen ablenken zu lassen.

• Campaign Monitor
• MailChimp
• AWeber

Es ist nicht immer möglich, solche Tools für alle Ihre versendeten E-Mails zu verwenden. Sie sind in der Regel zu teuer für wirklich riesige E-Mail-Listen und nicht wirklich für transaktionale E-Mails konzipiert.

Diese Tools bündeln tendenziell den visuellen Aufbau der E-Mail mit dem Versand und der Analyse. Alles aus einer Hand.

Sendwithus ist etwas anders. Es ist für transaktionale E-Mails konzipiert und bietet Ihnen ein System zum Erstellen und Vorlagenerstellen von E-Mails, versendet sie aber nicht direkt selbst (trotz des Namens). Sie bringen Ihren eigenen E-Mail-Versanddienst mit. Davon abgesehen...

Versandtools: APIs

Diese Dienste versenden die E-Mail tatsächlich für Sie. Sie rufen deren API mit der E-Mail selbst, der Betreffzeile, den Empfängern und allem anderen, was sie benötigen, auf und die E-Mail wird versendet. Hier ist eine nicht erschöpfende Liste

• SparkPost
• MailGun
• SendGrid
• Mandrill
• Amazon SES
• Postmark

Analyse ist normalerweise eine Funktion, die mit diesen Tools geliefert wird, die den Versand übernehmen. Das gilt sowohl für diese E-Mail-APIs als auch für die Build-and-Send-Apps.

CSS-Inline-Tools

Ich ging immer davon aus, dass dies für HTML-E-Mails absolut zu 100 % erforderlich ist, aber das ist nicht wirklich der Fall. Die meisten E-Mail-Clients unterstützen einen <style>-Block im <head>. Das bedeutet, dass Sie CSS versenden können, ohne es inline setzen zu müssen. Selbst wenn dies unterstützt wird, müssen Sie darüber nachdenken, welche Funktionen unterstützt werden. Nur weil ein Style-Block unterstützt wird, bedeutet das nicht unbedingt, dass border-radius unterstützt wird.

Selbst diese rote Markierung oben ist veraltet, da Gmail jetzt Style-Blöcke unterstützt. Das Inline-Setzen von CSS könnte also letztendlich verschwinden, aber ich stelle mir vor, dass es immer noch einige E-Mail-Clients gibt, die es benötigen, und wenn es ohnehin Teil eines Build-Prozesses ist, schadet es wohl nicht.

Kopieren und Einfügen von In-Browser-Tools

• Premailer
• PutsMail
• MailChimp Inliner
• Campaign Monitor Inliner

Programmatische Tools

• Node: Juice
• Ruby: Roadie

Testwerkzeuge

• Sie könnten sich selbst eine E-Mail senden und sie ansehen. Wahrscheinlich ist es am besten, so viele E-Mail-Clients wie möglich auf verschiedenen Betriebssystemen und Geräten zu starten.
• Litmus ist der größte Akteur in diesem Bereich. Viele andere Tools, die Vorschauen Ihrer E-Mail anbieten, sind tatsächlich Litmus, das diese Arbeit erledigt.
• Email on Acid ist ein ähnliches Tool und etwas günstiger.