10-Minuten-E-Mails: So spare ich Zeit bei der Entwicklung

Ich erinnere mich, dass ich mir die erste E-Mail ansah, für die ich den Code bearbeiten sollte, und sagte: „Was? Warum haben sie all diese Tische!?“ Und dann "reparieren", damit es auf meiner Apple Mail funktionierte. Irgendwie hat mir diese E-Mail einen Job in einem Marketingteam verschafft, das E-Mails und Landingpages erstellt. Dies mag bekannt klingen; es scheint, als ob die meisten Leute über E-Mail-Marketing stolpern.

Eines der Dinge, über die Sie nicht wissen, dass Sie auch stolpern, ist das Erstellen vieler E-Mails in kurzer Zeit. Für einen Entwickler kann dies eine entmutigende Aufgabe sein. Die Verwendung der richtigen Tools kann den Unterschied zwischen der Erstellung einer E-Mail den ganzen Tag oder 10 Minuten ausmachen.

In diesem Blogbeitrag werde ich meinen persönlichen Weg von einem langwierigen E-Mail-Erstellungsprozess zu einem viel kürzeren teilen. Ich hoffe es inspiriert dich!

Ich tauche meine Zehen in zeitsparende Tools aus der Toolbox eines Entwicklers

Zuletzt habe ich pharmazeutische (Pharma-)E-Mails codiert. Es gibt eine Reihe von Branchen im E-Mail-Marketing, die eine große Aufsicht und Tonnen von Anforderungen haben, was bedeutet, dass Sie ihre E-Mails sehr kreativ codieren müssen. Pharma ist eine davon. Ich weiß nicht, wie viele Stunden ich damit verbracht habe, eine Fußnote genau auszurichten oder die Schriftgröße in Outlook genau richtig einzustellen.

Ich war also immer auf der Suche nach Produkten oder Möglichkeiten, meine Entwicklungszeit zu verkürzen, damit ich mehr Zeit für die kleinen E-Mail-Macken habe.

E-Mail-Frameworks

Eines der ersten Dinge, die ich fand, waren E-Mail-Frameworks. Sie ermöglichen es Ihnen, deutlich weniger Code zu schreiben, indem Sie ihre spezielle Auszeichnungssprache verwenden, die dann für Ihre E-Mail kompiliert und in normales HTML und CSS zurückübersetzt wird. Ja, das bedeutet, dass Sie eine neue Programmiersprache lernen müssen. Aber sobald Sie dies getan haben, können Sie ganze Codeblöcke erhalten, indem Sie nur wenige Zeilen schreiben. So. Einfach. Wenn Sie jedoch keine Zeit haben, eine neue Sprache zu lernen, sind diese möglicherweise nicht für Sie geeignet.

CSS-Inliner

Es gibt mehrere CSS-Inlining-Tools, die Sie verwenden können, damit Ihre Stile einmal in den Kopf Ihres HTML-Codes geschrieben und später im gesamten Textkörper eingefügt werden können. Dies ist wichtig, da einige E-Mail-Clients CSS-Stile im Kopfelement entfernen, was das Aussehen Ihrer E-Mail ruiniert. Aber Zeile für Zeile zu gehen, um Stilelemente für jeden Absatz, Link usw. einzufügen, war so mühsam. Automatisches Inlining für den Gewinn!

Eines meiner Lieblingstools war ein Gulp-Workflow zum Erstellen von E-Mails, der HTML- und Sass-Dateien in E-Mail-fähiges HTML kompilierte. Als ich jedoch zur Pharmaindustrie wechselte, wurden diese Tools weniger bequem. Bei all den Nuancen in den Designs (zB kann ein <p>-Tag eine Farbe haben, während ein anderer <p>-Tag eine andere Farbe haben musste), konnte ich mich nicht mehr auf CSS im <style>-Tag oder automatisches Inlining verlassen. Ich musste Stile manuell inline codieren.

