Responsive E-Mail-Vorlagen für Ihre kreativen Ideen

Der Wettbewerb ist nun beendet. Vielen Dank an alle, die teilgenommen haben.

Wir haben in den letzten Wochen eine Vielzahl neuer Funktionen eingeführt, und mit unseren neuen E-Mail-Vorlagen geht es nahtlos weiter. Mit dieser neuesten Funktion können Sie Ihre E-Mail-Vorlagen direkt in Mailgun hinzufügen, bearbeiten und speichern. So müssen Sie beim nächsten Mal nicht erst im Code wühlen, um eine kleine Änderung vorzunehmen. Und sie ist ab sofort verfügbar in unserer neuen UI.

Die Möglichkeit, nach der Bearbeitung zu älteren Vorlagenversionen zurückzukehren, die einfache Zusammenarbeit zwischen verschiedenen Teams im Unternehmen, vereinfachte API-Aufrufe und Live-Rendering sind nur einige Beispiele dafür, wie die neue E-Mail-Vorlagen-Funktion Ihnen die Arbeit erleichtert. Doch diese Funktion gäbe es nicht, wenn wir uns nicht zuerst diese Frage gestellt hätten:

In den meisten Fällen erstellt ein Unternehmen einige E-Mail-Vorlagen für verschiedene Arten von E-Mails. Diese Vorlagen werden dann eine Weile genutzt, wobei gelegentlich das Logo, die Adresse in der Fußzeile oder kleine Designelemente aktualisiert werden.

Dabei gibt es zwei große Herausforderungen. Die anfängliche Erstellung von E-Mail-Vorlagen ist äußerst mühsam. Sie müssen Code schreiben wie im Jahr 1999 und sich mit Tabellen, Inline-CSS, nicht unterstütztem CSS sowie Rückfragen an das Entwicklungsteam herumschlagen – und die Liste lässt sich noch endlos fortsetzen. Und selbst dann können die Eigenheiten verschiedener E-Mail-Clients (ja, wir meinen dich, Outlook) dazu führen, dass die Darstellung fehlerhaft ist.

Blicken wir für einen Moment zurück ins Jahr 2014 – das letzte Mal, als wir eine große Ankündigung zu Vorlagen gemacht haben. Wir haben ein Set aus drei responsiven E-Mail-Vorlagen veröffentlicht, die wir als Open Source über ein GitHub-Repository bereitgestellt haben, in der Hoffnung, die Erstellung einer E-Mail-Vorlage von Grund auf etwas weniger mühsam zu gestalten.

Heute lassen wir diese E-Mail-Vorlagen größtenteils unangetastet, weil sie ihren Zweck erfüllen, beliebt sind und durchaus ansprechend aussehen. Allerdings waren sie schwer zu finden, wenn man nicht bereits davon wusste. Zudem boten sie keine Lösung für die zweite große Herausforderung im Umgang mit E-Mail-Vorlagen, nämlich:

Wie können Sie Ihre E-Mail-Vorlagen im Laufe der Zeit pflegen, aktualisieren und bei Bedarf mit anderen Abteilungen zusammenarbeiten, ohne den gesamten Code durchsuchen zu müssen, um genau das zu finden, was Sie brauchen?

Als wir mit der Entwicklung der neuen UI begannen, wussten wir, dass nun der richtige Zeitpunkt gekommen war, das Vorlagenproblem anzugehen. Wir mussten lediglich ein Repository direkt in Mailgun einrichten, damit Sie jederzeit unkompliziert eine Vorlage aufrufen, wenn Sie eine E-Mail auf Basis dieser Vorlagen versenden möchten. Das erste Problem war damit gelöst.

Konnten wir nun die Bearbeitung bestehender Vorlagen etwas vereinfachen und gleichzeitig noch ein paar neue hinzufügen?

Mailgun verfügte bereits über Vorlagen für einige allgemeine Transaktions-E-Mails, darunter Aktions-E-Mails, E-Mail-Warnungen und Abrechnungs-E-Mails. Obwohl diese bereits die Grundlagen der E-Mails abdeckten, die die meisten Absender verwenden, wollten wir mehr bieten. Das Problem ist nur, dass wir nicht gerade Fachleute für E-Mail-Design sind. Das ist nicht wirklich unser Fachgebiet, und um ehrlich zu sein, sollte man das denjenigen überlassen, die mit Leidenschaft an solchen Designs arbeiten.

