Werden Sie persönlich – mit der Vorlagensprache von Mailjet

Heute ist ein aufregender Tag bei Mailjet, denn wir schalten eine neue wichtige Funktion für Entwickler frei: unsere ganz eigene Vorlagensprache. Während Passport für Transaktions-E-Mails Ihnen die Möglichkeit gibt, mit Passport erstellte Vorlagen für Ihre Transaktions-E-Mails zu verwenden, was die Zusammenarbeit zwischen ihrem Marketing- und ihrem Entwicklerteam verbessert, können Sie dank unserer Vorlagensparche bei der Personalisierung Ihrer Transaktions-E-Mails noch einen Schritt weiter gehen.

Sie kennen vermutlich bereits die personalisierten Tags, die es Ihnen ermöglichen, Ihre Nutzer mit Namen anzusprechen, nach dem Prinzip „Hallo {{first_name}}“. Jetzt geht dies noch viel besser , indem Sie den Inhalt – einschließlich des Betreffs – und das Layout Ihrer E-Mail entsprechend den Daten Ihrer Nutzer anpassen. Das können jegliche Informationen sein, solange Sie für Sie von Bedeutung sind: Es kann die Geschichte des Kontaktes mit Ihrer Marke sein, die Lieblingsfußballmannschaft oder einfach die bevorzugte Anrede. Das bleibt ganz Ihnen überlassen!

“Wir nutzen auch Mailjet’s Vorlagensprache für alle unsere Transaktions-E-Mails. Es ist viel simpler, leistungsstärker und besitzt eine höhere Zustellbarkeit als unser vorheriges In-House-System. Mailjet’s Drag & Drop E-Mail-Editor ist ein einfach zu benutzendes Tool, mit dem unser Marketing-Team kontinuierlich unsere E-Mail-Vorlagen ausbauen und verbessern kann.“ – Camille Richon, Gründer von Payfacile.

Damit Sie sich besser vorstellen können, was Sie damit alles anstellen können, sehen wir uns ein paar Beispiele an. Wir möchten unserer Community von Beta-Testern herzlich danken, die uns geholfen haben, beliebte Anwendungen zu identifizieren, und es uns ermöglichten, unsere Vorlagensprache entsprechend aufzubauen.

 

Konditionen für um perfekt personalisierte Inhalte

Was bringt es, wenn Sie Ihre Nutzer mit Namen ansprechen, aber ihnen nur allgemeinen Inhalt senden? Unsere Vorlagensprache enthält vordefinierte Variablen (wie Vornamen, E-Mail-Adressen usw. Ihrer Kontakte), aber Sie können auch Ihre eigenen Variablen erstellen und diese in Ihre Vorlage aufnehmen oder sogar in Aussagen verwenden. Das ermöglicht es Ihnen, Konditionen aufzunehmen, was bedeutet, dass Sie in Ihrer Vorlage je nach Status der Kondition unterschiedliche Inhalte drucken können.

Mailjets Vorlagensprache wird sich um dieses komplexe Thema kümmern, sodass Sie es nicht in-house machen müssen.

Looping von gekauften Artikeln bei Rechnungen

Eine bekannte Form von Transaktions-E-Mails ist die Rechnung. Es ist allerdings recht zeitintensiv sie zu implementieren und zu verwalten, da Sie alle Ressourcen wie Bestellnummern von Ihren Servern nehmen und Ihre Vorlage entsprechend vor dem Senden ändern müssen. Trotzdem ist der Grundaufbau einer Rechnung relativ simpel. Viele Informationen kommen wiederholt vor, wie Bestellnummer, Datum und Preis. Mit unserer Vorlagensprache müssen Sie die Anpassung der Vorlage nicht mehr selbst vornehmen, da sie von unserer API automatisch unterstützt wird. Sie brauchen lediglich unsere API mit Ihrer Vorlagen-ID aufzurufen (die Vorlage kann in Passport für Transaktions-E-Mails erstellt und auf den Servern von Mailjet gehostet werden) und, solange Sie Vorlagensprache auf Ihrer Vorlage verwendet haben, passt die API sie für Sie an. So einfach geht das! Schauen Sie sich diese E-Mail Rechnung an:  Fullscreen_25_02_2016__16_46  

