Class-header-css3

CSS-Support in E-Mails

Cascading Style Sheet (kurz „CSS“) ist ein mächtiges Werkzeug im Web Development. Und wenn es darum geht, ansprechende E-Mails zu gestalten, kommt man um CSS nicht herum. Doch die Anwendung der Stylesheet-Sprache im Bereich der E-Mail-Gestaltung ist nicht so einfach, wie bei der Gestaltung einer Webseite – weshalb gute Website-Ersteller noch lange keine guten E-Mail-Gestalter sind. Denn im Gegensatz zu echten Webseiten können E-Mails nicht auf einheitliche Standards in den Clients zurückgreifen, da es hier schlicht keine festgelegten Standards gibt.

Nicht umsonst wird immer wieder gesagt, dass man beim Erstellen von E-Mails das Gelernte vergessen und gedanklich in die 90er Jahre zurückkehren muss – in die Zeit, in der Webseiten noch mithilfe von Tabellen erstellt wurden. Neben der Tatsache, dass viele Clients die HTML- und CSS-Angaben in einer E-Mail teilweise unterschiedlich interpretieren und rendern, muss man auch beachten, dass gewisse – an sich recht gebräuchliche – CSS-Angaben nur teilweise oder überhaupt nicht unterstützt werden (mangels der erwähnten Standards).

Deshalb ist es bei der Erstellung von E-Mails wichtig zu wissen, welche Clients die Empfänger benutzen – hier hilft oftmals eine Analyse der Empfängerliste, um grob die genutzten Dienste zu bestimmen. Eine Garantie, dass Herr Schmidt mit einer Gmail-Adresse auch tatsächlich das Webinterface von Gmail nutzt und nicht etwa einen externen Client wie Thunderbird, gibt es allerdings nicht. Der Rat lautet daher: Nutzen Sie nur die CSS-Angaben, die durchweg von allen gängigen Clients korrekt unterstützt werden, um eine maximale Kompatibilität zu erreichen.

Auf Basis unserer Erfahrungen in der Template-Erstellung & -optimierung und mithilfe externer Ressourcen für die Erstellung von soliden E-Mails wie campaignmonitor.com haben wir eine Liste erstellt, die dabei helfen soll, die richtigen CSS-Angaben zum Einsatz zu bringen und solche zu vermeiden, die Probleme verursachen könnten.

Zur Veranschaulichung nehmen wir Bezug auf die gängigen Clients (international) in vier Bereichen: Webmail, PC, Mac und Mobile. In Bezug auf CSS-Angaben beziehen wir uns auf die Kategorien Media Query (welche für Responsive Design genutzt werden), Style- und Link-Angaben sowohl im Header- als auch im Bodybereich, typische CSS-Selektoren, Typographie, Farben, Box Model, Position & Display, Tabellen & Listen und die drei durch HTML 5 eingeführten Tags <canvas><audio> und <video> zum Einbetten von Inhalten.

diagramm_css_support
CSS-Unterstützung in den gängigen Clients (für Original-Größe bitte klicken)

Anhand des oben gezeigten Diagramms kann man erkennen, wie gut CSS-Angaben in den genannten Bereichen von den Clients unterstützt werden.

Nachfolgend nun eine Liste mit gebräuchlichen CSS-Angaben in den verschiedenen Bereichen und deren Unterstützung durch gängige Clients. Einträge mit Ausrufungszeichen kennzeichnen, dass das CSS-Attribut zwar unterstützt, jedoch nicht fehlerfrei interpretiert wird.

table_css_support
Tabellarische Auflistung von CSS-Angaben und deren Support (für Original-Größe bitte klicken)

Verzichten Sie auf die HTML 5-Tags <canvas>, <audio> und <video>, da diese nur in Mac-Programmen wie Apple Mail und Postbox sowie auf dem iPhone und iPad einigermaßen fehlerfrei funktionieren – auch wenn der Gebrauch dieser neuen Tags reizt.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s