Delivery Episode 5: Was ist E-Mail-Design wirklich?

In dieser Episode von Delivering versucht Moderator Jason Rodriguez, die Frage zu beantworten: "Was ist E-Mail-Design wirklich?" Kennt es sich mit HTML und CSS aus? Oder geht es über den reinen Code hinaus?

Abonnieren Sie Delivering auf iTunes oder Spotify, um zukünftige Episoden anzuhören und mit dem Hashtag #DeliveringPodcast an der Unterhaltung auf Twitter teilzunehmen.

Episodenmitschrift

Auf den ersten Blick scheint das E-Mail-Design einfach zu sein. Es ist nur etwas HTML und CSS zu schreiben und es an Abonnenten zu senden, richtig? Aber wenn Sie etwas tiefer schwimmen, eröffnen Sie sich eine Welt der Komplexität, die weit über den reinen Code hinausgeht. In dieser Episode von Delivering versuche ich, die Frage zu beantworten: „Was ist E-Mail-Design wirklich?“

Willkommen bei Delivering, einem Podcast über E-Mail-Marketing, Strategie, E-Mail-Branche und ja, E-Mail-Design und -Entwicklung. Die Zustellung wird Ihnen von Litmus zur Verfügung gestellt, der kreativen Plattform, die von über 600.000 E-Mail-Profis verwendet wird, um bessere E-Mail-Kampagnen für zufriedenere Abonnenten zu entwerfen, zu testen, zu analysieren und zusammenzuarbeiten. Erfahren Sie mehr und testen Sie Litmus sieben Tage lang kostenlos auf litmus.com.

E-Mail-Design ist einfach, oder? Wenn es darauf ankommt, ist E-Mail nur HTML und CSS, ähnlich wie das Schreiben einer Webseite. Es gibt die gesamte Dokumentstruktur – den Kopf und den Hauptteil in einer HTML-Datei – und dann den gesamten Inhalt dieses Dokuments. Sie verwenden ziemlich Standard-HTML, um Inhalte zu markieren, und dann CSS, um diese Inhalte zu gestalten. Jeder, der ein wenig Erfahrung mit dem Erstellen von Webseiten hat, kann theoretisch eine schnelle E-Mail codieren, auf einen ESP hochladen und an Abonnenten senden.

Das denken zumindest viele.

In Wirklichkeit sind HTML und CSS nur der Anfang, wenn es um E-Mail-Design geht. Klar, E-Mail-Designer, Entwickler und Vermarkter müssen ihr HTML und CSS kennen. Ohne sie sind Sie den Launen eines WYSIWYG-Editors und dem daraus resultierenden Spaghetti-Code überlassen. Aber was ist E-Mail-Design wirklich?

Im Laufe von fast einem Jahrzehnt des Entwerfens und Codierens von E-Mails habe ich das E-Mail-Design auf drei wichtige Dinge reduziert: Risikominderung, Grenzen überschreiten und bessere Erfahrungen für alle Abonnenten schaffen.

Wie viele Leute habe ich zuerst HTML und CSS gelernt, um meine eigenen Websites zu erstellen. Ich wurde mit der Webstandard-Bewegung erwachsen und folgte Leuten wie Jeffrey Zeldman und Eric Meyer religiös. Wann immer ich Zeit habe, verbringe ich sie damit, zu schreiben und Vorträge von Leuten wie Rachel Andrew und Jen Simmons zu halten.

Als ich jedoch mit dem Erstellen meiner ersten E-Mail beauftragt wurde, habe ich schnell gelernt, dass es nicht ausreicht, standardbasiertes HTML und CSS zu kennen. E-Mail ist dank der Dutzenden beliebter E-Mail-Clients, die HTML und CSS alle unterschiedlich behandeln, ein eigenes Biest. Alle E-Mail-Clients verwenden ihre eigenen Rendering-Engines, um das Markup, das unseren E-Mail-Kampagnen zugrunde liegt, zu interpretieren und anzuzeigen. In einigen Fällen verwenden verschiedene Versionen desselben E-Mail-Clients sehr unterschiedliche Rendering-Engines.