Was also tun angesichts all dessen? Am Ende des Tages habe ich die Code-Snippets (wiederverwendbare E-Mail-Module) in einem Code-Editor gespeichert, während Vorlagen in einem Ordner auf Dropbox abgelegt wurden. Dieses System hat die Entwicklungszeit halbiert. Das ist großartig für ein Ein-Personen-E-Mail-Team, aber als wir anfingen, das Team zu erweitern, brach der Prozess zusammen.

Erfahren Sie, wie Sie mit Vorlagen schneller E-Mails erstellen Mehr, mehr, mehr E-Mails. Nicht genügend Zeit oder Ressourcen. Wer kann sich beziehen? Starten Sie einen produktiveren, effizienteren E-Mail-Workflow mit skalierbaren, wiederverwendbaren und zuverlässigen E-Mail-Vorlagen. Holen Sie sich Ihren Reiseführer →

Die ultimative Effizienz bei der E-Mail-Entwicklung: Litmus Builder

Ich war so glücklich, als Litmus Builder in mein Leben trat. Builder ist so eingerichtet, dass er alle Ihre Snippets und Vorlagen erstellt, verwendet und speichert, um die Skalierung für Teams zu vereinfachen. Und ihre Snippets sind alle an einem Ort in der Design-Bibliothek untergebracht, auf die Ihr gesamtes Team direkt aus Builder zugreifen kann.

In Kombination mit dem E-Mail-Design-System, das wir bei Litmus entwickelt haben, können wir die meisten E-Mails in etwa 10 Minuten erstellen. Und für neue oder benutzerdefinierte E-Mails kann das grundlegende Framework in denselben 10 Minuten erstellt werden, sodass mehr Zeit zum Codieren und Testen benutzerdefinierter E-Mails bleibt und Sie mit sich ständig ändernden E-Mail-Clients auf dem Laufenden bleiben.

Glauben Sie mir nicht? Ich habe ein Video erstellt, das die Erstellung unserer letzten E-Mail mit Produktupdates zeigt. Die Erstellung der gesamten E-Mail mit Snippets, Partials und Visual Editor in Litmus Builder dauerte etwas mehr als 10 Minuten.

Sehen Sie selbst, wie schnell es bei mir gedauert hat (und finden Sie heraus, zu welchem ​​​​Song ich dabei gejammt habe):

So können Sie auch Zeit sparen

„Das ist alles schön und gut“, sagen Sie, „aber wie lange haben Sie gebraucht, um all diese Ausschnitte und Teils und Vorlagen einzurichten?“ Ich freue mich, Ihnen mitteilen zu können, es hat nicht lange gedauert! Ich sage dir wie.

Hauptstruktur

Zuerst müssen Sie die Hauptstruktur erstellen, die Sie für jede E-Mail verwenden werden. Das ist der Standard-CSS- und -Skelett-Code Ihres Unternehmens, dem die Snippets und Teils hinzugefügt werden. Die Chancen stehen gut, dass Sie wahrscheinlich schon irgendwo eine Version davon haben.

Anschließend speichern Sie diese als Vorlage, damit Sie leicht darauf zugreifen können. Diese Boilerplate- oder Starter-Vorlage ist der Ausgangspunkt für jede benutzerdefinierte E-Mail, die Sie erstellen und für die noch keine Vorlage eingerichtet ist.

Auszüge vs. Ausschnitte

Entscheiden Sie als Nächstes, was als Teil und was als Snippet erstellt werden soll.

Auf der Basisebene sind Partials und Snippets beides wiederverwendbare Codeblöcke, die Sie beim Erstellen jeder E-Mail in die Boilerplate einfügen. Sie werden im Grunde auf die gleiche Weise in Litmus eingegeben, obwohl Snippets ein Triggerwort benötigen, Teils jedoch nicht.

Der große Unterschied besteht darin, dass Teiltöne im Code nicht bearbeitet werden können. Finden Sie also heraus, welche Blöcke Sie nicht sehr ändern werden, und machen Sie diese Teiltöne. Hier bei Litmus sind das Kopf- und Fußzeilen. Alles andere sind Schnipsel.

