Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email
Webdesign

Was Sie über HTML-E-Mail wissen sollten

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

E-Mail ist ein großartiges Medium. Es geht direkt in den Posteingang und seine ROI wird weithin als durch das Dach bei 4000% berichtet. Es wird auch ständig missverstanden und zu oft ist es schlecht gemacht. Mit der jüngsten Explosion von Smartphones lesen wir unsere Post auf unserem iPhone oder Galaxy öfter, aber leider hat viel E-Mail-Marketing nicht Schritt gehalten. Ich sehe dies als eine riesige verpasste Chance, weil eine gut ausgeführte E-Mail angenehm zu öffnen und sehr erfolgreich sein kann.

Coding HTML Email kann eine Herausforderung sein

Wenn Sie sich bereits mit dem Entwurf und der Entwicklung von HTML-E-Mails beschäftigt haben, haben Sie wahrscheinlich bereits festgestellt, dass es ziemlich schwierig sein kann. Und du stellst dir das nicht vor - es ist ziemlich schwer. Hier ist der Grund:

E-Mail-Standards existieren nicht

[Wir werden] weiterhin Word zum Erstellen von E-Mail-Nachrichten verwenden, weil wir glauben, dass dies die beste E-Mail-Authoring-Erfahrung ist.

Wenn Sie für das Web kodieren, können Sie zumindest darauf zählen, dass alle großen Browser (Chrome, Firefox, Internet Explorer, Safari und Opera) versuchen, Webstandards für das Rendern von HTML und CSS einzuhalten.

Wenn es um E-Mail-Clients geht, testen Sie eine große Menge alter und neuer Programme. Sie reichen von neuen Telefonen mit Android und iOS bis hin zu IBM Lotus Notes oder Microsoft Office 2007 (die Ihr liebevoll erstelltes HTML mit der Word-HTML-Rendering-Engine bereichern). Die vorherigen Versionen von Outlook verwendeten einen Browser, um ihren HTML-Code zu rendern - was eigentlich logisch ist. Warum zu einem Textverarbeitungsprogramm wechseln, um HTML, das Sie fragen, rendern zu lassen? Nun, aus "Sicherheitsgründen", sagen sie). Und keines dieser Programme muss Standards einhalten. Im Grunde erfinden sie es alle einfach. Sie können sehen, wie die Standards für einige der beliebtesten E-Mail-Clients im E-Mail-Standards-Projekt aussehen.

Wenn das nicht schlimm genug ist, koppeln Sie das mit der nächsten Tatsache: Es gibt ungefähr eine Million verschiedene Kombinationen von Möglichkeiten, wie E-Mails auf Desktops und mobilen Geräten gerendert werden können.

demystifying-email-rendering
Die Darstellungsmöglichkeiten sind (fast) endlos.

Hier ist eine Liste einiger der gängigsten E-Mail-Clients:

Mobile Kunden:

  • Android 2.3 & 4.0
  • iPhone 5 iOS 6
  • iPhone 4S iOS 6
  • iPhone 3GS iOS 5
  • iPad 2 iOS 6
  • BlackBerry OS 4 & 5
  • Symbian S60
  • Windows Phone 7.5

Desktop-Clients:

  • Apple Mail 4, 5, 6
  • Lotus Notes 8.5
  • Lotus Notes 8
  • Thunderbird
  • Windows Live Mail
  • Outlook 2013
  • Outlook 2011 for Mac
  • Outlook 2010
  • Outlook 2007
  • Outlook 2003
  •  Outlook 2002/XP
  • Outlook 2000

Webmail-Clients:

  • AOL Mail (in jedem Browser)
  • Gmail (in jedem Browser)
  • Outlook.com (in jedem Browser)
  • Yahoo! (in jedem Browser)

Das sind viele Geräte!

Wenn Sie bereits mit der Webentwicklung vertraut sind, vergessen Sie alles, was Sie darüber wissen.

Um all dies zu verbinden, ist auch das bedingte Styling keine große Option. Es gibt einige Dinge, die Sie mit bedingten Kommentaren tun können, aber es ist darauf beschränkt, bestimmte Versionen von Outlook oder alles außer bestimmten Versionen von Outlook zu targetieren.

