HTML-Mail Teil I

HTML-Mail

Schon seit langer Zeit können Mail-Programme mit HTML umgehen. Damit ist es möglich, Mails nicht nur als reinen Text, sondern auch wie die eigene Web-Seite gestaltet zu versenden. Der Vorteil: der Look&Feel der Mail kann an das Design der Site angepasst werden, es entsteht ein Wiedererkennungswert, eine durchgehende Identität, heute Corporate Identity genannt. Wenn dann Newsletter verschickt werden, so wie bei Lidl oder beim Otto-Versand, wechselt das Bild beim Anclicken von Links in die eigene Site nicht, es bleibt ein konsistentes Eindruck im Design, was für ein professionelles Auftreten nicht unerheblich ist.

Die meisten Mail-Programme erlauben schon lange das Verfassen von Mail mit Formattierung in HTML, allerdings ohne direkte Gestaltungsmöglichkeiten, sie verpacken lediglich den Text in einem HTML-Rahmen. Um „richtige“ HTML-Mails zu erzeugen, kommen entsprechende Tools wie Adobe Dreamweaver zum Einsatz, es wird in der eigenen WebSite eine Seite gestaltet, die dann als Vorlage für die zu versendenden Mails dient. Eventuelle Bilder müssen in der Site liegen, Links müssen eine vollständige URL haben, damit sie beim Empfänger auch erreichbar sind. Hat man es geschafft, diese Mail zu verschicken, könnte kurze Zeit später von jemandem die Frage kommen, warum man ihm so ein kryptisches Zeugs geschickt hat. In der Regel nutzt dieser Jemand MS Outlook, und man fragt sich, warum das denn jetzt nicht funktioniert hat.

In diesem ersten Artikel also ein Rahmen, wie man solche HTML-Mails erzeugt und wie sie dann auch von Outlook-Nutzern gesehen wie gesendet ankommen. Um das tatsächliche Versenden geht es dann im zweiten Teil.

Aufbau des HTML-Codes

Die zu versendende Mail wird wie eine normale Seite aufbereitet, man sollte allerdings bei der Größengestaltung daran denken, dass eine Mail nicht immer an einem großen Monitor erscheint und daher die Mail schmaler gehalten werden sollte. Bilder etc. werden wie gewohnt eingebettet, müssen hier aber eine vollständige URL haben, sonst bekommt der Mail-Client auf der Empfängerseite diese Bilder nicht mit. Ansonsten bildet man das Design seiner Website möglichst genau nach, dort, wo dann als Webseite der Content steht, kommt später der Mail-Inhalt dazu. Für meine Site sähe das Mail-Template dann etwa so aus. Nicht vergessen sollte man direkt am Anfang, möglichst wenig formattiert, einen Link auf eine Online-Version der Mail, die dann in der eigenen Site steht.

Nun gibt es da ein paar Stolperfallen, die ich erst durch Puzzlelei heraus gefunden habe. Eine davon ist, dass viele Mail-Clients zwar das Nachladen von Bildern in Mails erlauben, aber nicht den Zugriff auf externe CSS-Dateien. Daher muss das komplette CSS bereits in der HTML-Datei mit eingebettet sein, ein externes CSS wird in der Regel ignoriert, und das nicht nur von Outlook. JavaScript ist nicht möglich, nur der Mail-Client Mozilla Thunderbird hat einen Firefox intern, der auch JavaScript ausführt.

Ein weiterer Trick ist, dass sowohl CSS- wie auch HTML-Formattierungen von Mail-Programmen sehr unterschiedlich interpretiert werden. Je weiter die Programme von Open Source entfernt sind, desto eigenwilliger diese Interpretation. Der Gipfel ist …

Outlook

Als ich meinen ersten HTML-Newsletter fertig hatte, so in HTML und CSS codiert wie gewohnt, sah das Ergebnis in Thunderbird auch fast wie gewünscht aus. Sogar in Outlook 2003 waren nur geringe Abweichungen zu sehen. In Outlook 2007 allerdings kam nur Schrott an, die Mail war fast nicht mehr lesbar. Sie war nicht mehr lesbar. Warum? Lange musste ich nicht forschen.

Bis Outlook 2003 war Outlook innerlich zwiespältig. Das Erstellen von HTML-Mails erfolgte mit Komponenten von Winword, das Rendern – Umsetzen von HTML in Grafik – aber mit Komponenten des Internet Explorers. Daher war das, was man in Outlook 2003 schickte, schon nie das, was Outlook 2003 dann anzeigte. Um diese Diskrepanz zu beheben, machte Microsoft etwas, was mit dem Ausschneiden eines Loches in der Hose vergleichbar ist: ab Outlook 2007 werden HTML-Mails nicht nur mit Winword geschrieben, sondern auch empfangene Mails in HTML von Winword gerendert. Da die HTML-Fähigkeiten von Winword eher rudimentär sind, konnte Outlook 2007 mit meinen Divisions und umfangreichen CSS-Formattierungen gar nichts mehr anfangen. Und so sah das Ergebnis auch aus.

Abhilfe konnte also nur sein, lediglich soviel HTML und CSS zu verwenden, dass Winword es noch versteht. Wenigstens hilfreich dabei ist, dass Microsoft die HTML-Fähigkeiten von Winword in diesem und einem zweiten Dokument aufgelistet hat. So musste ich einen Schritt zurück machen, weg von modernem CSS und HTML und zurück zu Tabellen. Denn Tabellen sind das Einzige, was Winword halbwegs versteht.

Das Resultat

Dieses Mail-Template arbeitet nun wieder mit Tabellen, und mit etwas Mühe und Probieren ist es auch mit Tabellen möglich, einigermaßen ein Layout zu realisieren. Hier ist einmal der HTML-Quellcode, jedoch gibt es auch darin Workarounds. So kann Winword keine Images vernünftig formattieren, daher wird für den Rahmen um Bilder einmal CSS verwendet, für Outlook ist ein vspace=“5″ im Tag erforderlich.

Dieser HTML-Code ist nun für alle Mail-Clients einigermaßen kompatibel.

Fazit

Zuerst scheint es eher übersichtlich zu sein, HTML-Mails zu verschicken. Tatsächlich stolpert man von einem Problem zum anderen und hat rasch einige Stunden verbracht, bis auch Outlook die Mail in etwa so anzeigt wie gewünscht. Vielleicht gibt mein Beispiel etwas Hilfe.

Im zweiten Teil geht es dann darum, wie man nun die HTML-Seite als Mail vor die Tür bekommt, denn direkte Eingabe von HTML erlaubt praktisch kein Mail-Client. Außer Thunderbird.