Wir sind sicher, dass Sie noch viele weitere Anwendungen finden werden, in denen das Looping Ihre Produktivität erhöht und das Leben leichter macht, zum Beispiel bei einer Liste von Produkten für einen Daily Digest oder um eine Zusammenfassung der verpassten Nachrichten in einer Chat-App.

 

Wie geht es weiter?

Entdecken Sie die vollständige Liste der Elemente und Funktionen, die in der Vorlagensprache verfügbar sind, in unserer Dokumentation. Bei der Kombination sind Ihrer Fantasie keine Grenzen gesetzt! Wir sind gespannt, von allen neuen Möglichkeiten zu hören, die Sie finden, um mit Ihren Nutzern zu interagieren, also teilen Sie Ihre Anwendungen und Implementierungen gern mit uns!

Wir von unserer Seite werden dafür sorgen, dass wir diese um neue Funktionen erweitern, sodass Sie sogar noch mehr mit weniger Code machen können.

Wo wir beim Thema Effizienz sind: Haben Sie sich schon MJML unsere Open-Source-Markup-Language angesehen, die die Erstellung responsiver E-Mails ganz einfach macht? Sie wurde von der Community begeistert aufgenommen (800+ Upvotes in Product Hunt, 2.000+ Sterne auf GitHub) und wir möchten allen ganz herzlich für ihre Unterstützung danken!

Mit Passport, Passport für Transaktions-E-Mails, MJML und unserer brandneuen Vorlagensprache haben Sie alles, was Sie brauchen, um geniale E-Mails zu gestalten!

So erstellen Sie transaktionale E-Mails im Drag & Drop Editor

Haben Sie auch das Gefühl, dass Sie jeden Tag Ihren Posteingang öffnen und Transaktions-E-Mails sehen, denen etwas fehlt? Marketing-E-Mails haben in den letzten 30 Jahren eine spürbare Entwicklung durchgemacht, doch Transaktions-E-Mails hinken dieser Entwicklung noch hinterher. Wir bekommen immer noch unzählige Kaufbestätigungen mit reinem Text, Versandbestätigungen, die auf mobilen Geräten nicht ordentlich dargestellt werden und deren Tracking-Buttons ins Nichts führen, oder Rechnungen, die nicht der Marke entsprechen. Warum ist das so?

Die meisten Transaktions-E-Mails werden aus IT-verwalteten Systemen versendet. Das macht es den Vertriebsmitarbeitern schwer, die E-Mails zu bearbeiten, da es keinen Design-Editor oder eine einfache Art gibt, HTML-Designs hochzuladen.

Im Juni führten wir Passport mit dem Ziel ein, die Erstellung von E-Mail-Marketingkampagnen für jedermann mit nur geringem oder gar keinem Programmieraufwand zu vereinfachen. Die Begeisterung und Unterstützung, die Passport bislang erfahren hat, hat uns echt überwältigt. Auch Ihr Feedback, dass dieser Drag-and-Drop-Editor auch für Transaktions-E-Mails kompatibel sein sollte, haben wir berücksichtigt. Es freut uns, Ihnen heute mitteilen zu können, dass der Tag nun gekommen ist! Ab jetzt können Sie Transaktions-E-Mails in Passport nahtlos bearbeiten und gestalten. Hier sind weitere Details dazu, was Sie erwartet:

 

Eine einheitliche E-Mail-Erfahrung für IT- und Marketing-Teams

Mit der Veröffentlichung von Passport für Transaktions-E-Mails profitieren sowohl Marketing- als auch Technik-Teams von einer zentralen Lösung für die Erstellung all ihrer E-Mail-Vorlagen. Nie war es einfacher, dieselbe(n) Vorlage(n) zu nutzen, um Marketing- und Transaktions-E-Mails zu erstellen. Dadurch wird nicht nur die Markenkonsistenz in allen Nachrichten gewährleistet. Vertriebsmitarbeiter können nun Vorlagen für Transaktions-E-Mails mit wenigen Mausklicks erstellen oder bearbeiten und so Geld für kostspielige IT-Ressourcen sparen.

EN-1-Passport
 

Erstellen Sie Transaktions-E-Mails nicht blind