Wenn Sie bereits mit der Webentwicklung vertraut sind, vergessen Sie alles, was Sie darüber wissen. Das größte Hindernis für Sie ist, dass die Dinge wie "normale" Web-Entwicklung funktionieren. Das wird dich frustrieren und dich zurückhalten. Das Schlimmste, was Sie tun können, ist wütend zu werden, dass Sie keine DIVs verwenden können oder dass dieser margin nicht vollständig unterstützt wird. Vergessen Sie also alles, was Sie über semantisches HTML und die neueste CSS-Spezifikation wissen. Vertrau mir, es wird helfen.

Wie Sie Ihre Arbeit angehen

Werfen wir einen Blick auf einige E-Mail-Erstellung Workflow-Vorschläge.

Strukturell zuerst arbeiten

Wenn Sie zuerst die Struktur Ihrer E-Mails aufbauen, können Sie später viele Fehler und Probleme vermeiden. Baue niemals das Ganze und teste es dann - du kannst oft mit zu vielen Fehlern fertig werden, und alle beeinflussen sich gegenseitig.

Testen Sie oft

Arbeiten Sie, bis Sie einen kleinen Entwicklungsmeilenstein erreicht haben (z. B. wenn Sie die Grundstruktur abgeschlossen haben) und führen Sie dann einen Test durch. Am besten testen Sie Litmus oder Email auf Acid. Ich empfehle einen unbegrenzten Plan mit einer dieser Firmen, weil es sehr wichtig ist, regelmäßig zu testen.

Ich mag es auch, alle meine Tischgrenzen zu verlassen, damit ich sehen kann, was ich erschaffe, und am Ende mache ich alle aus. Sie können auch den Hintergrund bestimmter Zellen färben, um zu sehen, welche Bereiche wo sind. Mein idealer Workflow besteht darin, ein Skelett zu erstellen, zu testen, dann meinen Inhalt hinzuzufügen, zu testen, die Farben und Schriftarten zu formatieren, erneut zu testen und schließlich meine Rahmen zu entfernen und erneut zu testen, bevor ich sie sende.

Häufig bestätigen

Validieren Sie es so oft wie möglich mit dem W3C Validator. Dies wird Ihnen helfen, kleine Details auszubügeln und Fehler wie fehlende oder offene Tags aufzuspüren.

Senden Sie Ihre E-Mail

Es gibt eine große Anzahl von Optionen, wenn es um das Senden Ihrer E-Mail geht. Die zwei Dienste, die ich am meisten benutze, sind MailChimp und Campaign Monitor. Sie bieten wettbewerbsfähige Preise und sie sind sehr einfach zu bedienen. Es gibt auch viele kommerzielle Plattformen - alles hängt von Ihren Bedürfnissen ab. Melden Sie sich für ein kostenloses Konto bei beiden an und basteln Sie in ihren Systemen, um zu sehen, welches Sie mögen. Stellen Sie sicher, dass Sie die nützlichen Daten nutzen, die beide Dienste über Ihre E-Mails sammeln, z. B. offene Zeiten und die Verwendung des E-Mail-Clients. Dies kann Ihnen wirklich helfen, Ihre Bemühungen beim nächsten Senden auf den richtigen Bereich zu konzentrieren.

Inhalt, Entwicklung und SPAM-Scores

Wenn es um SPAM geht; Inhalt, Design und Entwicklung gehen Hand in Hand. Es ist wichtig, typische Spam-Taktiken zu vermeiden, wie z. B. das Verwenden von Großbuchstaben und vielen Ausrufezeichen in der Betreffzeile. Es gibt bestimmte Wörter, die wahrscheinlich auch SPAM-Filter auslösen (wie "frei" und "investieren"). Je sauberer Ihr Code ist, desto unwahrscheinlicher ist es, dass Ihre E-Mail als SPAM gekennzeichnet wird, und das Verhältnis von Bildern zu Text wirkt sich ebenfalls aus. Bildabhängige E-Mails ohne Text werden eher als SPAM markiert, ebenso E-Mails mit sehr langen Bilddateinamen.

