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

Wie wir nun im ersten Teil erfahren durften, ist das Erstellen von HTML-Mails nicht ganz so einfach. Damit man nicht in der Praxis mit den Schwierigkeiten zu kämpfen hat, die oftmals schon in der Theorie vorhergesagt werden, gibt es in diesem zweiten Part zwei weitere Regeln und einige nützliche Tools.

Die fünfte Regel: Erreiche deine Nutzer.
Jeden von uns erreichen täglich viele Mails von den unterschiedlichsten Quellen.
Ein Großteil davon wird oftmals schnell und ungelesen in den Papierkorb verschoben, weil der Titel und der Inhalt nicht präzise und schnell genug beim Leser angekommen sind und kein Interesse ausgelöst haben.

Damit deine E-Mail in dieser Informationsflut nicht untergeht, sollte der Titel aussagekräftig sein und eine persönliche Ansprache sowie Dinge enthalten, die den Leser wirklich interessieren. Es gilt hierbei im Grunde genommen das Gleiche wie bei herkömmlichen Websites: Markante Headlines, kurze leichte verständliche Sätze, eventuell hübsch dekoriert mit einem kleinen Bildchen. Achte aber hier darauf, dass dieses nicht so groß sein darf, weil es auch Menschen in deiner Zielgruppe geben wird, die mobile Clients verwenden, die bei weitem nicht an die Geschwindigkeit eines DSL’s bzw. nicht an die Dimensionen eines normalen Monitors herankommen.

Die sechste Regel: Kenne die Grenzen.
Der folgende Guide von Campaign Monitor übermittelt die Optionen bei der Gestaltung mit CSS relativ deutlich. Dieser erschließt zwar nicht das komplette Feld der Clients (vor allem deutsche Freemail-Provider bleiben außen vor), er gibt  aber einen Überblick über das, was allgemein möglich ist. Das Augenmerk liegt hier vor allem auf den mobilen Clients, die sich doch relativ schwer mit der Anzeige von HTML-Mails tun. Als einziger Freund unserer Mails wird sich das iPhone entpuppen, welches fast alle CSS-Eigenschaften unterstützt.

In den nächsten Parts werde ich wieder auf diesen Guide verweisen. Dabei wird deutlich werden, dass es schier unmöglich ist, eine einheitliche Anzeige für alle Clients zu ermöglichen, weil wir in diesem Sinne keine Möglichkeit für Hacks haben. Wir müssen also wohl oder übel einige Clients ausschließen, oder sagen wir… vernachlässigen. Wen und was wir da außen vor lassen, bleibt deine Entscheidung, die sich anhand der Zielgruppe ausrichtet.

Tools und Hilfsmittel
Da wir uns nicht mehr in den 90ern befinden und sich mittlerweile einige kluge Köpfe zusammengesetzt haben, um dem Schrecken mit HTML-E-Mails mit einigen nützlichen Tools ein Ende zu bereiten, werden auch wir einige dieser Tools durchgehen. Da kann jeder für sich entscheiden, welches er bevorzugt.

Word-Wrap, nein danke!
In fast allen handelsüblichen Editoren gibt es die Möglichkeit, den automatischen Word-Wrap (Zeilenumbruch) um-/auszuschalten. Das sollten wir tun, denn die Inline-Styles erreichen Dimensionen, die nicht mal ein 30″ Bildschirm anzeigen kann.

Zen Coding Plugin: Nützliche Massenerstellung
Ein cooles Plugin für coole Editoren, welches mit einer speziellen Syntax aufwartet, die es uns ermöglicht, ohne großen Aufwand riesige Tabellenwände zu erstellen.

CSS Inline Styler: Online Tool mit einigen Macken
Der Inline-Styler bietet die fantastische Möglichkeit, unseren tr’s und td’s weiterhin Klassen und IDs zu geben. Er wandelt diese dann nach einem Klick in Inline-Styles um. Dies funktioniert auch mit verschachtelten Elementen. Mails können damit vorerst im Browser entwickelt und getestet werden.
So bietet es sich an, das Layout zu entwickeln und dieses durch den Inline-Styler neu generieren zu lassen und dann kleinere Dinge, wie die Gestaltung von Text manuell hinzuzufügen. Aber Vorsicht: Dieser Zerstört die Formatierung und löscht die essentiellen  ’s aus leeren Zellen.

In Part 3 werden wir das erste Mal eine eigene kleine Mail konzipieren und teilweise umsetzen. Ich werde auch auf die einzelnen Provider und Clients eingehen, die einem hier teilweise das Leben sehr schwer machen.

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