Die Erstellung von klar gegliederten E-Mails, die auf unterschiedlichen Geräten und in unterschiedlichen E-Mail-Clients richtig dargestellt werden, war lange Zeit eine große Herausforderung. Es gibt viele Regeln zu befolgen – und es dauert ewig, die E-Mails zu programmieren, zu testen und Probleme zu beheben. Mit Passport ist das nun so einfach wie Drag & Drop. Sie können Ihre E-Mail während der Erstellung in Echtzeit visualisieren und sich eine Vorschau anzeigen lassen, wie das Design auf unterschiedlichen Geräten aussieht, bevor es in den Posteingängen der Empfänger landet. Entwerfen Sie bessere E-Mails in kürzerer Zeit – Sie können sogar gemeinsame Vorlagenelemente für Marketing- und Transaktions-E-Mail-Kampagnen verwenden, um Ihre Markenkonsistenz noch weiter zu erhöhen.

EN-2-Test
 

Erstellen Sie kontextbezogene E-Mails

Wem Drag & Drop nicht genug ist, dem gibt Ihnen Mailjets Templating-Language weitere Coding-Option für Fortgeschrittene. Es erlaubt Ihnen einzigartige, relevante E-Mails zu erstellen indem Sie Content-Placeholders sowie erweiterte Strukturen wie Konditionen und Loops benutzen. Sie können Ihr E-Mail-Layout automatisch anpassen, aufbauend auf den Informationen die Sie über Ihren Kunden und vorangegangene Transaktionen besitzen. Somit können Sie mehrere Profile mit einem einzigen Template verwalten. Mailjets Templating-Langue kann angewendet werden, während Sie in Passport nutzen – dazu müssen Sie nur einen Block einsetzen in denen Sie den Code für Ihr E-Mail-Template schreiben.

 

Ein zusätzlicher Marketing-Touch

Transaktions-E-Mails sind die bedeutendsten E-Mails im Posteingang, denn sie werden am Häufigsten geöffnet und gelesen. Wir möchten Ihnen dabei helfen, das Potential Ihrer E-Mail auszuschöpfen, indem Sie das Äußere Ihrer Marketing-E-Mails mit den Inhalten von Transaktions-E-Mails kombinieren. Passport macht es möglich – sei es durch das Einfügen eines Aktionsangebots oder durch die Erinnerung an die wichtigsten Alleinstellungsmerkmale Ihres Unternehmens.

 

EN-3-Marketing
 

Wir sind gespannt, was Sie aus Passport für Transaktions-E-Mails machen werden! Bei weiteren Fragen kontaktieren Sie uns einfach.

Machen Sie bei responsiven E-Mails diese 5 Fehler?

Wenn ich früher eine E-Mail erhielt, die ich nicht richtig lesen konnte, nahm ich immer an, mein Handy sei schuld. Ich versuchte es zu schütteln oder sogar die klassische aber sensationelle Methode des „E-Mail-Schließen-und-wieder-Öffnens“.

Wie viele E-Mails empfangen Sie heutzutage pro Tag? 20, 30, 100? Wenn ich heute eine E-Mail mit einer zweifelhaften Anzeige, zugeschnittenen Bildern oder seltsam ausgerichteten, einem Picasso-Kunstwerk ähnelnden Blöcken erhalte, klicke ich einfach auf „Löschen“. Und da bin ich nicht der Einzige: 80% der Menschen würden eine E-Mail, die auf ihrem mobilen Gerät nicht gut aussieht, löschen.

Deshalb: In einer von Handys beherrschten Welt, in der Personen wie ich die ganze in einen Newsletter oder Kampagnen Mühe unterbewerten und diese einfach ohne den geringsten Skrupel löschen, ist die wichtigste Eigenschaft Responsivität (Anpassungsfähigkeit).

Eine responsive E-Mail zu programmieren kann allerdings irritierend sein und ist sicher auch schwer zu erlernen. Glücklicherweise gibt es Alternativen um das Entwerfen einer anpassungsfähigen Nachricht zu einer intuitiven Aufgabe werden zu lassen. Es gibt eine Reihe von Punkten, auf die man beim Gestalten von responsiven E-Mails achten sollte:

 

1. Die Ausrichtung ist entscheidend

Manchmal, wenn wir eine E-Mail gestalten, entwickeln wir plötzlich künstlerische Fähigkeiten und experimentieren mit mehrspaltiger Aufteilung, tollen Hintergründen, Katzen-GIFs und Bildern, nur um dann beim Öffnen der Nachricht auf einem Tablet oder Smartphone festzustellen, dass die ganze Anstrengung umsonst war.