Microsoft Outlook wechselte bekanntlich vom Internet Explorer, einer relativ guten Rendering-Engine für E-Mails, auf die Verwendung von Microsoft Word im Backend, um E-Mails anzuzeigen. Es gibt viele Gründe, warum Microsoft die Umstellung vorgenommen hat, aber seitdem ist es ein Dorn im Auge von E-Mail-Marketern.

E-Mail-Clients reichen von erstaunlichen Renderings wie in Apple Mail bis hin zu den schlimmsten der schlimmsten. Denken Sie an ältere Versionen von Lotus Notes, die nicht viel Markup unterstützten.

Aus diesem Grund geht es beim E-Mail-Design so oft darum, Risiken zu minimieren. Es geht darum, jeden dieser E-Mail-Clients und die damit verbundenen Macken zu verstehen und E-Mails defensiv zu codieren. Als E-Mail-Designer möchten wir die Anzahl der Fehler begrenzen, die in unseren Kampagnen schief gehen. Dabei haben wir einige erstaunlich kreative Techniken und Hacks entwickelt, damit E-Mails in allen E-Mail-Clients gut funktionieren.

Bedingte Kommentare und Ghost-Tabellen von Microsoft, Hybrid-Codierung und Fab-Four-Methoden, sogar etwas so Grundlegendes wie die Verwendung von Inline-CSS und die Begrenzung der Anzahl von HTML-Elementen und CSS-Eigenschaften, die in einer E-Mail verwendet werden, dienen der Reduzierung des Risikos.

Viele E-Mail-Designer hören hier jedoch auf. Sie setzen standardmäßig auf defensive Codierungstechniken, ohne sich zu fragen, was sonst noch mit E-Mails erreicht werden kann. Glücklicherweise gibt es jedoch E-Mail-Designer, die mit dem Status Quo nicht zufrieden sind. Sie sind diejenigen, die daran arbeiten, die Grenzen des E-Mail-Designs zu verschieben.

Um fair zu sein, viele dieser defensiven Codierungstechniken sind kreativ und überschreiten auf ihre eigene Weise Grenzen. Aber sie sollten sich nur auf die bestmögliche Weise einschränkend fühlen. Sie sollten E-Mail-Designer inspirieren, über das hinauszugehen, was als traditionelles E-Mail-Design angesehen wird.

Aus diesem Grund verschiebt der zweite Teil des effektiven E-Mail-Designs diese Grenzen. Die Grenzen von E-Mail zu verstehen, sich aber von anderen Bereichen wie Webdesign und -entwicklung inspirieren zu lassen – oder aus Sicht des visuellen Designs, Dinge wie kreatives Druckdesign – ist der Punkt.

Das beliebteste Beispiel für diese Art von Design ist das Erstellen interaktiver E-Mails. Mark Robbins und die Crew von Rebelmail haben für Marken wie Burberry bekanntermaßen vollständig interaktive Checkout-Erlebnisse im Posteingang entwickelt. Bei Litmus haben wir nach dem Senden von Twitter-Feeds, Hintergrundvideos und Schnitzeljagden in E-Mail-Kampagnen große Resonanzen erhalten.

Aber denken Sie nicht, dass E-Mails interaktiv sein müssen, um Grenzen zu überschreiten und das Medium weiterzuentwickeln. Copywriting, Strategie sowie Grafik- und visuelles Design können ebenfalls die Nadel bewegen. Really Good Emails hat ein riesiges, engagiertes Publikum gewonnen, nicht weil alle ihre E-Mails interaktiv sind, sondern indem sie ihre einzigartige Stimme, ihren Humor und einige großartige Personalisierungen annehmen.