Deshalb haben wir uns mit Email Uplers zusammengetan, um pünktlich zum Start unserer neuen UI einige frische Designs bereitzustellen. Sie haben bereits früher auf E-Mail-Barrierefreiheit bei uns mitgewirkt, und wir waren begeistert, als sie sich bereit erklärten, diese neuesten Vorlagen zu entwerfen.

Mit Email Uplers an Bord begannen wir mit der Erstellung von drei neuen Vorlagen: Passwortwiederherstellung, Bestellbestätigung und einer Newsletter-Vorlage.

Außerdem wollte Mailgun zu unserer eigenen Belustigung unbedingt irgendwie Katzen einbauen. Und so entstanden unsere neuesten Vorlagen.

Die E-Mail zur Passwortwiederherstellung ist zwar technisch gesehen eine Aktions-E-Mail, wird aber von fast jeder App und jedem Unternehmen genutzt. Da Email Uplers eine Vorlage speziell für diesen Zweck entworfen hat, passen Sie nun problemlos ein paar Farben an, fügen Ihr Logo hinzu und voilà – schon lässt sich mit wenigen einfachen Änderungen an der Vorlage eine E-Mail zum Zurücksetzen des Passworts erstellen.

Die Erstellung der Bestellbestätigungs-E-Mail verlief ähnlich wie bei der Vorlage zur Passwortwiederherstellung. Eine Vorlage für Bestellbestätigungen kann als Ableger einer Abrechnungs-E-Mail betrachtet werden. Allerdings müssen Wortwahl und Layout etwas angepasst werden, damit sie eher einer Quittung und Bestellbestätigung entsprechen als einer reinen Rechnung.

Zu guter Letzt hat Email Uplers eine Newsletter-Vorlage für uns entworfen. Mailgun verfügte bisher über keine auf Marketing ausgerichteten Vorlagen, aber es gab bereits reges Interesse in unserer Kundschaft.

Diese Vorlage bietet Ihnen eher ein Karten-Layout, um Blog-Beiträge oder andere Inhalte hervorzuheben. So erstellen Sie im Handumdrehen einen fundierten Newsletter und versenden ganz unkompliziert Ihre ersten Werbe-E-Mails.

Es ist sehr wahrscheinlich, dass Sie Ihre selbst erstellten Vorlagen irgendwann aktualisieren müssen. Das Gute daran ist: Sie aktualisieren diese Vorlagen direkt im Repository, ändern die aktive Version oder erstellen mehrere Versionen für A/B-Tests.

Darüber hinaus bietet Mailgun einige verschiedene API-Aufrufe für Vorlagen, die Sie nutzen können:

• GET um alle vorhandenen Vorlagen einer Domain abzurufen – {{BASE_URL}}/{{mydomain}}/templates
• GET um eine einzelne Vorlage zu verwenden – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}
• GET um alle Versionen einer einzelnen Vorlage abzurufen – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}/versions
• PUT um eine Vorlage zu aktualisieren – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}
• POST um eine Vorlage zu speichern – {{BASE_URL}}/{{mydomain}}/templates
• PUT um eine neue Version zu erstellen – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}

Die HTML-Bearbeitung der Vorlagen ist in der UI sehr einfach. Wenn Sie sich ansehen möchten, wie Ihre Vorlage optisch wirkt, rendern Sie einfach ein Beispiel. Erledigen Sie dies direkt in der UI oder senden Sie sich selbst eine Test-E-Mail, falls Ihnen das lieber ist. Insgesamt bietet diese Lösung eine unkomplizierte Möglichkeit, Vorlagen mühelos zu erstellen.

Bereit, loszulegen?

Autor: Chris Farmer Chris Farmer is a Product Manager at Sinch Mailgun. He's an expert feature mapper, dev communicator, and email officianado who tells it like it is. He writes about product developments, and innovative email tips and tricks.