Die Verwendung einspaltigen Layouts verhindert, dass das Design bei kleiner werdenden Bildschirmgrößen umgestaltet werden muss. Bei mobilen Geräten ist Einfachheit Ihr Verbündeter!

Werfen Sie einen Blick auf diese Layout-Flops, die geradewegs aus unserem eigenen Posteingang kommen!

Aligment

 

2. Das Verhältnis Bild-Text

Bilder (und GIFs) eignen sich hervorragend dazu, lange Textblöcke aufzulockern. Bilder können sich jedoch unter Umständen als zweischneidiges Schwert erweisen. Nicht richtig dargestellte Bilder können auf einigen Geräten zu groß oder zu klein wirken und dadurch Ihren Hintergrund verunstalten oder Ihre Banner unleserlich machen.

Yeezy

 

Achten Sie auch auf zu große und nicht richtig ladende Bilder, wenn Sie Datentarife ohne 4G benutzen. Bearbeiten und optimieren Sie Ihre Bilder für das Web vor dem Hochladen und vergessen Sie nicht den Alt-Text hinzuzufügen.

IMG_2150

 

3. Klare Call-To-Actions

Ohne eine klare Anweisung an Ihre Empfänger wird es schwierig, sie einzuladen, Ihre Website zu besuchen. Hier müssen die Links Ihrer E-Mail-Kampagnen taktisch klug platziert sein.

Deshalb müssen auch Call-To-Actions und Links leicht zu erkennen und auf Ihre Besucher zugeschnitten sein. Größe und Position müssen gut überlegt sein: nicht zu viele, nicht zu nah beieinander.

Gestalten Sie die wesentlichen Beteiligungsaufrufe als Schaltflächen, so dass sie auf Handys und Tablets einfach mit dem Finger angetippt werden können – und wir wissen alle, wie groß manche Finger sind! Versuchen Sie kreativ zu sein und die Links an anderen Stellen zu platzieren, wie zum Beispiel zweitrangige Beteiligungsaufrufe innerhalb des Textes oder Bilder, die sich in einen anklickbaren Link verwandeln.

IMG_2151

 

4. Achten Sie auf den Text

Mehr als die Hälfte aller versendeten E-Mails werden auf einem mobilen Geräten geöffnet, allerdings sind Handys nicht ideal, um lange Texte zu lesen.

Bevor responsive E-Mails zum Standard wurden, stauchte man die für mobile Geräte optimierten E-Mails und Webseiten einfach zusammen, damit sie auf den Bildschirm passten – ohne weitere Änderungen an Layout, Inhalt oder Bilder vorzunehmen. Heute wissen wir um die Wichtigkeit der Optimierung dieser Elemente, damit unsere Nachrichten auf allen Geräten und bei jeder Bildschirmgröße gut aussehen.

Text gehört zu den Dingen, die wir anpassen sollten, um sicherzugehen, dass Leute die unsere Nachrichten unterwegs öffnen nicht odurch kleine Schrift und lange Paragrafen überfordert werden.
.

Und doch gibt es immer noch E-Mails, die eher Romankapiteln ähneln. Seien wir ehrlich: Niemand wird das hier lesen:

IMG_2149

Tipp: Stellen Sie einen Textausschnitt zur Verfügung und laden Sie die Empfänger ein, den vollständigen Artikel in Ihrem Blog zu lesen.

 

5. Hierarchie und Prioritäten

In einem Webbrowser gibt es verschiedene Möglichkeiten, die Aufmerksamkeit der Leser zu wecken: Zum Beispiel durch die Verwendung von Farben,von ins Auge springender Bilder und stilvoller Schriftarten. Aber bei anderen kleineren Bildschirmen, wie beispielsweise Smartphone-Bildschirmen, muss die Hierarchie deutlich sein, damit die Leser ein Gefühl für die Kernaussage bekommen, auch wenn Sie nicht bis nach unten scrollen.

Da Menschen jeden Tag eine Vielzahl von E-Mails erhalten, ist die Konkurrenz groß, und es wird immer schwieriger sie dazu zu bewegen, Ihre E-Mail von vorne bis hinten durchzulesen. Deshalb sollte man eine E-Mail immer in der Reihenfolge der Wichtigkeit gestalten, , wobei die wesentlichen Elemente an den Anfang kommen.

 

