Sollten Sie überhaupt HTML-E-Mails versenden?
Dies ist sicherlich eine umstrittene Frage, aber letztendlich sage ich: Wenn Sie eine Nachricht haben, von der Sie glauben, dass sie von einem gut gestalteten E-Mail profitieren würde, dann machen Sie es. Wenn Sie es nur tun, weil alle anderen in Ihrer Nachbarschaft es auch tun, dann lassen Sie es. Wenn Sie sich dafür entscheiden, sind dies meiner Meinung nach die fünf goldenen Regeln für HTML-E-Mails
- Senden Sie E-Mails nur an Personen, die dem Empfang zugestimmt haben.
- Stellen Sie sicher, dass Sie sie so gestalten, dass sie in allen E-Mail-Clients bestmöglich aussehen.
- Übertreiben Sie es nicht. Wöchentlich ist wahrscheinlich zu oft.
- Senden Sie eine Nur-Text-Alternative.
- Bieten Sie einen Abmeldelink an und halten Sie ihn ein.
Update: Dieser Artikel ist etwa zehn Jahre alt, während ich dies aktualisiere. Wahrscheinlich keine gute Informationsquelle mehr. Eine gute Informationsquelle zu CSS in HTML-E-Mails ist Campaign Monitors Leitfaden.
SCHREIBEN Sie Ihre E-Mail, bevor Sie sie gestalten
Das Erste, was Sie tun sollten, ist, die Nur-Text-Version Ihrer E-Mail zu schreiben. Wenn Sie dies zuerst tun, während Sie frisch sind, führt dies zu besserem Text, einem besseren Plan für das Design und letztendlich zu einer besseren E-Mail. Sie müssen dies sowieso tun, da eine der goldenen Regeln darin besteht, eine Nur-Text-Alternative zu HTML-E-Mails zu senden. Das gleichzeitige Senden einer Nur-Text- und einer HTML-E-Mail in einer kombinierten E-Mail wird als Multipart/Alternative-E-Mail-Format bezeichnet, oder MIME. Die meisten E-Mail-Clients unterstützen dies, es ist das, was erscheint und Sie fragt, ob Sie es als Nur-Text, HTML oder beides senden möchten, wie auf diesem Screenshot von Thunderbird
Ein paar schnelle Tipps für Ihre Nur-Text-E-Mail: Zeilenumbrüche bei 60 Zeichen und ausschreiben von vollständigen URLs anstelle von Anker-Tags.
Gestalten Sie zuerst für den kleinsten gemeinsamen Nenner.
Nachdem die Nur-Text-Version Ihrer E-Mail fertig ist, denken Sie über das Design nach. Jeder einzelne E-Mail-Client, der Ihre E-Mail liest, hat seine eigenen Regeln für die Behandlung von HTML-E-Mails, daher müssen Sie für den kleinsten gemeinsamen Nenner gestalten. Denken Sie, dass es mühsam ist, Websites in 4-5 verschiedenen Browsern zu testen? Mit E-Mails ist es viel schlimmer. Hier ist eine Teilliste: AOL (mehrere Versionen), Comcast, Earthlink, Gmail, Hotmail, Lotus Notes, Mail.com, Outlook (mehrere Versionen), Thunderbird, Windows Live, Yahoo!, Mail.app. Ganz zu schweigen von mobilen Clients.
Angenommen, Sie versenden an eine ziemlich große Liste und haben keine Ahnung, welche E-Mail-Clients Ihre Empfänger verwenden, müssen Sie mehr darüber nachdenken, was Sie nicht tun können, als was Sie tun können.
Was Sie NICHT tun können
- Fügen Sie einen
<head>-Abschnitt mit<style>ein. Apple Mail.app unterstützt dies, aber Gmail und Hotmail nicht, daher ist es ein No-Go. Hotmail unterstützt einen Style-Abschnitt im Body, aber Gmail immer noch nicht. UPDATE: Im Jahr 2020 wird dies wesentlich besser unterstützt. - Verlinken Sie auf ein externes Stylesheet. Nicht viele E-Mail-Clients unterstützen dies, am besten vergessen Sie es einfach.
- Hintergrundbild / Hintergrundposition. Gmail ist auch der Schuldige bei diesem.
- Bereinigen Sie Ihre Floats. Gmail wieder.
- Margin. Ja, ernsthaft, Hotmail ignoriert Margins. Im Grunde funktioniert jede CSS-Positionierung überhaupt nicht.
- Schriftart-alles. Wahrscheinlich wird Eudora alles ignorieren, was Sie mit Schriften deklarieren möchten.
Es gibt noch einige weitere Dinge, die Sie beachten sollten. Für eine großartige vollständige Liste dessen, was Online-E-Mail-Dienste unterstützen, schauen Sie sich diesen Artikel an.
Was Sie tun KÖNNEN.
In zwei Worten: Inline-Styles. Es ist nicht so schlimm, wie Sie vielleicht denken, da wir im Grunde eine einmalige E-Mail entwickeln, sind Inline-Styles nicht annähernd so verwerflich wie die Verwendung auf einer Website. Benötigen Sie einen großen grünen Titel für einen Textblock?
JETZT 159 €
- Das große Machbare sind Bilder. Denken Sie kreativ darüber nach, was Sie mit Bildern machen können.
- Da Sie Tabellen verwenden werden, denken Sie gitterförmig. Gitter sind Freunde von Designern, es gibt viel, was Sie mit einem Gitter machen können.
Tabellen sind immer noch der Standard.
Werfen Sie einen Blick auf den Code fast jeder HTML-E-Mail, die Sie erhalten haben. Ich wette, sie ist mit einer Tabelle formatiert. Tabellen sind immer noch der beste Weg, um konsistente Ergebnisse über E-Mail-Clients hinweg zu erzielen. Das E-Mail-Äquivalent des Browserfensters ist die "Viewport", oder der Bereich in einem E-Mail-Client, der zum Anzeigen der eigentlichen E-Mail dient. Dies variiert ziemlich stark. Eine weit verbreitete Technik ist, eine Tabelle mit 100 % Breite zu setzen, mit einer darin verschachtelten Tabelle, die zentriert ist und eine feste Breite hat. Dies scheint sehr gut zu funktionieren. Die äußere Tabelle ist auch Ihre große Chance, die Hintergrundfarbe für die gesamte E-Mail festzulegen. Schade, dass wir nicht einfach eine Div mit automatischen linken und rechten Rändern zur Zentrierung verwenden können, aber es funktioniert in den meisten E-Mail-Clients nicht.
Hilfe!
Wenn Sie sich nicht mit all diesen unschönen Inline-Styles herumschlagen möchten, die Ihren Code durcheinanderbringen, und mit all den kleinen Regeln, was funktioniert und was nicht, dann machen Sie sich keine Sorgen! Es gibt einen wirklich schönen (und kostenlosen) Preflight-Service namens Premailer. Mit Premailer gestalten Sie Ihre E-Mail einfach wie eine Webseite (denken Sie immer noch an Tabellen) und reichen dann Ihre URL ein. Premailer analysiert das HTML und konvertiert alle Ihre Styles automatisch in Inline-Styles, und gibt Ihnen eine Liste von CSS-Warnungen zu Dingen, die Sie tun, die gefährlich sein könnten und für welche E-Mail-Clients sie gefährlich sind. Praktisch!
Es gibt auch Full-Service-Anbieter für HTML-E-Mail-Marketing. Am bekanntesten ist MailChimp. Mit MailChimp gestalten Sie Ihre E-Mails direkt in deren Web-Editor. Sie haben immer noch eine gute Kontrolle, die vorgefertigte Vorlage ist ziemlich nett, und MailChimp tut alles Mögliche, um sicherzustellen, dass die E-Mail in allen E-Mail-Clients bestmöglich aussieht. Allein das ist den angemessenen Preis wert (30 $/Monat für Listen bis zu 2.500 und je nachdem auch mehr oder weniger). MailChimp bietet aber noch mehr, einen Service, der fast unbezahlbar ist: die Verwaltung Ihrer Listen für Sie. Sie erhalten eine anpassbare Webseite, auf die Sie Leute schicken können, um sich für Ihre E-Mails anzumelden, die sie automatisch zu Ihrer Liste hinzufügt. Noch besser, sie kümmern sich auch automatisch um Abmeldungen. Beides kann für Sie so transparent sein, wie Sie möchten. Statistiken zu Ihren E-Mails werden bereitgestellt.
Es gibt eine kostenlose Testversion des Dienstes. Selbst wenn Sie den Dienst am Ende nie wirklich nutzen, sollten Sie sich das Ressourcen-Center von MailChimp ansehen. Sie haben TONNEN nützlicher Informationen über E-Mail-Marketing, technische Informationen und Design-Tipps. Sie bieten sogar eine völlig kostenlose 64-seitige PDF-Datei mit dem Titel Designing, Coding, and Delivering HTML Email: A Beginner’s Survival Guide an, die ein großartiger Ort ist, um mit dem Verständnis dieser Dinge zu beginnen.
Schnelle Tipps!
- Denken Sie daran, vollständige Pfade zu Bildern zu verwenden, keine relativen Pfade. (z. B. http://www.ihrserver.com/email/images/logo.gif). Verlinken Sie auch Bilder von Ihrem eigenen Server, nicht von anderen.
- Prüfen Sie bei Ihrem ISP, bevor Sie Tausende und Abertausende von E-Mails versenden, sie könnten Sie für einen Spammer halten.
- Testen, testen und testen Sie erneut mit so vielen verschiedenen E-Mail-Clients, wie Sie nur irgendwie erreichen können. Sie werden definitiv die wichtigsten Online-Clients wie Gmail, Yahoo und Hotmail testen wollen, aber auch unbedingt Outlook, Mail.app und so viele andere Desktop-Clients wie möglich.
- Gehen Sie nicht über 600px Breite. Selbst das ist schon grenzwertig. Wenn Ihr Design es zulässt, sind 440px näher am Ideal.
- Betrachten Sie jegliches zusätzliche CSS, das Sie verwenden könnten, als Aufwärtskompatibilität. Sie können immer etwas Header-Style-CSS einfügen, wenn Sie möchten, aber betrachten Sie es als Bonus für Leute, die E-Mail-Clients verwenden, die es unterstützen. Schalten Sie es dann vollständig aus und stellen Sie sicher, dass das Design immer noch Sinn ergibt.
- Versuchen Sie, nicht wie SPAM auszusehen. Ziemlich offensichtlich, aber gutes Coding und ehrlicher Text sollten Sie hier aus dem Verkehr ziehen. Ihre HTML-E-Mail ist definitiv NICHT der richtige Ort für einen Viagra-Witz.
- Genau wie im Webdesign schadet es nicht, an den oberen Rand zu denken. Das bedeutet, was die Benutzer sehen, bevor sie scrollen müssen.
- Nutzen Sie Ihren Footer wie einen Footer. Dies ist ein großartiger Ort für viele Dinge, einschließlich Telefonnummern und Adressen, Informationen über uns, Abmeldeoptionen und vielleicht eine kleine Erinnerung daran, was diese E-Mail ist und warum der Leser auf der Liste steht.
- HALTEN SIE DAS GESETZ. Der CAN-SPAM Act trat am 1. Januar 2004 in Kraft. Er besagt, dass Sie als gewerblicher E-Mail-Versender viele Dinge tun müssen. Die wichtigsten Punkte sind im Grunde: Seien Sie nicht irreführend, und Sie MÜSSEN eine physische Postanschrift sowie einen funktionierenden Abmeldelink angeben.
Beispiele.
All diese sind meiner Meinung nach recht effektive Beispiele. Papa John's ist ein Übeltäter für viel zu häufiges E-Mailen, aber ihre E-Mails sind normalerweise ziemlich verlockend.
Viel Glück!
Ich würde wahrscheinlich in die Schnellen Tipps aufnehmen, dass Sie beim Verwenden von Bildern unbedingt Alt-Tags verwenden sollten. Ich weiß, dass in Gmail und Outlook, es sei denn, Sie sind eine vertrauenswürdige Quelle, die Bilder nicht angezeigt werden, bis Sie sagen, dass sie angezeigt werden sollen. Daher haben Sie höchstwahrscheinlich eine leere Stelle und wenn es nichts gibt, das den Benutzer fesselt, wird er einfach löschen.
Das ist ein super guter Punkt und sehr wichtig, Benjamin. Da du der erste Kommentator bist, denke ich, dass die Leute ihn lesen werden und ich lasse den Beitrag so stehen.
Besser Sie aktualisieren den Beitrag und schreiben ihm die Anerkennung zu, mit einem Link, der zu seinem Kommentar springt :)
Das stimmt, was Sie über Bilder gesagt haben, aber was ist mit dem Anhängen dieser Bilder an eine E-Mail? Angehängte Bilder werden von Gmail und Thunderbird automatisch angezeigt (ich weiß nicht, wie es bei anderen MUAs ist).
Guter Artikel, Chris, besonders die Betonung darauf, auf den kleinsten gemeinsamen Nenner abzuzielen. Leider machen E-Mail-Clients wie Outlook 2007 und Gmail rein CSS-basierte E-Mails fast unmöglich, aber wenn Sie sich ein wenig mit CSS beschäftigen, habe ich getestet, was in allen gängigen E-Mail-Clients unterstützt wird.
@Dave Greiner: Toller Link, danke! Sehr umfassende Recherche dort. Die von Ihnen bereitgestellte PDF ist besonders praktisch.
Ich entwickle seit etwa einem Jahr HTML-E-Mails als Beruf, daher kann ich sagen, dass hier einige ziemlich gute Ratschläge enthalten sind. Ich habe damit angefangen, sauberen, tabellenlosen Code zu schreiben, und lassen Sie mich Ihnen sagen: Es ist den Aufwand nicht wert. Verwenden Sie Tabellen. Verwenden Sie sie nirgendwo sonst, aber verwenden Sie sie in E-Mails.
Und ich möchte betonen: An den oberen Rand zu denken ist sehr kritisch ... und Sie haben nicht so viel Platz über dem oberen Rand, wie Sie vielleicht denken. Denken Sie daran, dass viele Leute sich auf Vorschaufenster verlassen, um ihre E-Mail anzuzeigen ... oder bedenken Sie, wie viele Anzeigen Yahoo über jeder eingehenden Nachricht platziert. Sie arbeiten mit etwa 300 nutzbaren Pixeln oberhalb des oberen Rands.
Ich weiß, dass dieser Beitrag alt ist, aber ich wollte darauf antworten, falls jemand Ihren Kommentar liest. Nur weil tabellenlose Layouts der "neue" Standard sind, heißt das nicht, dass Tabellen keine Rolle mehr spielen.
Es gibt 1 Fall, in dem Sie unbedingt jedes Mal eine Tabelle verwenden sollten ... und ich bin überrascht, wie oft unerfahrene Designer das nicht tun. Verwenden Sie eine Tabelle, wenn Sie tabellarische Daten anzeigen möchten!!!!!! Bitte!!!! Emulieren Sie keine Tabelle mit Divs!!!!
Okay, 2 Cents zu einem Kommentar beigesteuert, der wahrscheinlich nicht gelesen wird ... aber hey, ich habe ihn gelesen.
Toller Artikel darüber, wie man großartige HTML-E-Mails erstellt
Aaarrrrgggghhhhh, ich hasse HTML-E-Mails...
ABER ja, sie haben ihren Platz. Der beste Tipp, den ich kenne, ist, einfache HTML-E-Mails zu erstellen, KISS (Keep It Simple, Stupid)
Schauen Sie sich den Emogrifier an, ein PHP-Dienstprogramm, das wir entwickelt haben und das HTML & CSS in Gmail-freundliche E-Mails umwandelt. Sie können ihn auf der Webseite verwenden oder den PHP-Code für Ihre Anwendung herunterladen. Wir haben uns entschieden, ihn Open Source zu machen, um Entwicklern wie uns zu helfen, die Schwierigkeiten hatten, E-Mails in Gmail richtig aussehen zu lassen.
GMail, warum hast du uns verlassen?!
Ich habe auch endlich einen CSS-zu-Inline-Konverter veröffentlicht, der eine ausgewogene Lösung sein könnte. Er ist als Webformular oder als PHP-Skript erhältlich, das Sie herunterladen können. Ich wollte ihn aber noch nicht Open Source machen!
Er ist einfacher als Premailer und leistungsfähiger als Emogrifier. Er nimmt nur Ihr CSS und HTML und gibt Ihren neuen Code aus. Er berücksichtigt auch mehrere CSS-Regeln (kommagetrennt), Reihenfolge und Priorität.
Probieren Sie die voll funktionsfähige Testversion für 1 $ aus.
Wir senden Benachrichtigungs-E-Mails an Kunden, und in dieser E-Mail möchten wir eine Schaltfläche zum Erweitern und Zusammenklappen haben und basierend auf dem Klick Text anzeigen. Ist das mit Stilen möglich? Bitte tun Sie das Notwendige.
Danke.
Einige Browser und E-Mail-Clients (browserbasiert und Desktop-basiert) unterstützen Ihre Anforderungen unterschiedlich.
Da Sie Pseudoselektoren benötigen würden, um das gewünschte Ergebnis zu erzielen, wäre die Unterstützung lückenhaft, hauptsächlich weil Pseudoselektoren innerhalb eines Blocks oder eines definierten Stylesheets deklariert werden müssen.
Klicken Sie auf meinen Namen in diesem Kommentar, um meinen Blog zu besuchen und mir eine Nachricht zu senden, wenn Sie weitere Informationen wünschen.
Es hat eine Weile gedauert, bis ich diese Seite mit unterstützten CSS-Stilen in E-Mail-Browsern gefunden habe
http://www.campaignmonitor.com/css/