Verwenden Sie HTML, um eine einfache E-Mail-Vorlage zu schreiben

Heute möchte ich über ein „Low-Tech“-Problem schreiben.

Übrigens abonniere ich ziemlich viele Newsletter, zum Beispiel JavaScript Weekly. Erhalten Sie wöchentlich eine E-Mail mit den wichtigsten Neuigkeiten der Woche.

Eines Tages dachte ich: Könnte ich auch eine solche E-Mail verfassen?

Dann wurde mir klar, dass es nicht so einfach war. Wenn man von der Backend- und Bearbeitungsarbeit absieht, erfordert allein das Entwerfen einer E-Mail-Vorlage viel Überlegung.

Da es sich bei dieser formatierten E-Mail tatsächlich um eine Webseite handelt, lautet der offizielle Name „HTML-E-Mail“. Ob eine korrekte Darstellung möglich ist, hängt ganz vom verwendeten E-Mail-Client ab. Die meisten E-Mail-Clients (wie Outlook und Gmail) filtern HTML-Einstellungen, wodurch E-Mails nicht mehr erkennbar sind.

Ich habe herausgefunden, dass der Trick beim Schreiben von HTML-E-Mails darin besteht, dieselben Methoden zu verwenden, die vor 15 Jahren zum Erstellen von Webseiten verwendet wurden. Hier ist der Schreibleitfaden, den ich zusammengestellt habe.

1. Dokumenttyp

Der derzeit kompatibelste Doctype ist XHTML 1.0 Strict. Tatsächlich löschen Gmail und Hotmail Ihren Doctype und ersetzen ihn durch diesen Doctype.

Die Verwendung dieses Doctypes bedeutet, dass die HTML5-Syntax nicht verwendet werden kann.

2. Layout

Das Layout einer Webseite muss eine Tabelle verwenden. Platzieren Sie zunächst einen großen Außentisch als Hintergrund.

Die Rahmeneigenschaft der Tabelle ist gleich 1, was der Vereinfachung der Entwicklung dient. Setzen Sie diese Eigenschaft bei offizieller Veröffentlichung auf 0.

Platzieren Sie den zweiten Tisch auf der inneren Ebene. Wird verwendet, um Inhalte anzuzeigen. Um zu verhindern, dass die zweite Tabelle die Anzeigebreite des Clients überschreitet, wird die Breite auf 600 Pixel festgelegt.

Legen Sie so viele Zeilen fest, wie der E-Mail-Inhalt hat.

3. Bilder

Als externe Ressourcen dürfen nur Bilder zitiert werden. Auf andere externe Ressourcen wie Stylesheet-Dateien, Schriftdateien, Videodateien usw. kann überhaupt nicht verwiesen werden.

Einige Clients fügen Bildlinks Rahmen hinzu, die Sie entfernen müssen.

Zu beachten ist, dass viele Clients standardmäßig keine Bilder anzeigen (z. B. Gmail). Stellen Sie daher sicher, dass der Hauptinhalt auch ohne Bilder lesbar ist.

4. Inline-Stile

Alle CSS-Regeln werden am besten inline verwendet. Denn der im Header der Webseite platzierte Stil besteht die Gefahr, dass er vom Client gelöscht wird. Informationen zur Client-Unterstützung für CSS-Regeln finden Sie hier.

Verwenden Sie außerdem keine CSS-Abkürzungen, da diese von einigen Clients nicht unterstützt werden. Anstatt beispielsweise zu schreiben:

Wenn Sie ausdrücken möchten

Um es so zu schreiben:

5. W3C-Validierungs- und Testtools

Um sicherzustellen, dass der endgültige Code die W3C-Prüfung besteht, da einige Clients nicht qualifizierte Attribute entfernen. Nutzen Sie auch die Testtools (1, 2, 3), um die Anzeigeergebnisse auf verschiedenen Clients anzuzeigen.

Beachten Sie beim Senden von HTML-E-Mails, dass der MIME-Typ nicht verwendet werden kann

Verwenden Sie stattdessen

Erwägen Sie als Versandtools die Verwendung von MailChimp und Campaign Monitor.

6. Vorlagen

Es ist eine gute Idee, Vorlagen zu verwenden, die andere bereits erstellt haben (hier und hier). Im Internet finden Sie noch mehr.

Wenn Sie Ihr eigenes E-Mail-Skript entwickeln möchten, können Sie auf HTML Email Boilerplate und Emailology zurückgreifen.