Die Welt der SPAM-Scores ist sehr schwierig und es ist wichtig, einen SPAM-Test über dein Testkonto mit Lackmus oder E-Mail auf Acid durchzuführen, bevor du deine E-Mail sendest, um sicherzustellen, dass deine ganze harte Arbeit nicht direkt in den Junk-Ordner geht.

Tauchen in Entwicklung ein

Jetzt, für das Wesentliche der E-Mail-Entwicklung ..

Werkzeuge des Handels

Sie benötigen einen Texteditor, den Sie mögen (Ich benutze Sublime Text) und einen Test-Account mit Lackmus oder Email auf Acid. Ich empfehle dringend, ein unbegrenztes Testkonto bei diesen beiden Unternehmen zu haben, da es Ihr Leben so viel einfacher macht. Wenn Sie keine monatliche Gebühr bezahlen, zahlen Sie zwischen $ 3 und $ 5 pro Test, was sich sehr schnell summieren kann.

Beginnend mit einer guten Basis

Ich denke, es ist gut, mit einem unbeschriebenen Blatt zu beginnen. Frameworks wie die HTML E-Mail-Boilerplate sind voller wunderbarer Tricks und Schnipsel, die Sie Stück für Stück umsetzen können. Allerdings, wenn Sie gerade erst anfangen, empfehle ich nicht, es als Ausgangspunkt zu verwenden, da es viele Elemente enthält, die Sie nicht benötigen. Mit Hilfe von Boilerplates kann es häufig schwieriger werden, Probleme zu beheben, wenn in Ihrer Datei viel ungenutzter Code vorhanden ist.

Hinweis: Da es sehr prekär sein kann, jede Art von Editor zu verwenden (besonders wenn es Zeit ist, Fehler zu beheben), sollten Sie niemals einen WYSIWYG-Editor oder einen Editor verwenden, der Ihr formatiertes Design verspricht und es in gültiges HTML verwandelt für E-Mails. Dieses Zeug funktioniert einfach nie.

!DOCTYPE

Dies mag zunächst als technisches Detail erscheinen, aber Sie benötigen eine leere Vorlage, mit der Sie arbeiten können, und diese Vorlage benötigt einen Doctype. Ein Doctype ist im Wesentlichen eine Codezeile, die das Programm darüber informiert, welche HTML-Tags zu erwarten sind und an welchen Regelsatz sich HTML und CSS halten. Etliche Kunden streichen Ihren Doctype aus und manche wenden sogar ihren eigenen an. Viele Clients respektieren Ihren Doctype und es kann Dinge viel einfacher machen, wenn Sie ständig gegen einen Doctype validieren können.

Die Verwendung eines XHTML-Doctype weist im Allgemeinen die geringsten Macken und Inkonsistenzen zwischen Dokumenten auf. Ich benutze XHTML 1.0 Transitional, weil es sich in meiner Erfahrung als der zuverlässigste Doctype erwiesen hat. Im folgenden Tutorial, in dem wir eine vollständige HTML-E-Mail-Vorlage erstellen, verwenden wir den folgenden Code, um unser Dokument zu starten:

Das Content-Type-Meta-Tag dient dazu, der Ziel-Rendering-Engine mitzuteilen, wie Text und Sonderzeichen verarbeitet werden. In Wirklichkeit müssen Sie alle Ihre Sonderzeichen trotzdem verschlüsseln (z. B. & wird & für Ampersand), um sicher zu sein, aber es lohnt sich, diese Zeile trotzdem dort zu behalten.

Das Viewport-Metatag weist das Gerät an, den sichtbaren Bereich auf die Breite des Gerätebildschirms einzustellen. Außerdem wird die Anfangsskala auf "normal" eingestellt, die weder vergrößert noch verkleinert wird. Wenn Sie dies nicht angeben, können viele Smartphones Ihren Inhalt so skalieren, dass der Inhalt in den sichtbaren Bereich passt, nicht jedoch in seine Auffüllung oder Ränder. Dies kann dazu führen, dass Text und Bilder direkt an den Rand des Bildschirms stoßen.

Geben Sie schließlich immer einen aussagekräftigen Titel ein, da dies den Benutzern angezeigt wird, wenn sie die E-Mail in einem Browser anzeigen oder sie mit ihren Freunden teilen.

Bei der E-Mail geht es um Schachteltabellen