Zugabe

Wir haben es fast geschafft: Wir haben eine schöne E-Mail entworfen, sie auf verschiedenen Geräten getestet und sind zum Senden bereit … Nein, warten Sie. Was ist mit den Landingpages?

Auch wenn wir ausgezeichnete Arbeit geleistet und es geschafft haben, unsere Leser zu fesseln, kann unsere Mühe immer noch von einer nicht anpassungsfähigen Landingpage zunichte gemacht werden! Forschungen belegen, dass mobile Geräte zwar eine höhere Öffnungsrate zu verzeichnen haben, die meisten Konversionen jedoch von einem Schreibtisch ausgehen..Machen Sie es Ihren Lesern leicht und sorgen Sie unabhängig vom Endgerät für ein positives Benutzererlebnis!

 

Haben Sie vorher schon einmal einige dieser Methoden ausprobiert? Was sind Ihre Tipps für anpassungsfähige E-Mails? Teilen Sie uns diese in unserem Community Forum mit, so dass wir sie in zukünftige Artikel miteinbeziehen können!

 

E-Mail-Kampagnen: Wo fängt man an – Design oder Text?

Ich habe bereits E-Mail-Kampagnen für verschiedene Firmen geplant und festgestellt, dass jeder etwas anders an die Sache herangeht. Manche Teams geben ihren Textern eine Design-Vorlage und eine Anzahl an Wörtern, an die sie sich halten sollen. Andere beschäftigen sich lieber zuerst mit dem Text und dann mit dem Design. Das hat mich auf die notorische “Huhn oder Ei” – Frage gebracht – Wo fängt man mit seiner E-Mail-Kampagne an – Beim Design oder beim Text? Ich wollte der Sache auf den Grund gehen und habe einige Antworten von Experten bekommen:

 

CTA im Zentrum

Online-Marketing-Expertin Lauren Jewell beginnt bei der Planung einer Kampagne mit dem CTA (Call-To-Action – dt. Handlungsaufforderung). „Schließlich möchte ich eine Botschaft vermitteln beziehungsweise eine Handlung inspirieren – daher denke ich, dass der CTA Priorität hat.“

Wenn Sie Ihre Kernaussage an die erste Stelle setzen, setzen Sie auch Ihre Kunden an erste Stelle. Achten Sie auf Feedback und versuchen Sie, sich ständig zu verbessern. Sich regelmäßig nach den Meinungen und Vorlieben zu erkundigen (und sich auch danach zu richten), ist die Grundlage einer starken Kunden-Marken-Bindung. Auch Studien zeigen, dass 70% aller Einkäufe darauf basieren, wie sich ein Kunde behandelt fühlt.

Diese Willkommens-E-Mail von Twist ist ein gutes Beispiel dafür, wie Design die erwünschte Reaktion hervorheben kann. Der Call-To-Action, hier der Link zum Produkt, wird klar durch ein großes Bild oben hervorgehoben. Die Schaltfläche des CTAs hat außerdem die Marken-typische violette Farbe, was zum Klicken und Weiterlesen inspiriert.

Welcome-to-Twist-680x1770

Gutes Design ist unsichtbar

Tatsächlich können Sie wirkungsvollere Designs erstellen, wenn Sie zuerst den Inhalt planen. „Design um des Designs Willen ist sinnlos“, erklärt Mailjet Designer Yann Skargovskii. „Design soll den Inhalt hervorheben, nicht sich selbst. Gutes Design ist unsichtbar.“ 

Im Falle der Call-To-Actions würde sich ein Design für eine 50%-Rabatt-Aktion stark von einem Design für eine Produkteinführung unterscheiden. Die Einführungs-E-Mail von Litmus Builder ist ein hervorragendes Beispiel dafür, wie Design die Kernaussage hervorheben kann. Die roten und weißen Kalender leiten den Blick auf die Anmeldung zur virtuellen Produkttour. Das Gitter unten hebt außerdem klar die Kundenmeinungen hervor, wobei ein größeres, dunkles Banner für die Kundenmeinungen zu dem Banner oben passt.

