Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

E-Mail-Template entwickeln: So öffnest du das Buch mit den sieben Siegeln

E-Mail-Templates mit dem richtigen Boilerplate umsetzen. (Bild: Shutterstock)

Was gibt es Schlimmeres, als für ältere Browser eine moderne Webseite umzusetzen? Richtig, die Programmierung von einem modernen E-Mail-Template. Jeder Programmierer, der diese Aufgabe bereits bewältigt hat, weiß, was für ein Graus das sein kann. Damit es das nächste Mal besser fluppt, schauen wir uns jetzt ein E-Mail-Boilerplate an, das euch die Arbeit erleichtert.

E-Mail-Templates sind nicht nur schwer zu entwickeln, sondern auch bereits im Workflow schwer umzusetzen. Webseiten können direkt aufgerufen werden und sind mit unzähligen tollen Entwickler-Tools schnell auf Fehler überprüft. E-Mail-Templates hingegen müssen erst an verschiedene Systeme und Clients verschickt werden, um diese testen zu können. Taucht jetzt ein Fehler auf, wird es zeitintensiv.

Die Schwierigkeit von einem E-Mail-Template

Die Programmierung eines E-Mail-Templates muss oft mit veralteten HTML-Standards umgesetzt werden. Es gibt eine Vielzahl an unterschiedlichen E-Mail-Clients, die jeweils meist den gleichen HTML-Code unterschiedlich interpretieren können. Zudem muss das E-Mail-Template inhaltlich auch offline funktionieren.

Webseiten hingegen können gute Fallbacks und Polyfills beinhalten oder veraltete Browser direkt ausschließen. Insgesamt gibt es viel mehr Möglichkeiten, um im Bereich der Webseiten-Entwicklung besser auf ältere Browser zu reagieren. Die Anzahl der unterstützten Browser ist meist an einer Hand abzählbar. E-Mail-Clients leider nicht: diese müssen mit weniger guten Fallbacks auskommen, arbeiten mit veralteten HTML-Standards und sollen sich zugleich auf dem gleichen visuellen Level wie moderne Webseiten befinden.

Das dies nicht immer gut geht und es sehr viel Recherche und Mühen kostet, mit HTML-Tables und Inline-Styles ein hübsches Template zu erstellen, wird jedem klar sein.

Das E-Mail-Template einmal unter der Lupe

Das E-Mail-Template: Fluid. (Bild: Cerberus)
Das E-Mail-Template: Fluid. (Bild: Cerberus)

Die E-Mail-Vorlage von Cerberus soll diesen Prozess vereinfachen und bietet bereits getestete Best-Practice-Lösungen an. Diese sind teilweise responsive beziehungsweise fluid und arbeiten grundsätzlich mit einem Table-Layout und Inline-Styles. Diese Templates oder auch Vorlagen dienen als Grundgerüst für die Umsetzung eines E-Mail-Templates und unterstützen den Programmierer mit bereits hinterlegten Conditional-Comments und einer fertigen Struktur. Insgesamt gibt es drei unterschiedliche Vorlagen.

Fluid-Template: Das Fluid-Template ist für einfache E-Mail-Templates gedacht. Da es mit Prozentwerten arbeitet, werden alle Elemente auf kleineren Screens prozentual kleiner. Es funktioniert auf Apple, Android und Outlook und ist schnell und einfach zu erstellen. Demo

Responsive-Template: Das Responsive-Template hat bereits Media-Queries integriert und ist für aufwendigere E-Mails gedacht. Da natürlich Media-Queries nur in modernen Clients unterstützt werden, gibt es auch wieder teilweise Fallbacks. Vollständig funktioniert es nur auf einem Apple-Client. Demo

Hybrid-Template: Das Hybrid-Template ist wohl die aufwendigste Vorlage. Es arbeitet wieder mit Media-Queries aber auch mit max-width und min-width. Somit fallen zum Beispiel auch die Outlook- und Android-Clients nicht raus und zeigen die Mails vernünftig an. Eine Kombination aus Fluid und Responsive. Demo

