Tipps für die Erstellung von HTML-E-Mails und Workflows
Gestern haben wir ein Google Hangout mit unserem Lead Digital Product Designer, Lee Munroe, veranstaltet. In diesem Hangout beschäftigte sich Lee intensiv mit der Erstellung von HTML-Vorlagen, indem er zunächst einen Blick auf den heutigen Stand von HTML-E-Mails warf.
Wussten Sie schon? E-Mail-Vorlagen sind jetzt Teil unserer API und UI Mehr erfahren.
Gestern haben wir ein Google Hangout veranstaltet. Mit dabei war unser Lead Digital Product Designer, Lee Munroe. In diesem Hangout beschäftigte sich Lee intensiv mit der Erstellung von HTML-Vorlagen, indem er zunächst einen Blick auf den heutigen Stand von HTML-E-Mails warf und anschließend demonstrierte, wie Sie Ihre HTML-Vorlagen mit Tools wie Litmus und Grunt erstellen, entwerfen und automatisieren. Unten finden Sie das Video mit Zeitangaben, einschließlich einer Q&A-Runde. Speichern Sie sich Lees Präsentation als Referenz hier. Viel Spaß.
(2:00) Einführung und Agenda
Warum hat Lee einen Akzent? Nun, weil er aus Belfast in Nordirland stammt. Es gibt drei bemerkenswerte Dinge, die Belfast berühmt machen: 1) Dort wurde die Titanic gebaut, 2) das Europa, das angeblich am häufigsten bombardierte Hotel Europas, befindet sich in Belfast und hat schon viele Politiker beherbergt, darunter Bill Clinton in den 90er Jahren, und 3) dort werden viele Szenen für Game of Thrones gedreht.
Kommen wir zum eigentlichen Grund, warum Sie an diesem Hangout teilnehmen. Lee ist vor allem für seine Arbeit in den Bereichen Nutzererlebnis und Design bekannt. Kürzlich hat er eine Reihe von E-Mail-Vorlagen und einen Workflow als Open Source veröffentlicht, um Ihnen das Leben zu erleichtern; Sie können hier darauf zugreifen.
(4:40) Stand der HTML-E-Mails im Jahr 2015
Als Lee bei Mailgun anfing, bestanden alle E-Mails aus reinen Text-E-Mails. Eines seiner ersten Projekte war also die Erstellung von HTML-E-Mails. Er begann, Litmus zu verwenden, um E-Mails in allen E-Mail-Clients zu testen. Die Regeln und das Rendering unterscheiden sich je nach Client.
(10:50) Lösungen für die Erstellung von HTML-E-Mails
Wo fangen wir bei all den Hürden und Hindernissen an, wenn HTML-E-Mails in verschiedenen Clients funktionieren sollen? 1) HTML-Tabellen verwenden 2) Inline-CSS 3) Outlook mit bedingten Anweisungen ansprechen 4) Webkit und kleinere Geräte mit Medienabfragen ansprechen. Lee behandelt das sogenannte „Progressive Enhancement“, das eine Basis bietet, die für alle funktioniert, sowie ein erweitertes Erlebnis für Clients, die dies unterstützen.
(17:55) Workflow und ein System
Die meisten Softwareunternehmen versenden nicht nur eine einzige E-Mail, sondern unzählige E-Mails über verschiedene Plattformen hinweg. Das manuelle Coding jeder einzelnen E-Mail ist keine skalierbare Lösung. Behandeln Sie Ihre E-Mail wie eine Website: Module statt Seiten. Zu den empfohlenen Generatoren für statische Websites gehören Jekyll, Middleman und Assemble. Testen Sie abschließend mit Litmus.
(21:20) Automatisierung (verwenden Sie etwas wie Grunt)
Sobald Ihre HTML-E-Mails eingerichtet sind, sollten Sie den Prozess automatisieren. Task-Runner wie Grunt können all diese Aufgaben für uns übernehmen. Fügen Sie Ihrer Grunt-Datei eine Reihe von Plugins hinzu, beispielsweise für das Hosting von Bildern auf einem CDN wie Rackspace Cloud Files oder Amazon CloudFront. Stellen Sie sicher, dass Sie Vorlagen in Ihre Codebasis übernehmen.
(24:05) Demo
(26:55) Abschließende Gedanken – responsive E-Mails, Gmail-Aktionen, Preheader-Text
Medienabfragen funktionieren beispielsweise bei Gmail nicht. Nicole Merlin bietet hier ein großartiges Tutorial für responsive E-Mails: j.mp/responsive-email-tut
In Gmail kann der CTA direkt in der Betreffzeile stehen, sodass Nutzer die E-Mail nicht öffnen müssen, um das Thema zu sehen. Lesen Sie hier mehr: developers.google.com/gmail/markup
Der Preheader-Text, auch Vorschau-Text genannt, ist eine zusätzliche Beschreibung in der Betreffzeile. Fügen Sie eine versteckte Inhaltszeile hinzu, die Nutzer beim Öffnen der E-Mail nicht sehen.
Wenn Sie Litmus zum Testen Ihrer E-Mails nutzen möchten, verwenden Sie unbedingt litmus.com/lp/mailgun um den Service einen Monat lang kostenlos zu testen.
(33:20)
Q&A
Bietet Grunt Support für GetResponse?
Das hängt davon ab, was Sie unter „Support“ verstehen. Kommunizieren Sie über Grunt.js und das grunt-http-Plugin mit der API von GetResponse.
Funktionieren Medienabfragen in der Webversion von Office 365?
Ich glaube nicht. Das Rendering von Office 365 orientiert sich stark an dem von Outlook.com, das keinen Support für Medienabfragen bietet.
Werden Preheader nur in Gmail unterstützt?
Preheader-Text, auch Vorschau-Text genannt, wird in Gmail, AOL, Yahoo, Apple Mail, Outlook 2013 sowie in nativen iOS- und Android-Apps unterstützt.
Wie wird die Vorlage an Mailgun übermittelt?
Die API von Mailgun erfordert einen HTML-Parameter, Sie senden also die vollständige HTML-E-Mail. Mailgun selbst speichert keine Vorlagen. Wie Sie die E-Mail an unsere API senden, hängt davon ab, wie Sie Ihre Anwendung eingerichtet haben. Eine Ruby-on-Rails-Anwendung wäre beispielsweise etwas anders eingerichtet als eine Python-Anwendung. Wenn Sie den komplett demonstrierten Grunt-Workflow nutzen möchten, könnten Sie das Gruntfile in Ihre Codebasis einbetten und als Teil Ihres Build-Systems ausführen. Alternativ können Sie den Grunt-Workflow auch separat halten und die Vorlagen an anderer Stelle speichern. Sendwithus ist ein großartiger Service zum Speichern Ihrer E-Mail-Vorlagen, bei dem Sie weiterhin die API von Mailgun für den Versand nutzen können.
