Anzeige
Anzeige
News
Artikel merken

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

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.

Von Jonathan Schneider
2 Min. Lesezeit
Anzeige
Anzeige
E-Mail-Templates mit dem richtigen Boilerplate umsetzen. (Bild: Shutterstock)

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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)

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
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
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
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
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

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige