HTML E-Mails mit Mailchimp, Zurb-Ink und Jade Templates
Vorüberlegung
Sollte ich handgestrickte HTML E-Mail Templates benutzen oder die Vorlagen mit Mailchimp Bordmitteln erzeugen?
Die Wahl fiel aus Unwissenheit und Neugierde auf selbstgestrickt, nur um herauszufinden, daß man sich doch lieber auf die bewährte Forschungsarbeit von MailChimp einlässt.
Wichtig ist in jedem Falle zu wissen welche Inhalte verschickt werden sollen und das man nicht versucht eine 08/15 Lorem Ipsum Blindtext Photoshop Vorlage des Designers umzusetzen, die alle Best-Practise Regeln aus Unwissenheit nicht anwendet.
Handarbeit
Wer HTML Mails verschicken will, die allen Mail Clienten gutgesinnt sind, der begibt sich in die HTML Steinzeit zurück. Tabellen. Verschachtelt. Bis zum letzen. Nichts geht.
Oder nicht alles.
Viele Entwickler haben sich schon die Materie mit Steinkeilen und Feuer untertan gemacht. Herausgekommen sind Frameworks wie Ink, Antwort oder Cerberus. Wie bei Frameworks üblich, sie decken alles ab und passen nicht auf den eigenen Anwendungsfall.
Egal. Ich wählte Zurb's Ink, weil es gut Kritiken bekommen hat, bzw. einige Problemlösungen existierten.
Wie bereits erwähnt begibt man sich in eine verschachtelte Tabellen Hölle, weil floated <div und Co gibt es nicht. Weiterhin muss man bedenken, daß alle CSS Anweisungen einbetten werden müssen, was man niemals per Hand schreiben kann ohne verrückt zu werden.
Dafür gibt es "Online-Inliner" und natürlich Module für alle möglichen Taskrunner.
Mein Plan
... war also Grunt zu bemühen und mit einem riesen Vorbereitungsaufwand mir die ganze Sache zu erleichtern. An E-Mail-Boilerplate & Co hab ich mich nicht rangetraut. Am Ende funktioniert ein Glied in der Kette nicht und ich muss den ganzen Kram wegschmeissen. Also alles Schritt für Schritt selbst installiert.
Hier is also meine package.json
{
"name": "mailing",
"version": "0.0.1",
"description": "html mail workflow",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-jade": "^0.15.0",
"grunt-contrib-less": "^1.0.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-juice-email": "^0.1.3",
"grunt-mailgun": "^0.2.1",
"grunt-nodemailer": "^0.3.0",
"grunt-open": "^0.2.3",
"matchdep": "^0.3.0"
},
"author": "MO",
"license": "ISC",
"private": true
}grunt-contrib-jade
Jade ist eine Template-Engine welche ich schon immer mal ausprobieren wollte und gerade in Anbetracht des bevorstehenden Markup Wahnsinns war dies der richtige Zeitpunkt mit Jade zu starten.
Hier das Beispiel eines Buttons in Zurb Ink, in Jade Template Markup, gerendert als HTML und am Ende mit eingebetteten Styles. B und C per Hand zu schreiben - No Way.
Hier ist dann ein Minimal Template. Schon einiger Schreibaufwand aber immernoch weniger als reines HTML - trotz Codevervollständigung oder Emmet! Der Punkt ist nämlich das leichtere verschieben von Codeblöcken. Das ist in reinem HTML ein einziger Krampf.
grunt-contrib-less
Wenn ich das HTML erzeugen lasse, kann ich auch gleich LESS fürs CSS verwenden. Zum Glück gab es einen inoffiziellen Zurb Ink Port und das machte sich besonders gut, da es eine Variable für die Gesamtbreite gibt.
grunt-juice-email
Juice ist ein HTML Prozessor, der CSS ins HTML Markup einbettet. Seitens Zurb wird Premailer empfohlen und verwendet, aber das basiert auf Ruby und irgendwie ist das installieren von extra interpretern wie Python, Ruby, Java etc ein Krampf. Soviele Abhängigkeiten. Auf dem Mac ist es anderes. Das kommt schon mit Ruby glaub ich.
Jedenfalls der grunt-juice-email wrapper inkludiert die *.css Dateien in <style> Blöcke und presst das gesamt CSS gleichzeitig ins Markup, damit nichts mehr schiefgehen kann.
grunt-mail-gun
Gut gemeint, nervt aber, weil man ewig auf die E-Mail wartet. Über die Mailgun API können Mails verschickt werden und das ganze automatisiert man mit Grunt. Aber wie gesagt, dauert zu lange, deshalb
grunt-nodemailer
... weil da kann man einen eigenen SMTP Server eintragen und sich die Test-Mails im Null Komma nix zu schicken.
Mailchimp Import
Nachdem ich das nun alles am Laufen hatte und schönen HTML Markup-Salat in einer einzigen HTML Datei herausbekam, ging es daran, das Ganze ins Mailchimp zu importieren.
Mit der Mailchimp Template Sprache wurden die bearbeitbaren Bereiche markiert und eine Testkampagne erstellt. Da hat sich gleich die Limitierung des Unterfangens gezeigt. Während Mailchimp Bordmittel-Templates mit allerlei Inhaltstypen und Einstellungen aufwartet, sind die selbsterstellten Templates sehr limitiert und beschränkt sich auf etwas Textänderungen und Bilder austauschen. Desweiteren war ich frustriert weil das Einfügen von Bildern in unterschiedlichen Abmessungen, nicht so Auto-magic wie im Nativen MC von Statten ging und immer zerschossene E-Mails zur Folge hatte.
Zurückrudern
Auch wenn es nett war, mich mit Jade und Grunt etwas mehr zu beschäftigen und zu lernen, musste ich einsehen, das ich ein ähnliches Template auch mit den MC eigenen Ressourcen erzeugen kann, welches robuster ist und funktioniert, im Gegensatz zum selbstgestrickten.
Fazit
Das Grunt-Setup behalte ich erstmal, vielleicht brauch ich es einmal wieder. Aber ich glaube fast nicht. Normal HTML Vorlagen würde ich vermutlich nicht damit schreiben. Vielleicht Prototypen? Oder andere HTML-E-Mail Vorlagen. Aber für Mailchimp würd ich nix eigenes empfehlen. Zuviel Aufwand für weniger Komfort! Und HTML-Mails muss man nicht neu erfinden, die müssen nur gescheit angezeigt werden und fertig.
Gist mit allen wichtigen Dateien (funktioniert bestimmt nicht... wie das bei so hingerotzen blog zeug eben so ist)
