Erstellen von HTML-E-Mails – Tipps und Tricks (Part 3)

Etwas Zeit ist ins Land gegangen, aber nun ist´s wieder soweit: It´s Mail-time again, folks! Abseits trockener Theorie der letzten zwei Teile werden wir uns in diesem Part dem Layout eines (nahezu) semantischen/standardkonformen Templates widmen und dabei vergleichend zur Tabellenmail schielen.

Hat sich eigentlich irgendwas getan?

Kurze Frage und eine noch kürzere Antwort: Nein, alles beim Alten! Während Browser-Hersteller derzeit um den Rang als besten, schnellsten und nicht zuletzt modernsten Client buhlen, hinken die Mails weiter hinterher.

Warum ist das eigentlich so?

Abgesehen von den Sicherheitslücken, die mit der Implementierung neuer Features entstehen würden, ist der E-Mail-Client auch weniger mit herkömmlichen Browsern zu vergleichen, die die Fähigkeit besitzen, ihre Nutzer stundenlang zu fesseln.

Statistisch werden zudem immer weniger auf dem Computer installierte Clients genutzt, sondern eher der bunte Markt der Online-Mail-Space-Anbieter. Ausnahmen stellen hier sicherlich Mail-Programme von Firmen der Internet-Industrie dar.

Aber sobald man das Büro verlassen hat, treten wieder Onkel Google, Tante Yahoo, Cousin AOL, Cousine MSN und die restliche Verwandtschaft in das Leben eines Menschen, der schon zu gestresst ist, den POP3-Server im Mail-Programm einzutippen und sowieso irgendwo in der Tab-Herde des Browsers (z.B.) den Google-Mail-Posteingang blinken hat.

Ehrlich gesagt ist´s ja auch um ein Vielfaches komfortabler, wenn man nur schnell einen Newsletter lesen oder Freunden ein Bild schicken will. Sicherlich kann man sich auch stundenlang darüber aufregen und sich den Kopf zerbrechen. Ändern wird sich nichts, solange nicht die Mail 2.0 erfunden wird ;)

Genug Theorie – Her mit dem Template!

Um uns später Zeit und Nerven zu sparen, habe ich das Template relativ klein und übersichtlich gehalten. Einige werden sich wundern, wo denn die Grafiken geblieben sind. Ich habe vorerst keine verwendet, damit der Fokus auf der korrekten Beschreibung vom Layout ruht.

HTML & CSS Source

Aufgrund der unglaublich schlechten Formatierung aller gängigen Syntax-Highlighter für WordPress habe ich mich dafür entschieden, euch die HTML-Datei als Textdatei bereit zu stellen. Damit hätten wir auch das Problem mit der korrekten Einrückung im Griff ;)

Vorüberlegungen zum Aufbau

Ob ihr, wie im Template em als Maßeinheit für paddings und margins verwendet, oder lieber zu den allseits beliebten Pixeln tendiert, ist komplett irrelevant und in diesem Beispiel lediglich eine Sache der Gewöhnung. Wichtig ist die Tatsache, dass wir in normalen HTML-Webseiten die Möglichkeit haben, Außen- und Innenabstände festzulegen. Bei den E-Mails sieht das Ganze schon etwas gewöhnungsbedürftiger aus.

Aufbau und Abstände des Standard-Templates:

Das schwarze Schaf

Vom Aussehen her kaum zu unterscheiden, erinnert das Markup des fertigen Mail-Templates, welches komplett in eine Tabelle gezwängt wurde, charakteristisch an das typische 90er Jahre-Panzertape-Layout. Wir müssen also viel mit alignments und fixen Größen arbeiten.

Template als Textdatei

Abstände definieren

Der wahrscheinlich größte Unterschied ist Margin & Padding auf welches wir verzichten sollten, das aber durch Pseudozellen mit Höhen- und Breitenangaben ersetzt werden kann. Auch auf die Verwendung von Absätzen, Headlines und Blockelementen sollte verzichtet werden. Hier gehen wir in erster Linie für alle Online-Mail-Dienst-Provider auf Nummer sicher. Google Mail löscht beispielsweise sämtliche <p>´s aus dem Code. Aber für Zeilenumbrüche stehen uns ja noch <br> zur Verfügung oder für mehr Anpassung die Verwendung von Spacer-Zellen mit variabler Höhe.

CSS?!

Ja, aber nur inline und nicht zu speziell. Viele Eigentschaften werden ignoriert oder gelöscht. An dieser Stelle weise ich auf Part 1 & Part 2 der E-Mail-Beitragsreihe und der dort verlinkten Tabelle (Campaign Monitor) hin. Ärgerlich ist vorallem der fehlende Support für absolute Positionierung und die spärliche Integration von Floats. Ebenfalls werden viele Shorthands nicht unterstützt. So schreibt man beispielsweise nicht(!):

<td style="background: #eee"></td>

sondern deklariert gleich doppelt:

<td style="background-color:#eeeeee" bgcolor="#eeeeee"></td>

Kein <head>

Zumindest keiner, in dem essentielle Informationen stehen! Viele Anbieter löschen diesen einfach heraus und da wir sowieso nur Inline-Styles verwenden, ist dieser eigentlich überflüssig. Auf den Doctype können wir ebenfalls verzichten.

Bilder in Mails

Ohje! Ein Thema, welches Michael und mich tagelang beschäftigte, war das Anzeigen von Bildern in E-Mails OHNE die nervige “Externe Grafiken laden”-Bestätigung klicken zu müssen. Glücklicherweise ist das eine vierteilige Reihe von Beiträgen und das Bilder-Thema würde den Rahmen dieses Parts sprengen. Damit dient es als Ausblick auf den bald erscheinenden Part 4, in dem ich dann theorethisch und praktisch auf Grafiken und externe Resourcen in E-Mails eingehen werde. Bis dann!