Ein Beitrag von Christian Eckert und Thomas Dingeldey.

Man kann seine Persönlichkeit noch so sehr schärfen und perfektionieren. Am Ende wirkt man auf jeden Menschen anders. Ein Umstand, mit dem wir uns relativ schnell anfreunden können. Aber liebevoll E-Mail-Templates gestalten, das Mailing mit Inhalt füllen und DSGVO-verträglich verteilen und verschicken – aber dann sieht doch kein Empfänger das gleiche. Das treibt einen regelrecht zur Weißglut, nicht?

Okay, vielleicht sind wir bei dem Thema etwas emotionaler als der Durchschnitt. Aber mal als Hintergrundinformation: Im Grunde steckt der technische Standard für HTML-basierte E-Mails noch in den späten 90ern fest. Gestylt wird per Inline-CSS, Formulare (die Interaktion für Empfänger viel niedrigschwelliger machen würden) gibt es nicht, das Layout wird komplett über „table“-Tags erstellt … die Liste geht weiter. Die Essenz ist, dass gute E-Mail-Templates viel Arbeit machen.

Das macht die Entwicklung eines „Baukastens“ – zur einfachen und schnellen Erstellung verschiedener Mailings – oft zu einer undankbaren Aufgabe. Ursache dafür ist auch, dass viele E-Mail-Clients Angaben unterschiedlich interpretieren oder erst gar nicht beachten. Beispielsweise unterstützen einige Clients keine Media-Queries, die eine andere Darstellung bei niedriger Auflösung erlauben. Wenn jetzt verschiedene Clients verschiedene Angaben brauchen, damit gleicher Inhalt auch überall identisch dargestellt wird, verliert man schnell den Überblick.

Macht auch E-Mail-Templates schöner: Foundation

Wäre die Informationsarchitektur leicht zu durchblicken, ist das für geringe Volumen vielleicht noch leistbar. Jedoch: Soll ohne ein Framework das Aussehen eines Moduls dupliziert werden, muss der CSS-Code immer mit kopiert werden. Das führt zu einer sehr unübersichtlichen Struktur:

<table width="600" cellpadding="0" cellspacing="0" border="0" class="wrapper" 
style="padding: 0; vertical-align: top">  
<tr style="padding: 0; vertical-align: top">  
<td style="font-size: 0; line-height: 1px; padding: 0; text-align: left; 
vertical-align: top; width: 24px"> </td>  
<td style="padding: 0; text-align: left; vertical-align: top">  
<table width="552" cellpadding="0" cellspacing="0" border="0" style="padding: 0; 
vertical-align: top">  
<tr style="padding: 0; vertical-align: top">  
<td align="center" style="padding: 0; text-align: center; vertical-align: top">  
**<p style="Margin-bottom: 0; Margin-top: 0; color: #484848; font-family: Arial, 
sans-serif; font-size: 16px; font-weight: bold; letter-spacing: -0.015em; line-
height: 22px; margin-bottom: 0; margin-top: 0; padding: 0; text-align: 
center">ÄNDERUNG IHRER DATEN</p>  
**</td></tr></table></td>  
<td style="font-size: 0; line-height: 1px; padding: 0; text-align: left; v
ertical-align: top; width: 24px"> </td></tr>  
<tr style="padding: 0; vertical-align: top"><td colspan="3" style="font-size: 
36px; line-height: 36px; padding: 0; text-align: left; vertical-align: top"> 
</td></tr></table>

Hier hilft Foundation for Emails – ein Framework, mit dem sich responsive E-Mail-Templates erstellen lassen. Es erlaubt, alle Style-Angaben in externe Dateien auszulagern und Templates für wiederkehrende Module zu erstellen. Später wird mit einem Übersetzungsprozess die HTML-Datei mit Inline-CSS Angaben erstellt. Das obige Beispiel mit dem „p“-Tag würde dann wie folgt in einem Template aussehen:

<p class="text">Änderung Ihrer Daten</p>

Die Module lassen sich dann in weiteren Templates über ihren Namen einbinden. Eine E-Mail-Vorlage sieht vor ihrer Generierung dann beispielsweise so aus:

layout: Master-Template

subject: E-Mail Betreff


{{> Logo}}
{{> Hero_Image}}
{{> Begruessung }}
{{> Text}}
{{> Abbinder}}
{{> trennlinie}}
{{> Kontakt_Fon_Mail}}
{{> trennlinie}}
{{> Awards }}
{{> Footer_Pflichtangaben}}
{{> Footer_Sternchentext}}

E-Mail-Templates nicht mehr ohne Foundation

Die eingesetzte Technik basiert auf dem NodeJS Server und dessen Paketen. Die Umgebung ist auf dem aktuellen Stand der Technik und ermöglicht das Aufteilen der Templates in die beschriebenen Strukturen. Macht Foundation das Erstellen und Verwalten von E-Mail-Templates um ein vielfaches einfacher und ermöglicht damit eine verlässlichere und qualitativ hochwertigere Kommunikation mit ihren Kunden? Ja. Ist es eine Wunderwaffe gegen alle Seniorenkrankheiten der Mail-Clients? Nein.

Auch ein Framework deckt nicht jeden Bereich einer Technologie ab. Es ist seinem Namen entsprechend ein Gerüst, das den Weg zum Erfolg deutlich erleichtert. Es erlaubt uns, die wichtigen Dinge in Angriff zu nehmen. Zusätzliche Features wie zum Beispiel die Unterstützung von Mehrsprachigkeit können wir dann selbst entwickeln und Foundation somit optimal an die Bedürfnisse unserer Kunden anpassen. Die Zeit und damit auch das Geld würde eventuell fehlen, wenn die E-Mail-Templates mühsam manuell aufgesetzt und angepasst werden müssten. Wer Foundation also nicht für seine E-Mail-Templates nutzt, verpasst was.

Sie haben Fragen zu Foundation und/oder E-Mail Templates? Schreiben Sie uns gern unter hello@camao.one.

Die Autoren

Mitarbeiter_0052_Christian_Eckert-1
Christian Eckert
Christian bei Xing
Thomas_Dingeldey-1
Thomas Dingeldey
Thomas bei Xing