„Häufig möchte man zu viel auf einmal sagen. Dann erinnern wir den Kollegen oder Kunden daran, dass weniger mehr ist. Oft müssen dann auch Design-Ideen gestrichen werden“, sagt Lauren. Bei Design und Inhalt herrscht ein Geben und Nehmen. Wo der Inhalt die Aussage nicht genau vermitteln kann, springt das Design ein. Mit einer Balance zwischen Inhalt und Design bleibt die E-Mail kurz, ansprechend und inspiriert den Kunden zum Handeln. Und das genau ist es, was Sie brauchen um den Leser zu überzeugen.

Product-Launch-Email-from-Litmus-680x2722

Halten Sie die Kommunikation lebendig

Um zum Schluss unserer kleinen Forschungstour noch einmal auf unsere Frage zurückzukommen: Wo fängt man mit seinen E-Mail-Kampagnen nun an? Beim Design oder beim Inhalt? Diese Diskussion existiert schon seit Jahren und scheitert oft an der mangelnden Kommunikation zwischen Designteams und Textern. Oft wird solange separat gearbeitet, bis die einzelnen Parts kombiniert werden müssen und – Überraschung – nicht zusammenpassen. Es ist schwer, beide Bereiche effektiv zu verbinden, wenn nicht von Anfang an klar kommuniziert wird. Beide Teams sollten am Anfang jeder neuen E-Mail-Kampagne zusammenkommen, um ein genaues Verständnis von der Zielgruppe und der Botschaft der E-Mail zu finden.  Eine Universallösung gibt es hierbei nicht. E-Mail-Design und -Inhalt sollten sich gegenseitig ergänzen, um die gewünschte Nachricht der E-Mail am Effektivsten zu kommunizieren.

 

Folgen Sie uns auf Facebook oder Twitter und teilen Sie Ihre Erfahrungen und Ideen mit uns.                                    

E-Mail-Design für den digitalen Konsumenten

Sie haben sich also für eine Kampagne entschieden und tolle Inhalte vorbereitet. Jetzt fehlt nur noch ein Design, das dem gerecht wird. Aber wo fängt man da an?

Für den heutigen digitalen Konsumenten ist die Entscheidung, eine E-mail zu lesen oder zu löschen, eine Entscheidung von Sekundenbruchteilen. Hier finden Sie einige fundamentale Best Practices die Sie befolgen können, um Ihr Material schön, ansprechend und responsiv zu gestalten.
Lernen Sie wie Sie:

  • mobil-responsive E-Mails gestalten
  • die perfekte E-Mail-Größe finden
  • Ihre Inhalte effektive anorden
  • die Farben wählen, die Ihre Leser ansprechen
  • mit einzigartigen Medien Ihre E-Mail auffrischen

MJML: Darum haben wir eine Open-Source-Lösung entwickelt


E-Mail-Coding ist ein komplexes Thema, das uns schon lange beschäftigt. Wir haben immer wieder versucht, die Thematik aus anderen Blickwinkeln zu betrachten und neu zu definieren.


Genau das ist auch der Grund, weswegen wir
MJML, unsere neue Markup-Sprache, entwickelt haben. MJML hilft E-Mail-Sendern, die Schwierigkeiten beim Coding von responsivem HTML-Code zu umgehen – indem er ihn direkt generiert. Ihr habt uns richtig verstanden – Benutzer können ihre E-Mails einfach mit dem MJML-Code schreiben und unsere Engine wird daraus automatisch responsives HTML generieren.

 

Wie alles begann

In den letzten 5 Jahren haben wir Unternehmen beim Versenden von über 20 Milliarden E-Mails geholfen, mit einem wichtigem Ziel im Blick: Zustellbarkeit (engl. deliverability). Es ist ausschlaggebend, dass es die E-Mails unserer Nutzer auch in den Posteingang ihrer Kunden schaffen, vor allem da Zustellbarkeit direkt den ROI beeinflusst.  

Neben Zustellbarkeit gibt es noch einen weiteren, essentiellen Faktor für Kundenbindung: User Experience. In einer Welt, in der die Hälfte aller E-Mails von mobilen Geräten gelesen wird, ist das umso wichtiger. Deswegen haben wir 2015 Passport entwickelt, unser Drag-and-Drop-Tool, mit dem Nutzer einfacher responsive E-Mails erstellen können.

Oberflächlich gesehen erlaubt Passport es seinen Nutzern, durch einfaches Drag-and-Drop eine E-Mail zusammenzustellen, aber um das zu ermöglichen übersetzt unser System diese Aktivitäten in ein responsives HTML-Template.
Um es präziser zu formulieren: Eine E-Mail wird unserem System in JSON “beschrieben”, damit es sie in responsiven HTML-Code umwandeln kann.