Aufgrund fehlender Standards in E-Mails ist es nicht möglich divs, sections oder articles zu verwenden - stattdessen müssen Sie Tabellen verwenden. Darüber hinaus müssen Sie sehr viele verschachtelte Tabellen verwenden, da weder die Spalten colspan noch rowspan ordnungsgemäß unterstützt werden.

demystifying-email-nesting

Absätze oder Zellen?

Aufgrund der fehlenden Unterstützung für Standards ist es keine gute Idee, Standard-Tags wie h1, h2, h3 oder p zu verwenden. Ich finde, dass diese über E-Mail-Clients hinweg wirklich inkonsistent sein können und einige ziemlich große Kopfschmerzen verursachen können.

Am besten platzieren Sie jeden Textblock in einer eigenen Zelle und wenden Inline-Styling auf diese Zelle an, zum Beispiel:

Inline-Styles oder Stylesheets?

Dieser ist eher eine persönliche Entscheidung. Ich bevorzuge es, alle meine Stile inline zu halten (dh innerhalb der HTML-Tags selbst), weil ich gerne genau weiß, wo alles ist und was es beeinflusst. Sie können mit Styles codieren und dann am Ende alle Inline ziehen (Campaign Monitor und MailChimp können dies automatisch für Sie tun, Sie können auch Premailer oder ähnliches verwenden), aber der Grund, warum ich das nicht mag, ist, weil Sie es kennen lernen Ihr Code, führen Sie es durch einen Inliner, und dann kann Ihr Code etwas unkenntlich werden. Ich finde, dass dies die Fehlersuche erschwert. Sagen Sie das, wenn Sie so arbeiten wollen, ist das in Ordnung; Es gibt keinen technischen Grund, warum Sie es nicht tun sollten.

Vergessen Sie nicht: Sie können nicht mehrere Klassen auf Dinge in HTML-E-Mails anwenden, da dies nicht unterstützt wird. Jedes Element kann maximal eine Klasse haben.

Vergessen Sie auch nicht: Sie können keine Kurzschrift für Dinge wie Schriftgröße verwenden (z. B. style = "font: 8px / 14px Arial, sans-serif;"), da dies nicht unterstützt wird.

Bildnamen und SPAM-Scores

Achten Sie beim Speichern von Bildern darauf, dass es sinnvoll ist, Ihren Bildern kurze und aussagekräftige Namen zu geben, da dadurch Ihr Spam-Score verbessert wird. Namen wie "campaign_054_design_0x0_v6_email-link.gif" haben wahrscheinlich einen viel höheren SPAM-Score als "email.gif".

Bildgröße

Es ist auch eine wirklich gute Idee zu versuchen, Ihre gesamte E-Mail so klein wie möglich zu halten: unter 100kb ist ideal, aber nicht immer möglich, unter 250kb ist ziemlich Standard. Verwenden Sie eine Komprimierungs-App wie JPEGmini oder tinyPNG, um alle Ihre Bilder vor dem Senden so weit wie möglich zu verkleinern. Langsamere Ladezeiten, insbesondere auf mobilen Geräten, können Ihre E-Mails beschädigen oder zerstören, wenn die Gesamtgröße der Datei zu groß ist.

Andere Gotchas

Überlassen Sie nichts dem E-Mail-Client. Geben Sie alle Ihre Breiten an, da Sie sonst unerwartete Ergebnisse erhalten könnten. Legen Sie für Ihre Hauptcontainerelemente immer die Größe in Pixel fest. Sie können dann Prozentsätze innerhalb Ihres enthaltenden Elements verwenden, wenn Sie möchten.

Fazit

Beim Entwerfen und Entwickeln von HTML-E-Mails ist eine Menge zu beachten. Bei den meisten handelt es sich um "unerlernte" Standards, die Sie im Laufe der Jahre für Webdesign anwenden dürfen. Dieses Lernprogramm sollte Ihnen jedoch eine solide Grundlage für die Arbeit geben und Sie sind jetzt bereit, in den eigentlichen Erstellungsprozess einzusteigen. Weiter!

Nützliche Links

Ich habe in diesem Tutorial einige Dinge referenziert - also hier sind sie wieder, alle an einem Ort.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.