Share
E-Mail ist ein großartiges Medium. Es geht direkt in den Posteingang und sein ROI wird allgemein mit 4000% durch das Dach berichtet. Es wird auch ständig missverstanden und zu oft schlecht gemacht. Mit der jüngsten Explosion von Smartphones lesen wir häufiger unsere E-Mails auf unserem iPhone oder Galaxy, aber leider ist das E-Mail-Marketing leider nicht mitgekommen. Ich sehe dies als eine große verpasste Gelegenheit, weil eine gut ausgeführte E-Mail erfreulich sein kann, um sie zu öffnen und äußerst erfolgreich zu sein.
Wenn Sie sich bereits mit dem Design und der Entwicklung von HTML-E-Mails vertraut gemacht haben, haben Sie wahrscheinlich bereits festgestellt, dass dies ziemlich schwierig sein kann. Und Sie stellen es sich nicht vor - es ist ziemlich schwer. Hier ist der Grund:
Wir werden Word weiterhin zum Erstellen von E-Mail-Nachrichten verwenden, da wir der Meinung sind, dass dies die beste Erfahrung beim Erstellen von E-Mails ist.
Das Outlook-Team
Wenn Sie für das Web programmieren, können Sie sich zumindest darauf verlassen, dass alle wichtigen Browser (Chrome, Firefox, Internet Explorer, Safari und Opera) versuchen, Webstandards für die Wiedergabe von HTML und CSS einzuhalten.
Wenn es um E-Mail-Clients geht, testen Sie eine Menge alter und neuer Programme. Sie reichen von neuen Handys, die auf Android und iOS laufen, bis zu Lotus Notes oder IBM Office 2007 von IBM (das Ihren liebevoll erstellten HTML-Code mit der Word-HTML-Rendering-Engine rätselhaft rendert. In früheren Versionen von Outlook wurde ein HTML-Browser verwendet, der eigentlich HTML-Code darstellt Warum sollten Sie zu einem Textverarbeitungsprogramm wechseln, um das HTML-Format zu rendern, das Sie fragen? Nun, aus Sicherheitsgründen, sagen sie. Und keines dieser Programme muss sich an irgendwelche Standards halten. Sie machen im Grunde alles nur nach. Im E-Mail-Standards-Projekt können Sie sehen, wie die Unterstützung von Standards für einige der beliebtesten E-Mail-Clients aussieht.
Wenn das nicht schon schlimm genug ist, kombinieren Sie das mit der nächsten Tatsache: Es gibt ungefähr eine Million verschiedene Kombinationen von Möglichkeiten, mit denen E-Mails auf Desktop- und Mobilgeräten gerendert werden können.
Die Rendering-Möglichkeiten sind (fast) endlos. Hier sind einige der häufigsten E-Mail-Clients:
Mobile Kunden:
Desktop-Clients:
Webmail-Clients:
Das sind viele Geräte!
Wenn Sie mit der Webentwicklung bereits vertraut sind, vergessen Sie alles, was Sie darüber wissen.
Um das Ganze noch einmal zusammenzufassen, ist das bedingte Styling keine Option. Es gibt einige Dinge, die Sie mit bedingten Kommentaren tun können, aber es ist auf bestimmte Versionen von Outlook oder alles beschränkt außer bestimmte Versionen von Outlook.
Wenn Sie mit der Webentwicklung bereits vertraut sind, vergessen Sie alles, was Sie darüber wissen. Das größte Hindernis für Sie ist die Erwartung, dass Dinge wie "normale" Webentwicklung funktionieren. Das wird dich frustrieren und dich zurückhalten. Das Schlimmste, was Sie tun können, ist, sich zu ärgern, dass Sie keine DIVs verwenden können Spanne wird nicht vollständig unterstützt. Vergessen Sie also alles, was Sie über semantisches HTML und die neuesten CSS-Spezifikationen wissen. Vertrauen Sie mir, es wird helfen.
Sehen wir uns einige Vorschläge für E-Mail-Erstellung an.
Wenn Sie zuerst die Struktur Ihrer E-Mail erstellen, können Sie später viele Fehler und Probleme vermeiden. Bauen Sie niemals das Ganze auf und testen Sie es dann - Sie haben oft zu viele Fehler, mit denen Sie fertig werden können, und sie alle beeinflussen sich gegenseitig.
Arbeiten Sie, bis Sie einen kleinen Meilenstein für die Entwicklung erreicht haben (z. B. wenn Sie die Grundstruktur fertiggestellt haben) und führen Sie dann einen Test durch. Am besten testen Sie am besten mit Litmus oder Email auf Acid. Ich empfehle den Abschluss eines unbegrenzten Plans bei einem dieser Unternehmen, da es oft wichtig ist, regelmäßig testen zu können.
Ich lasse mich auch gerne an allen meinen Tischgrenzen zurück, damit ich sehen kann, was ich erschaffe, und am Ende schalte ich sie alle aus. Sie können vielleicht auch den Hintergrund bestimmter Zellen einfärben, um zu sehen, welche Abschnitte wo sind. Mein idealer Arbeitsablauf besteht darin, ein Skelett zu erstellen, zu testen, dann meinen Inhalt hinzuzufügen, die Farben und Schriftarten zu testen, zu formatieren, erneut zu testen und schließlich meine Rahmen zu entfernen und vor dem Senden erneut zu testen.
Überprüfen Sie es mit dem W3C-Validator so oft wie möglich. Dadurch können Sie kleine Details ausbügeln und Fehler wie fehlende oder offene Tags aufgreifen.
Es gibt eine Vielzahl von Möglichkeiten, um Ihre E-Mail zu versenden. Die zwei Dienste, die ich am häufigsten benutze, sind MailChimp und Campaign Monitor. Sie bieten wettbewerbsfähige Preise und 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 an und basteln Sie in ihrem System, um zu sehen, welches Sie mögen. Stellen Sie sicher, dass Sie die nützlichen Daten verwenden, die beide Dienste über Ihre E-Mails sammeln, z. B. Öffnungszeiten und die Verwendung von E-Mail-Clients. Dies kann Ihnen wirklich dabei helfen, Ihre Bemühungen beim nächsten Senden auf den richtigen Bereich zu konzentrieren.
Wenn es um SPAM geht; inhalt, design und entwicklung gehen Hand in hand. Es ist wichtig, typische Spammy-Taktiken wie das Verwenden von Großbuchstaben und einer Vielzahl von Ausrufezeichen in Ihrer Betreffzeile zu vermeiden. Es gibt bestimmte Wörter, die wahrscheinlich auch SPAM-Filter auslösen (wie "free" und "invest"). Je sauberer Ihr Code ist, desto unwahrscheinlicher wird Ihre E-Mail als Spam markiert, und das Verhältnis von Bildern zu Text wirkt sich ebenfalls aus. Bildabhängige E-Mails ohne Text werden eher als SPAM gekennzeichnet, ebenso E-Mails mit sehr langen Bilddateinamen.
Die Welt der SPAM-Ergebnisse ist schwierig und es ist wichtig, einen SPAM-Test über Litmus oder Email on Acid durchzuführen, bevor Sie Ihre E-Mail senden, um sicherzustellen, dass Ihre harte Arbeit nicht direkt auf den Junk-Ordner gerichtet ist.
Nun, für das Wesentliche der E-Mail-Entwicklung…
Sie benötigen einen Texteditor, den Sie mögen (ich benutze Sublime Text) und einen Testaccount mit Litmus oder Email on Acid. Ich empfehle Ihnen dringend, ein unbegrenztes Testkonto bei einem dieser Unternehmen zu haben, da dies Ihr Leben so viel einfacher machen wird. Wenn Sie keine monatliche Gebühr zahlen, zahlen Sie zwischen 3 und 5 US-Dollar pro Test, was sich schnell summieren kann.
Ich denke, dass es gut ist, mit einer leeren Tafel zu beginnen. Frameworks wie die HTML Email Boilerplate stecken voller wunderbarer Tricks und Snippets, die Sie Stück für Stück implementieren können. Wenn Sie jedoch gerade erst anfangen, empfehle ich nicht, es als Ausgangspunkt zu verwenden, da es viele Elemente enthält, die Sie nicht benötigen. Schnellstartplatten können die Behebung von Problemen häufig erschweren, wenn in Ihrer Datei viel ungenutzter Code vorhanden ist.
Hinweis: Da die Verwendung eines beliebigen Editors (insbesondere bei der Fehlerbehebung) sehr bedenklich sein kann, sollten Sie niemals einen WYSIWYG-Editor oder einen Editor verwenden, der verspricht, Ihr formatiertes Design als gültiges HTML für das Versenden per E-Mail zu verwenden . Das Zeug funktioniert einfach nie.
Dies mag wie ein technisches Detail erscheinen, aber Sie benötigen eine leere Vorlage, um mit der Arbeit zu beginnen, und diese Vorlage benötigt einen Doctype. Ein Doctype ist im Wesentlichen eine Codezeile, die dem Programm mitteilt, welche HTML-Tags zu erwarten sind und welchen Regeln sich HTML und CSS bedienen. Nicht wenige Kunden entfernen Ihren Doctype, und einige wenden sogar ihren eigenen an. Viele Kunden respektieren Ihren Doctype und es kann die Dinge wesentlich einfacher machen, wenn Sie ständig gegen einen Doctype validieren können.
Die Verwendung eines XHTML-Doctype hat im Allgemeinen die geringsten Macken und Inkonsistenzen zwischen Dokumenten. Ich verwende XHTML 1.0 Transitional, weil es sich als der zuverlässigste Doctype meiner Erfahrung erwiesen hat. In dem folgenden Tutorial, in dem wir eine vollständige HTML-E-Mail-Vorlage erstellen, verwenden wir den folgenden Code, um unser Dokument zu starten:
Entmystifizierung von E-Mail-Design
Das Inhaltstyp Meta-Tag gibt der Ziel-Rendering-Engine an, wie Text und Sonderzeichen verarbeitet werden sollen. In der Realität müssen Sie alle Ihre Sonderzeichen sowieso kodieren (z. B. & wird & für kaufmännisches Und), um sicher zu sein, aber es lohnt sich, diese Zeile dort beizubehalten.
Das Viewport-Meta-Tag weist das Gerät an, den sichtbaren Bereich auf die Bildschirmbreite des Geräts einzustellen. Außerdem wird die anfängliche Skala auf "normal" gesetzt, wobei weder vergrößert noch verkleinert wird. Wenn Sie dies nicht angeben, können viele Smartphones Ihren Inhalt so verkleinern, dass der Inhalt in den sichtbaren Bereich passt, nicht aber die Auffüllung oder Ränder. Dies kann dazu führen, dass Text und Bilder bis an den Bildschirmrand stoßen.
Geben Sie schließlich immer einen aussagekräftigen Titel ein, denn dies wird den Benutzern angezeigt, wenn sie die E-Mail in einem Browser anzeigen oder mit ihren Freunden teilen.
Aufgrund der fehlenden Unterstützung für Standards in E-Mail können keine Divs, Abschnitte oder Artikel verwendet werden. Stattdessen müssen Sie Tabellen verwenden. Darüber hinaus müssen Sie viele und viele geschachtelte Tabellen verwenden, da keine der Colspan Noch Rowspan Attribute werden ordnungsgemäß unterstützt.
Aufgrund der fehlenden Unterstützung von Standards ist es auch keine gute Idee, Standard-Tags wie h1, h2, h3 oder p. Ich finde, dass diese über E-Mail-Clients wirklich uneinheitlich gerendert werden können und ziemlich große Kopfschmerzen verursachen können.
Am besten platzieren Sie jeden Textblock in einer eigenen Zelle und wenden Inline-Stil für diese Zelle an. Beispiel:
Text
Dies ist eher eine persönliche Entscheidung. Ich ziehe es vor, alle meine Stile inline zu halten (dh innerhalb der HTML-Tags selbst), da ich gerne genau weiß, wo alles ist und was sich darauf auswirkt. Sie können mit Styles kodieren und sie am Ende inline ziehen (Campaign Monitor und MailChimp können dies automatisch für Sie tun, Sie können auch Premailer oder etwas Ähnliches verwenden) Wenn Sie Ihren Code durch einen Inliner laufen lassen, kann der Code etwas unkenntlich werden. Ich finde, dass dies die Fehlersuche schwieriger macht. Zu sagen, wenn Sie auf diese Weise arbeiten möchten, ist das in Ordnung. Es gibt keinen technischen Grund, warum Sie es nicht tun sollten.
Vergiss nicht: Sie können nicht mehrere Klassen auf Elemente in HTML-E-Mail anwenden, da dies nicht unterstützt wird. Jedes Element kann maximal eine Klasse haben.
Vergiss auch nicht: Sie können keine Abkürzung für Dinge wie die Schriftgröße (d. H.) Verwenden, da sie nicht unterstützt wird.
Denken Sie beim Speichern von Bildern daran, dass es gut ist, Ihren Bildern kurze und aussagekräftige Namen zu geben, da dies die Spam-Bewertung verbessert. Namen wie "campaign_054_design_0x0_v6_email-link.gif" haben wahrscheinlich einen viel höheren SPAM-Wert als "email.gif"..
Es ist auch eine großartige Idee, zu versuchen, Ihre gesamte E-Mail so klein wie möglich zu halten: Unter 100 KB ist ideal, aber nicht immer möglich, unter 250 KB ist der Standard. Verwenden Sie eine Komprimierungs-App wie JPEGmini oder tinyPNG, um alle Ihre Bilder vor dem Senden so klein wie möglich zu machen. Niedrigere Ladezeiten, insbesondere auf mobilen Geräten, können Ihre E-Mail beschädigen, wenn die Gesamtgröße der Datei zu groß ist.
Überlassen Sie nichts dem E-Mail-Client. Geben Sie alle Ihre Breiten an, da ansonsten unerwartete Ergebnisse auftreten könnten. Legen Sie für Ihre Hauptcontainerelemente immer die Größe in Pixel fest. Sie können dann Prozentsätze innerhalb Ihres übergeordneten Elements verwenden, wenn Sie möchten.
Beim Entwerfen und Entwickeln von HTML-E-Mails muss viel beachtet werden. Bei den meisten davon handelt es sich um "unlernende" Standards, die Sie seit Jahren für Webdesign üben. Dieses Tutorial sollte Ihnen jedoch eine solide Basis bieten, von der aus Sie arbeiten können. Jetzt können Sie in den eigentlichen Build-Prozess einsteigen. Vorwärts!
Ich habe während des Tutorials auf ein paar Dinge verwiesen - hier sind sie wieder an einem Ort.
Accentsconagua