mjml

 

Wir haben schnell erkannt dass dieses System eine noch größere Wirkung außerhalb von Passport haben könnte. Was wäre, wenn wir den Kern unseres Tools direkt in die Hände unserer User geben würden? Was, wenn sie direkt mit dem System kommunizieren könnten? Also entschieden wir uns, es auszuprobieren. Und um es noch benutzerfreundlicher zu machen, ersetzten wir die JSON-Beschreibung mit einer Markup-Sprache die fast wie HTML ist.
Das Prinzip ist also das Gleiche wie HTML – aber einfacher, responsiv im Design und semantisch. Wir erstellten Tags wie <<mj-section> und <mj-column>, mithilfe derer ihr schnell und einfach E-Mails erstellen könnt.

 

Von einer Markup-Sprache zu einer Komponenten-Bibliothek

E.mail wird auf unterschiedlichste Art und Weise genutzt: Weekly Digests, Willkommens-E-Mails, Rechnungen.. die Liste ist lang. Auch wenn es kaum möglich ist, alle verschiedenen Arten von Kampagnen aufzulisten, die eigentliche Content-Struktur ist sehr ähnlich. Das Zentrum einer responsiven E-Mail ist das Spalten-Layout. Wenn Sie dieses aber in HTML ausbauen möchten, wird die ganze Sache langwierig, repetitiv und um ehrlich zu sein – nervenaufreibend.

Schauen wir uns zum Beispiel eine Rechnung an. Im besten Falle bekommt man etwas in diesem Format:

  Die gute Nachricht ist, dass die MJML-Engine auf React.js basiert, was es ermöglicht, einzelne Komponenten zu nutzen und zu erstellen. Können Sie sehen, was wir hier gemacht haben? Ja, MJML macht es möglich, Ihre eigenen <mj-invoice> und <mj-item&gt Komponenten zu erstellen und den beängstigend ausschauenden Code von oben mit dem Folgenden zu ersetzen:
Jeder generierte HTML-Code ist auch mit den populärsten E-Mail-Anbietern .kompatibel.

 

Ein Dankeschön an die Community

Letztendlich wissen wir aber eines: Wir hätten ohne euch, der Community, und allem was wir von euch gelernt haben, MJML niemals fertigstellen können.
Es wäre nicht fair gewesen, diese Technologie für uns zu behalten. Deswegen haben wir uns entschieden, MJML als Open-Source unter der MIT-Lizenz anzubieten, so dass die Community die Engine hinter Passport kostenfrei nutzen kann. Die MIT-Lizenz ist unglaublich simpel und offen. Anders als die GPL-Lizenz macht sie es möglich, MJML in einer größeren Applikation zu nutzen ohne die gesamte Applikation Open-Source zu schalten.

 

Das bedeutet, ihr könnt MJML nutzen um HTML-E-Mails zu gestalten oder sogar die MJML-Engine in ein Produkt eurer Wahl integrieren. Ihr könnt uns auch helfen, MJML zu verbessern und auszubauen. Wenn ihr mehr darüber erfahren wollt, wie MJML funktioniert, geht auf unsere Dokumentations-Seite.

Ihr seid herzlich eingeladen, uns eure Meinung zu MJML mitzuteilen und beizutragen, dass der HMTL-Output von MJML perfekt funktioniert und mit so vielen E-Mail-Anbietern wie möglich konsistent ist. Wir hoffen, die Vielfalt unserer MJML-Komponenten wird euch inspirieren, kreative und spannende E-Mails zu gestalten, die euren Bedürfnissen entsprechen. Wenn ein Komponent fehlen sollte, ist das Beste was ihr tun könnt, einen Neuen zu entwerfen damit andere ihn auch nutzen können. Wir werden regelmäßig unseren PR-Anfrage auf Github bearbeiten um die besten Komponenten für die Community zu erstellen.
Unser Ziel ist, MJML gemeinsam mit unserer Community wachsen zu sehen, damit es mit der Zeit sogar noch besser wird. Es wird also regelmäßige Updates geben, die jede Veränderung im HTML miteinbinden wird, damit ihr im E-Mailing stets ganz vorn steht.