Templates zur Gestaltung von Transactional-HTML- E-Mails
Kommentare

Der Versand von E-Mails ist Bestandteil der täglichen Arbeit, sei es im beruflichen oder privaten Umfeld. HTML-E-Mails zu stylen stellt Entwickler jedoch immer wieder vor Probleme, denn zahlreiche Aspekte

Der Versand von E-Mails ist Bestandteil der täglichen Arbeit, sei es im beruflichen oder privaten Umfeld. HTML-E-Mails zu stylen stellt Entwickler jedoch immer wieder vor Probleme, denn zahlreiche Aspekte müssen dabei bedacht werden. Neben Tabellen sind dies vor allem inline CSS, Desktop-Clients, Web-Clients, mobile Clients, unterschiedliche Geräte und unterschiedliche Anbieter. All diese Faktoren müssen auch bei der Gestaltung von Transactional-HTML-E-Mails beachtet und natürlich auch getestet werden. Dies ist für die Entwickler oft nervig und zeitaufwändig, sodass sie häufig anderen Aufgaben den Vorrang geben und das Stylen dieser E-Mails vernachlässigen. Lee Munroe stellt daher Open-Source-Templates für Transactional-E-Mails vor.

Templates für responsive Transactional-HTML-E-Mails

Die verbreitetsten Transactional-E-Mails sind Action-E-Mails, E-Mail-Alerts und Rechnungs-E-Mails. Trotzdem sie so verbreitet sind, ist das Stylen als HTML-E-Mail für viele Entwickler eine unbeliebte Aufgabe.

Munroe hat für die drei genannten E-Mail-Typen den Entwicklern die Arbeit erleichtert und verschiedene Templates entwickelt und in den beliebtesten E-Mail-Clients getestet. Alle Templates erfüllen dabei einen wichtigen Faktor: sie sind responsive.

Schritte zum Versand von HTML-E-Mails

Bevor HTML-E-Mails erfolgreich versandt werden können, sollten einige Schritte erfüllt werden. Zunächst ist es ratsam, das CSS im HTML-Code unterzubringen. Dafür bietet sich die Nutzung eines Tools wie Premailer an, oder man erledigt es mithilfe einer Library, die für die beliebtesten Sprachen existieren. Natürlich ist es auch möglich, das CSS manuell in den HTML-E-Mails unterzubringen.

All das ist in den genannten Templates enthalten. Zudem sind unter anderem auch Media Queries, in den vorgestellten Templates enthalten, um ein responsives Design in den HTML-E-Mails zu erzeugen.

Zum Testen von HTML-E-Mails steht ein Grunt-Task bereit, der sowohl die E-Mail-Layouts verwalten, SCSS erstellen, CSS inlinen und Vorschauen versenden kann.

Responsives Design von HTML-E-Mails für mobile Geräte

Gerade die Darstellung von E-Mails auf mobilen Geräten ist wichtig für die Gestaltung von HTML-E-Mails. Knapp 50 Prozent aller E-Mails werden auf Smartphones oder Tablets geöffnet. Daher müssen sie auch auf kleinen Displays ansprechend dargestellt werden. Die Templates nutzen dafür Media Queries, die allerdings nur in den gängigsten E-Mail-Clients dargestellt werden können.

In jedem Fall helfen die Templates dabei, die Gestaltung von Transactional HTML-E-Mails zu vereinfachen. Es gibt natürlich auch weitere nützliche Tipps, E-Mails möglichst gelungen zu designen.

Aufmacherbild: E-Mail concept – Open Mailbox with Mail on Screen Tablet PC, vector icon isolated on white background von Shutterstock / Urheberrecht: Telnov Oleksii

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -