Gambit24 Small

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

- Rückschritt statt Fortschritt

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.