Einer meiner Lieblings-Newsletter aller Zeiten, der inzwischen eingestellte UX-Newsletter von Mailchimp, hat mit Code nichts Besonderes gemacht. Aber ihre kunstorientierten E-Mails – meine Lieblings-E-Mail war eine HTML-E-Mail, die aussah wie die Ära der 90er, ASCII-Kunst im Klartext – inspirierte andere Designer dazu, Art Direction in ihre eigenen E-Mail-Kampagnen zu integrieren und das Konzept zu erweitern, was Abonnenten von einem E-Mail-Newsletter erwarten Sein.

Obwohl einige dieser Genre-definierenden E-Mails einmalige Kampagnen nur zum Spaß sind, dreht sich viel Arbeit um den letzten Aspekt guten E-Mail-Designs: Bessere Erfahrungen für Abonnenten zu schaffen.

Ohne die Pionierarbeit von Leuten wie Fabio Carneiro und Nicole Merlin, Stig Morten Myre und Remi Parmentier hätten wir nicht die Techniken, die wir alle für selbstverständlich halten, um unseren Abonnenten bessere Erlebnisse zu bieten. Fabio, Nicole und Remi trugen alle zur Diskussion über den Aufbau reaktionsschneller, mobilfreundlicher E-Mails bei, die täglich von Millionen von Abonnenten auf der ganzen Welt gelesen werden. Und Stigs Engagement, die Geheimnisse von VML und die Welt der kugelsicheren Schaltflächen und Hintergründe zu lüften, hat es Abonnenten überall ermöglicht, sich mit E-Mail-Kampagnen zu beschäftigen, trotz all der seltsamen Scheiße, die E-Mail-Clients mit unserem Code machen.

In letzter Zeit haben wir einen enormen Vorstoß unternommen, um zugänglichere E-Mail-Kampagnen zu erstellen. Leute wie Mark Robbins und Paul Airy haben eine Menge Nachforschungen angestellt, um uns allen zu helfen, zu verstehen, wie man E-Mail-Kampagnen erstellt, die von jedem verwendet werden können, unabhängig von seinen Fähigkeiten. Und ein stärkerer Fokus auf die Verwendung von Typografie, Kontrast, alternativem Text für Bilder und klareren Texten hat E-Mail-Marketing für mehr Menschen als je zuvor geöffnet.

Das bringt uns zurück zu der Frage: „Was ist E-Mail-Design wirklich?“

E-Mail-Design ist mehr als Code. Es ist so viel mehr.

Beim E-Mail-Design geht es darum, ein einzigartiges Medium zu verstehen. Ein Medium, das mit Webdesign und -entwicklung verwandt ist, aber davon abhebt. Eine, die auf vertrauten Technologien aufbaut, die aber das Wissen eines Spezialisten erfordert, um gut zu funktionieren.

Natürlich geht es bei E-Mail darum, das Risiko zu mindern, das von so vielen E-Mail-Clients und Rendering-Engines ausgeht, die alle ihre eigenen frustrierenden Fehler aufweisen. Aber es geht darum, diese Risiken und Einschränkungen zu überwinden und kreative Wege zu finden, um für alle unsere Abonnenten erstaunliche, zugängliche Erlebnisse zu schaffen.

Wenn Sie also das nächste Mal gefragt werden, ob Sie ein E-Mail-Designer sind, scheuen Sie sich nicht, zu antworten. Sagen Sie nicht: "Ja, aber ich mache auch Frontend-Webarbeiten." Sagen Sie ihnen die Wahrheit: Sagen Sie ihnen, dass Sie interessante und herausfordernde Probleme lösen und bessere Erfahrungen mit dem wertvollsten und beliebtesten Kommunikationskanal der Welt, der E-Mail, bieten.

Gefällt Ihnen diese Episode von Delivering? Geben Sie uns eine Bewertung auf iTunes und teilen Sie den Podcast mit Ihren Freunden. Und stellen Sie sicher, dass Sie mit dem Hashtag #DeliveringPodcast in Ihrem bevorzugten sozialen Netzwerk an der Unterhaltung teilnehmen.