Erstellen der Codeblöcke

Sobald Sie sich entschieden haben, wie Sie Ihre Codeblöcke aufteilen möchten, können Sie sie erstellen, indem Sie in Litmus einen neuen Teil oder ein neues Snippet erstellen. Es ist so einfach, wie Sie Ihren Code einfügen, ihm einen Namen und – im Fall von Snippets – ein Triggerwort geben.

So erstellen Sie ein Snippet:

Öffnen Sie in der Designbibliothek die Snippets-Bibliothek und klicken Sie dann auf die Schaltfläche „Neues Snippet“ in der oberen rechten Ecke. Im nächsten Bildschirm können Sie das Snippet benennen, ein Triggerwort zuweisen und den Code für das Snippet einfügen.

Sie können mit der Schaltfläche „Neuen Snippet erstellen“ oben rechts weitere Snippets erstellen oder zur Snippet-Bibliothek zurückkehren, um Ihr neues Snippet zu finden. Wenn Sie auf Ihr Snippet klicken, wird rechts das Detailfenster geöffnet, in dem Sie alle Informationen sehen und das Snippet erneut bearbeiten können.

Profi-Tipp: Halten Sie sich nicht mit Ihren Snippets zurück. Ja, sie können Codeblöcke sein, aber sie können auch kleiner sein. Wir haben Snippets für Markenfarben-Hexwerte sowie Snippets für Emojis und Headshots. Snippets können so groß oder klein sein, wie Sie möchten. Alles, was Sie häufig verwenden, sollte ein Ausschnitt sein.

So erstellen Sie einen Teil:

Aus der Konstruktionsbibliothek öffnen Sie die Teilbibliothek und klicken dann oben rechts auf die Schaltfläche „Neues Teil“. Benennen Sie Ihren Teil und Sie werden zu einem Bildschirm weitergeleitet, der wie Builder aussieht. Codieren Sie den gewünschten Teil (wenn Sie Ihre Snippets zuerst codieren, können Sie sie verwenden, um die Teiltöne zu erstellen). Klicken Sie auf "Speichern".

Um zur Partialbibliothek zurückzukehren und Ihr neues Partial zu finden, klicken Sie oben links unter dem Namen des Partials auf den Link „Partials“. Wenn Sie darauf klicken, öffnen Sie rechts das Detailfenster, in dem Sie alle Informationen sehen und den Teil erneut bearbeiten können, wenn Sie etwas vergessen haben.

Von hier aus können Sie ganz einfach Snippets und Teils in Ihre E-Mail in Litmus Builder einfügen. Und das ist es!

Die Reise geht weiter…

Wenn ich daran zurückdenke, wie ich früher E-Mails erstellt habe, kann ich fast nicht glauben, wie weit ich gekommen bin. Ich hätte nie gedacht, dass ich vom Erstellen einer E-Mail in wenigen Stunden – selbst mit all meinen besten Tipps und Tricks – in nur 10 Minuten fertig werden könnte!

Litmus Builder hat meinen E-Mail-Workflow aufgeladen. Wir haben über 170 Snippets und Teils, die wir in etwa drei Tagen in Litmus erstellt haben. Aber meine Arbeit hier ist noch nicht getan. Da sich unser E-Mail-Designsystem ständig weiterentwickelt, können wir unsere Snippets und Auszüge bearbeiten oder bei Bedarf weitere hinzufügen. Nach dem Hinzufügen sind sie sofort einsatzbereit.

Und mit meiner gesparten Zeit kann ich mich jetzt darauf konzentrieren, lustige Animationen zu erstellen, die Vector Markup Language (VML) zu lernen und herauszufinden, was im dunklen Modus von Gmail genau vor sich geht.

Also, worauf wartest Du? Beginnen Sie mit Lackmus, E-Mails schnell zu erstellen (wie ich!).

Starten Sie Ihre kostenlose Testversion →

Lackmus-Kunde? Direkt reinspringen →