HTML oder Plain Text E-Mails, was du wissen solltest

- Rückschritt statt Fortschritt

Viel Zeit und Geld wird aufgewendet, um ein klares Corporate Design Entwickeln zu lassen. Auch die Webseite wird nach neusten Standards aufgesetzt und das UX Design straight durchgezogen. Alles darauf Optimiert in den ersten paar Sekunden den Besucher zu fesseln und für sein Produkt zu interessieren. SEO und SEM Optimierungen um eine bestmögliche Platzierung in den Rankings der Suchmaschinen zu erzielen, gehören mittlerweile zum Internet wie die Luft zum Atmen.

Der letzte Schritt ist nun, den Kunden regelmäßig mit den aktuellsten Informationen und Werbung zu versorgen. Wie geht das besser als mit gezielten E-Mail, Marketing und regelmäßigen Newslettern? Und genau damit fangen dann auch schon die Probleme an. HTML5 und CSS3 in E-Mails Fehlanzeige, responsives Design für Mobile Geräte optimiert, nur bedingt möglich und nicht mit jedem Client umsetzbar.

Webentwickler gehen immer mit der Zeit und versuchen jede Neuerung die aufkommt möglichst schnell zu verinnerlichen und in Ihren täglichen Workflow zu integrieren.

Doch wenn es um E-Mail Templates geht, werden wir immer wieder in die Internet-Steinzeit oder in das Jahr 1996 zurückversetzt. Der ein oder andere Entwickler sind mit dieser Situation auch gerne mal überfordert, da Sie die Begriffe HTML4 oder XHTML nur noch aus Fachbüchern kennen.

E-Mails und E-Mail-Newsletter mit HTML und CSS

E-Mails können mit HTML und CSS gestaltet werden, doch anders als wie bei Webseiten, werden diese meist nicht im Browser, sondern in speziellen E-Mail-Clients / Readern dargestellt. Die meisten Vertreter sind dabei Outlook, Thunderbird, Gmail oder auch Lotus Notes, weshalb hier bei der Erstellung auch besondere Regeln gelten.

Bei E-Mails arbeiten wir nach wie vor am besten mit Tabellen-Layouts, so wie sie zu Anfang auch im World Wide Web genutzt wurden. Media Queries so wie auch andere CSS3-Eigenschaften werden von vielen Programmen immer noch nicht berücksichtigt und unterstützt, weshalb diese auch nur eingeschränkt nutzbar sind.

Deshalb ist es auch immer nochmal eine Überlegung wert, ob man nun HTML oder reine Text E-Mails verfasst.

Auszeichnung und Gestaltung, wo sind die besonderheiten?

Hier muss einem erstmal klar sein, was in E-Mails alles geht und was nicht, sowie man auf die gegebenheiten der Endgeräte einwirken kann.

Gerade Mobilgeräte neigen dazu, die Darstellung so zu verkleinern, dass ein lesen bald unmöglich ist.

Dies lässt sich entgegenwirken in dem man im Head einen Meta-Viewport-Tag setzt, um die Skalierung anzupassen bzw. zu unterbinden.

Die passende Zeile dafür wäre:

meta name="viewport" content="width=device-width, initial-scale=1.0"

In den E-Mails werden keine externen Stylesheets geladen. Style Blöcke können im Head gesetzt werden, werden aber nicht immer mitgeladen.

Mit Programmen wie Mailchimp oder auch premailer helfen dabei die Styles in das Markup zu übertragen, dies lässt sich im Nachhinein aber auch nur schwer wieder ändern und warten.

Mehrfache Klassen pro Element, so wie man es aus den verschiedenen Frameworks wie z.B. Bootstrap oder Foundation kennt, kann man so nicht verwenden.

Auch sollten CSS Eigenschaften immer in klar geschrieben werden, keine Verwendung von Kurzschreibweisen wie font oder background, stattdessen solltest du hier in die ausführliche Schreibweise übergehen, so wie font-size, font-weight, background-image, background-color.

Paddings und margins mit der Abstandsanweisung für alle Seiten.

Als Hilfestellung kann ich die Seite Can I email empfehlen, hier kannst du auf einfache Art dir eine Übersicht verschaffen, mit welchen Elementen du bei der E-Mail Erstellung arbeiten kannst.