Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
In der manchmal verwirrenden und verwirrenden Welt des E-Mail-Marketings ist der E-Mail-Entwickler wie ein Held mit Superkräften, der zur Hilfe eilt.
Aber natürlich hat Batman einen Werkzeuggürtel und eine Batcave voller Zeug, während Ironman über einen endlosen Vorrat an Technologie verfügt.
Die richtigen E-Mail-Entwicklungstools können Ihren Codierungsprozess schneller, effizienter und wesentlich einfacher machen! Es gibt Tools (einige davon kostenlos), die gängige Herausforderungen bei der E-Mail-Entwicklung bewältigen.
Wir haben in diesem Beitrag einige der besten Tools für E-Mail-Entwickler aufgelistet – viele davon verwende ich selbst. Dazu gehören Tools, die von Mitgliedern der E-Mail-Geek-Community entwickelt wurden. Schauen Sie sie sich an!
E-Mail-Codeausschnitte
Codeausschnitte für die E-Mail-Entwicklung ermöglichen es Ihnen, häufig verwendete HTML- und CSS-Abschnitte zu verwenden, um mit der Erstellung Ihrer E-Mail zu beginnen. Natürlich macht es keinen Sinn, wertvolle Gehirnleistung darauf zu verwenden, sich alles zu merken, und hier sind E-Mail-Codeausschnitte sehr praktisch.
Eine Ressource, die ich im Laufe der Jahre oft genutzt habe, ist Guter E-Mail-Code vom erfahrenen E-Mail-Entwickler Mark Robbins. Hier finden Sie wichtige E-Mail-Codeausschnitte für viele verschiedene Situationen, darunter alles von der Codierung responsiver Spalten und versteckter Preheader bis hin zum grundlegenden Code, den Sie in jeder E-Mail benötigen.
E-Mail an Entwickler Jay Oram von ActionRocket bietet einige Code-Snippets auf GitHub an, darunter ein Repository mit CSS-Resets für E-Mails. Ein weiterer Entwickler mit einigen zuverlässigen Ressourcen auf GitHub ist Ted Goas.
Wenn Sie allgemeine Probleme mit E-Mail-Clients beheben, können Sie auch Code aus dem Abschnitt „Tipps und Tricks“ von Email on Acid abrufen. Weitere hilfreiche Codeausschnitte finden Sie in unserem Blogbeitrag „E-Mail-Codierung 101“.
Tools zur Codegenerierung
Scheinbar einfache Codierungsaufgaben können bei E-Mails etwas kompliziert werden. Dazu gehören Dinge wie Hintergründe und Aufzählungslisten. Andere Dinge, wie das Codieren eines Mailto-Links mit einer bestimmten Betreffzeile, können bei manueller Codierung sehr unübersichtlich werden.
Aus diesem Grund umfassen die besten E-Mail-Entwicklungstools webbasierte Anwendungen, die schnell den benötigten sauberen Code generieren, sodass Sie ihn direkt in Ihre E-Mail kopieren und einfügen können. Hier sind einige Codegenerierungstools, die viele E-Mail-Freaks verwenden:
Kalenderlinks sind schwierig zu codieren, da sie für verschiedene Anbieter (Apple Kalender, Google Kalender, Outlook usw.) funktionieren müssen. Ein Tool zur Codegenerierung macht dies viel einfacher und sorgt für ein gutes Abonnentenerlebnis.
Der Begriff „bulletproof“ wird in der E-Mail-Entwicklung verwendet, um ein Element zu beschreiben, das unabhängig vom E-Mail-Client funktioniert und korrekt angezeigt wird. Das Codieren von kugelsicheren Hintergründen, Schaltflächen und Listen ist normalerweise erforderlich, da jeder Entwickler den bevorzugten E-Mail-Client hat … Outlook.
Der Zeichenkonverter von Email on Acid hilft bei der HTML-E-Mail-Kodierung, indem er Sonderzeichen in die eigentliche HTML-Entität umwandelt, wodurch sichergestellt wird, dass der gesamte Text korrekt gerendert wird.
E-Mail-Editoren
Das Programm, mit dem Sie Code schreiben und bearbeiten, ist wahrscheinlich das wichtigste aller E-Mail-Entwicklungstools. Lange Zeit habe ich E-Mails mit Dreamweaver codiert, was gut funktionierte. Noch besser ist es jedoch, ein Tool zu verwenden, das auf E-Mail-Entwickler zugeschnitten ist.
Eine E-Mail-Codierungsplattform, die ich wärmstens empfehle, ist ein Neuling auf dem Markt — Paket. Gründer und Erfinder Avi Goldman arbeitet derzeit an einem E-Mail-Entwicklungstool, das Leuten wie mir das Bearbeiten und Optimieren von E-Mail-Code erheblich erleichtert.
Eine der neueren Funktionen, die ich an Parcel liebe, ist die Möglichkeit, eine Bibliothek mit E-Mail-Komponenten aufzubauen. Dabei handelt es sich um wiederholbare Codeblöcke, die Sie regelmäßig wiederverwenden und anpassen können. Im Gegensatz zu Snippets ändern sich E-Mail-Komponenten bei der Bearbeitung überall dort, wo sie verwendet werden. Das ist super hilfreich und spart enorm viel Zeit, wenn Sie ein E-Mail-Designsystem haben oder dieselben Komponenten für mehrere Marken verwenden. Sie werden auch zu schätzen wissen, wie Transformatoren in Parcel Ihnen helfen, sich wiederholende E-Mail-Entwicklungsabläufe zu automatisieren.
Erhabener Text ist auch ein zuverlässiger HTML-Editor, den ich in der Vergangenheit verwendet habe. Ein weiteres E-Mail-Entwicklungstool, das in der E-Mail-Geek-Community häufig auftaucht, ist Alter.email. Wir haben alle unterschiedliche Vorlieben, also probieren Sie ein wenig aus und finden Sie den E-Mail-Editor, der Ihnen am besten gefällt.
Email on Acid hat auch einen einfachen E-Mail-Editor in die Plattform integriert. Die meisten Entwickler verwenden unseren Editor nicht, um E-Mails von Grund auf neu zu programmieren. Er ist jedoch gut als Find-and-Fix-Tool wenn Sie während des QA-Prozesses Probleme beheben.
CSS-Inlining-Tools
Eine der mühsamsten Aufgaben beim Codieren von E-Mails ist das Einfügen von CSS-Stilen. Obwohl Sie in E-Mails häufig keine externen Stylesheets verwenden können, unterstützen viele Clients eingebettete CSS-Stile in
. Leider ist dies bei manchen (z. B. Outlook) nicht der Fall. Daher ist es normalerweise notwendig, CSS-Eigenschaften direkt auf das HTML anzuwenden.Es versteht sich von selbst, dass dies eine Menge Mehrarbeit bedeuten kann. Aber nicht, wenn Sie einen CSS-Inliner als eines Ihrer zuverlässigen E-Mail-Entwicklungstools verwenden.
Mit einem CSS-Inlining-Tool können Sie Code ein wenig mehr wie ein Webentwickler erstellen. Diese Lösungen übernehmen die CSS-Stile vom Anfang Ihrer E-Mail und wenden sie dann inline mit HTML im Textkörper an. Einfach ausgedrückt: CSS-Inlining-Tools machen Sie produktiver, indem sie Ihnen einen Großteil der Arbeit abnehmen.
Hier sind einige Orte, an denen Sie online einen CSS-Inliner finden können:
Bestimmte ESPs und andere E-Mail-Plattformen bieten auch CSS-Inlining-Tools. Tatsächlich gibt es auch im Editor von Email on Acid eines.
Frameworks und Tools zum Erstellen von Vorlagen
Vorlagen sind eine weitere Möglichkeit, die Entwicklung responsiver E-Mails schneller und effizienter zu gestalten. Erstens gibt es einige Frameworks für die E-Mail-Entwicklung, mit denen Sie die Arbeit ein wenig erleichtern können. Sie tun dies normalerweise, indem sie zum Erstellen einer HTML-E-Mail viel weniger Code erfordern.
MJML (Mailjet Markup Language) ist ein Open-Source-Framework für responsive E-Mails, das in der E-Mail-Geek-Community viele Fans hat. Es wird auch in Parcel unterstützt. MJML-Tags sind Komponenten auf hoher Ebene, die die Engine des Frameworks in responsives HTML übersetzt.
Die Open-Source Maizzle Die Plattform verwendet das Tailwind CSS-Framework, mit dem E-Mail-Entwickler responsive Vorlagen erstellen können, ohne sich um Inline-CSS-Stile kümmern zu müssen. Maizzle bietet auch Konfigurationsdateien zum Erstellen interaktiver Vorlagen mit AMP für E-Mail.
Ted Goas, den wir bereits erwähnt haben, entwickelte ein weiteres beliebtes E-Mail-Framework namens Cerberus. Es bietet verschiedene Vorlagen für flüssiges, responsives und hybrides E-Mail-Design. Diese sind hervorragende Ausgangspunkte für die Erstellung Ihrer eigenen E-Mail-Vorlagen.
BEEFree.io bietet noch eine weitere Option. Diese Plattform verfügt über Drag-and-Drop-Funktionalität. Es handelt sich also um ein E-Mail-Design-Tool für diejenigen, die sich mit der E-Mail-Entwicklung weniger auskennen und sich nicht mit Code herumschlagen möchten. Mit dem richtigen Plan können Sie Vorlagen direkt an Ihren E-Mail-Dienstanbieter (ESP) exportieren.
Blöcke Bearbeiten ist auch ein Drag-and-Drop-Tool für E-Mail-Marketingteams. Das Tool ist für die gemeinsame Nutzung durch Vermarkter, Entwickler und Designer gedacht. Anstatt jedoch einfach eine allgemeine E-Mail-Vorlage zu verwenden und diese anzupassen, können Entwickler ihren eigenen Code verwenden und dann Block-Edit-Tags hinzufügen. Diese Tags steuern, wie Designer und Vermarkter die Vorlagen anpassen können.
Tools zum Testen der Barrierefreiheit
Die Zugänglichkeit von E-Mails ist ein wichtiges Thema. Nicht nur aus Inklusivitätsgründen, sondern weil Sie ein zugängliches Posteingangserlebnis benötigen, wenn Sie die E-Mail-Interaktion maximieren möchten.
Zwei der wichtigsten zu prüfenden Dinge sind der Farbkontrast und wie einfach es für sogenannte Screenreader ist, E-Mail-Code zu interpretieren. Sinch Mailjet verfügt über eine hervorragende Ressource mit einer Liste der besten Plattformen für Barrierefreiheitstests.
Eine webbasierte Option, die speziell für E-Mails entwickelt wurde, ist AccessibleEmail.org. Mit diesem kostenlosen E-Mail-Entwicklungstool fügen Sie einfach Ihren HTML-Code ein und er wird auf Zugänglichkeitsfaktoren analysiert.
Es gibt viele Farbkontrastprüfer online, aber die Tool von WebAIM ist definitiv eines, das ich empfehlen würde.
Semantischer Code und ARIA-Labels sind zwei entscheidende Faktoren bei der Entwicklung von Inhalten für Screenreader. Lesen Sie meinen Beitrag zum Codieren barrierefreier E-Mails, um mehr zu erfahren.
Zum Abschluss noch einige zusätzliche Tools und wertvolle Ressourcen zur E-Mail-Entwicklung, die jeweils eigene Kategorien bilden:
Kann ich eine E-Mail senden: Mit diesem Tool können Sie verschiedene CSS-Eigenschaften und andere Elemente eingeben, um herauszufinden, ob sie in verschiedenen E-Mail-Clients unterstützt werden. Can I Email ist eine umfassende Ressource, die regelmäßig aktualisiert wird. Sie wird vom legendären E-Mail-Entwickler Rémi Parmentier gepflegt.
EmailPreview.io: Dieses Tool von der E-Mail-Expertin Stephanie Griffith ist ein einfaches Tool, mit dem Sie die Ausgabe Ihres Codes in der Vorschau anzeigen können. Fügen Sie einfach Ihre HTML- oder EML-Datei ein und sehen Sie sie sich an. Wenn Sie zufrieden sind, können Sie sie herunterladen und archivieren.
HTMLCrush: Dies ist ein nützliches Tool zum Minimieren des HTML-Codes in Ihren E-Mails. Es entfernt unnötigen Code, hält Ihr HTML sauber und reduziert das Gesamtgewicht (Dateigröße) der E-Mail.
E-Mail-Kamm: Dieses Tool dient zum Minimieren von CSS. Es entfernt ungenutztes CSS aus Ihren E-Mail-Vorlagen, um sie übersichtlich zu halten. Email Comb ist nicht parsend, akzeptiert also HTML-Code mit ESP-Markup oder anderen Vorlagensprachen.
TinyPNG: Große Bilder können problematisch sein und die Ladezeiten von E-Mails verlangsamen. Manchmal schicken Ihnen Designer Grafiken, die einfach viel zu groß sind. Dieses Tool verwendet intelligente verlustbehaftete Komprimierungstechniken, um die Dateigröße von PNGs und JPEGs zu reduzieren.
Besserer Platzhalter: Egal, ob Sie eine E-Mail-Vorlage erstellen oder beim Coden auf ein kreatives Element warten, ein Platzhalter hilft Ihnen, die Lücke mit dem richtigen Seitenverhältnis zu füllen. E-Mail-Freak Dylan Smith hat dieses praktische Tool für Designer und Entwickler entwickelt, mit dem Sie ganz einfach Breite, Höhe, Farbe, benutzerdefinierten Text und Dateiformat eines Platzhalterbilds angeben können.
E-Mail Geeks Slack: Seien wir ehrlich … Foren sind so 2012. Wenn Sie schnelle und zuverlässige Antworten auf E-Mail-Fragen möchten, bewerben Sie sich für die Mitgliedschaft im Email Geeks Slack. Es gibt Kanäle für Fragen zu E-Mail-Codes sowie zu Design, freiberuflichen Tätigkeiten, Anbieterkanälen und mehr. Es ist ein großartiger Ort, um mit anderen in der E-Mail-Welt in Kontakt zu treten.
Entwickelt für E-Mail-Entwickler
Email on Acid wurde entwickelt, um einige der häufigsten Herausforderungen bei der E-Mail-Entwicklung zu lösen. Wir sind zwar für E-Mail-Vorschauen bekannt, aber viele andere Lösungen sind direkt in den automatisierten Campaign Precheck-Workflow integriert:
- Bildvalidierung: Optimieren Sie Dateien für leistungsstarke E-Mails und ändern Sie animierte GIFs für Outlook-Abonnenten.
- Linkvalidierung: Keine manuelle Überprüfung von Links mehr, um die richtige URL zu bestätigen.
- Barrierefreiheitsprüfungen: Passen Sie den Code automatisch an, fügen Sie Alternativtext für Bilder hinzu, erkennen Sie Probleme mit Farbkontrasten und mehr.
- E-Mail-Teamverwaltung: Arbeiten Sie mit Designern und E-Mail-Vermarktern zusammen, um Kampagnen fertigzustellen und Codeanpassungen vorzunehmen, bevor Sie auf „Senden“ klicken.
E-Mail-Entwickler zu sein ist nicht einfach, aber Ihr Team verlässt sich auf Sie und die Abonnenten Ihrer Marke haben hohe Erwartungen an einwandfreie Posteingangserlebnisse. Indem Sie jede E-Mail jedes Mal testen und in der Vorschau anzeigen, haben Sie die beste Chance, perfekte E-Mails zu liefern.
Möchten Sie eigene E-Mail-Entwicklungstools vorschlagen? Erzählen Sie uns in den Kommentaren alles darüber.
Autorin: Megan Boshuyzen
Megan ist Grafikdesignerin und E-Mail-Entwicklerin und hat sich mit allen Aspekten des E-Mail-Marketings beschäftigt. Sie ist davon überzeugt, dass gute E-Mails für gute Zwecke einen positiven Unterschied in der Welt machen. Megan arbeitet derzeit als E-Mail-Entwicklerin für Sinch Email. Besuchen Sie ihre Website und erfahren Sie mehr unter megbosh.com.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
