Was ist der beste Weg, um einen HTML-E-Mail-Newsletter (wie SO Newsletter) ohne externe CSS zu formatieren?

Question

Ich versuche, einen HTML-E-Mail-Newsletter (ähnlich Stackexchange Newsletter) zusammenzustellen und versuchen, die beste Vorgehensweise für das Layout herauszufinden, keine Möglichkeit, externe CSS aufzunehmen. Gibt es eine bessere Lösung, als einfach eine ganze Reihe von CSS in divs, Tabellen usw. zu verschieben?

Auch sicherstellen möchten, dass es sichtbar/rendering auf so viele E-Mail-Clients wie möglich.

Answer 1

Codierung HTML-E-Mail-Vorlagen ist ein völliges Minenfeld. Dies ist im Wesentlichen auf die fehlende Unterstützung von CSS durch E-Mail-Clients zurückzuführen, wobei der schlechteste Täter MS Outlook which uses Word to render the code ist.

Am besten folgen Sie den bewährten E-Mail-Design-Ressourcen wie den von Campaign Monitor, MailChimp und Email on Acid, um nur einige zu nennen. Diese alle empfehlen Design auf den kleinsten gemeinsamen Nenner, der etwas wie Outlook 2003 sein kann, das die Dinge ziemlich fies aussehen lässt, wenn Sie nicht vorsichtig sind. This guide for what CSS works and what doesn't work ist wirklich praktisch.

Mein Rat ist zu versuchen, es wirklich einfach zu halten und darauf vorbereitet zu sein, das Layout ziemlich unterschiedlich über verschiedene E-Mail-Clients mit unerwarteten Padding, Marge, Text ändern Farbe, etc., es sei denn, Sie sind bereit, umfangreiche Tests zu tun die Käfer ausbügeln.

Answer 2

Ich habe verwendet Aktion Mailer

http://www.nuget.org/packages/ActionMailer/

Diese dann bedeutet, dass Sie mit allen normalen Razor-Syntax und CSS-Stile etc eine normale Ansicht erstellen und es sendet es HTML alles für Sie kümmern. Jetzt auf einigen Seiten verwendet und es ist sehr, sehr gut und am besten von allen frei.

Klippe.

Answer 3

Es ist wirklich nicht schlecht, wenn du weißt, was du tust. Sie müssen in der Lage sein, mit HTML/CSS relativ einfach zu codieren. Dann müssen Sie nur den Richtlinien folgen und wissen, was funktioniert und was nicht, und dann TEST TEST TEST.

Dinge im Auge zu behalten:

1. Verwenden Tabellen für das Layout
2. Bleiben Sie weg von erweiterte CSS z kennzeichnet box-shadow, position: fixed, negativen Margen, benutzerdefinierte Schriftarten
3. suchen und finden, was Kunden unterstützen, was CSS und Design um diese
4. Haltungsart Filter Geist Spam, nicht zu viele Bilder verwenden, und bleiben weg von Worte wie „viagra“ oder „Promotion“
5. versuchen Sie nicht, Bilder zu befestigen, um sie zu Ihrem Web-Host laden und dauerhafte Verbindungen für Bilder
6. Geben Klartext Alternativen für crappy Kunden
7. Stellen Sie sicher, dass die E-Mails senden verwenden von einem geeigneten SMTP-Server ist dies der sicherste Weg (That- und S/MIME-Signierung), um sicherzustellen, dass Sie keine Spam-Filter erhalten. Vermeiden Sie Dinge wie die php mail() -Funktion. Das wird nicht durchkommen.
8. Testen Sie Ihre E-Mails in allen Clients, die Sie von Ihren Benutzern erwarten (insbesondere Webclients wie gmail und yahoo und Outlook for Outlook).
9. NO JAVASCRIPT

In Bezug auf Ihre Frage zu CSS-Formatierung. Sie müssen ALL css inline einbinden, da viele Clients (z. B. gmail) alle style-Tags aus Sicherheitsgründen entfernen (so dass Sie ihre CSS nicht überschreiben können).

Ich würde vorschlagen, dass Sie alle Ihre CSS in einem Style-Tag schreiben und dann ein Inliner-Tool verwenden, bevor Sie senden.

Inline-Tool: http://beaker.mailchimp.com/inline-css

Answer 4

Leider, wenn Sie Ihre eigenen auf Rollen und nicht mit einem Service wie MailChimp gesetzt sind, gibt es wirklich keinen besseren Weg, als alles Auslegen in Tabellen und inline mit CSS - das ist, wenn Sie die Konsistenz zwischen den unzähligen E-Mail-Clients sicherstellen wollen, jeder mit seinem eigenen [und datiert] Rendering.

Ich empfehle die HTML Email Boilerplate - genau wie die HTML5 Boilerplate - die Sie here finden können. Erstens, es ist ein solider Startpunkt, aber am wichtigsten sind seine Kommentare super informativ, zu erklären, warum diese oder jene Klasse angewendet werden muss, um für Hotmail, GMail, Outlook, ..., was auch immer zu korrigieren.

Mit diesem gesagt, nicht, dass Sie um Design-Beratung bitten, aber ich denke, es war das Pew Internet Research Project, das schließlich sagte, dass die meisten E-Mails jetzt von einem Telefon gelesen werden, und es kann Ihre E-Mail-Newsletter mehr machen effektiv, wenn Sie dafür entwerfen: große Art, minimale Krause, einzelne Spalte. Bedenken Sie, dass fast jeder Client standardmäßig verhindert, dass Bilder von E-Mails geladen werden, die vom Nutzer nicht ausdrücklich in die weiße Liste aufgenommen wurden. Daher ist ein tabellenbasierter Inline-CSS-E-Mail-Newsletter möglicherweise nicht so schwerfällig Schmerz zu bauen wie es sonst wäre :).