Aktuell unterstützt das Boilerplate folgende E-Mail-Clients (abhängig von dem Template): Desktop: Outlook 2000/02/03/07/10/13 (Windows), Outlook 2011/16 (Mac), Apple Mail, Thunderbird Web: Gmail, Outlook.com, Yahoo, Aol, Outlook Web Access Mobile: Mail (iOS), Gmail (iOS, Android 4.4), Mail (Android 4.4), Mailbox (iOS), Inbox (iOS), Yahoo (iOS)

Zusätzlich sollte aber erwähnt werden, dass es keine Gewährleistung für eine pixelgenaue oder perfekte Ausgabe gibt. Auch bei den oben genannten Clients kann es immer zu leichten Abweichungen kommen. E-Mail-Templates werden auch durch ein solches Boilerplates niemals perfekt auf allen Endgeräten umgesetzt werden können. Hierbei geht es eher um eine Möglichkeit, E-Mail-Templates schnell zu entwickeln und bereits auf Learnings zurückgreifen zu können. Wer das Projekt spannend findet, kann natürlich auf GitHub dem Projekt auch folgen oder seine Ideen mit einbringen.

Programmiert ihr auch E-Mail-Templates und benutzt ihr lieber einen Drag&Drop-Builder wie zum Beispiel Mailchimp?

Bitte beachte unsere Community-Richtlinien

5 Reaktionen
micxer

https://github.com/InterNations/antwort ist auch eine sehr gute Alternative. Es ist komplett Litmus-getestet und schon länger "auf dem Markt".

Antworten
Niels Schwennicke

Ich habe eben das Fluid-Template in Litmus auf 45 Clients getestet und muss sagen es ist solide! Viele andere Baukasten-Templates bestehen den Test NICHT! TIPP: Bei Anpassungen immer aufpassen und testen, testen. testen - Litmus kann ich hier empfehlen.

Antworten
Holger

Hab mir eine Vorlage mit dem Mailchimp Editor erstellt. Geht per Drag&Drop und das Template kann man sich runterladen.
Sieht auf allen Clients Top aus.

Dieses Tool kann ich auch empfehlen https://beefree.io/

Antworten
informatiker

HTML-Mails machen dem Kunden sicher klar dass er Werbung bekommt, wenn
sie nicht vom Spamfilter aussortiert werden. Sie lassen sich in ein
paar Jahren evtl. nicht mehr lesen, die meisten Entwickler bekommen es
nämlich nicht hin sowas Standardkonform zu bauen.

Selbst wenn, wozu? Damit mehr Datenvolumen das verfügbare Freivolumen
des Nutzers aufbraucht? Demit man unter jeder Mail das Firmenlogo
einbetten kann, oder die eigene Nase?

Es gibt ein Datenformat das sich seit knapp 30 Jahren bewährt hat:
ASCII. Seit über 20 Jahren gibt es UTF-8 und Umlaute in Emails sind
auch kein Problem mehr (gut, manche Webshops versauen sogar das).

Ausser dem Kunden auf den Senkel zu gehen, ihn zu nerven, und noch
dazu nicht die Sicherheit zu haben ob's bei ihm so aussieht wie's
soll, gibt es keinen Grund HTML-Mails zu verwenden.

Bei Shops die mir eine HTML-Only Antwort schicken storniere ich
sofort. Bei multipart/alternative beziehe ich mich auf den Plain Text
Teil, der Rest wird nicht angezeigt. Ich frage mich auch ob eine
nicht-standardkonforme HTML-Mail irgendwie verbindlich sein kann?

Was wirklich schön wäre: Zeigt Euren Entwicklern erstmal wie sie tolle
Plain Text Mails verschicken können, das ist zwar deutlicheinfacher
als HTML, aber leide kriegen's einige nicht gebacken.

Grüße
Stefan

Antworten
Heiko

Weder noch. Ich schreibe meine Mails ganz klassisch konservativ als reine Text-Mails. Geht schneller und erspart mir viele Probleme mit irgendwelche Exoten-Clients, die das HTML kaputt darstellen ;-)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst