CSS in Email Kampagnen

Wer sich schonmal mit dem Designen von HTML Emails befasst hat weiss genau wie schwierig es ist CSS zu verwenden so dass es schlussendlich in allen Mailclients gut und ungefähr gleich aussieht.
Grundsätzlich gilt, Testen ist die einzige Variante um wirklich sicher zu sein dass es richtig aussieht.
Trotzdem gibt es einige Punkte die man beachten kann und welche einem beim Schreiben des Codes behilflich sein können:

1. CSS nach dem Body Tag einfügen

Viele WebMail Clients entfernen den gesamten Bereich in E-Mails sowie auch die und Tags. Dies ganz einfach um Darstellungsprobleme zu verhindern.
Es macht daher keinen Sinn den CSS Code im Header einzufügen.
Ausserdem kann man sich nicht darauf verlassen dass man z.B. die Schriftart über body { font-family: fontname; } regeln kann, da wie gesagt schlussendlich möglicherweise gar kein Tag vorhanden sein wird.

2. Inline CSS verwenden

Um ganz sicher zu gehen dass das CSS richtig interpretiert wird sollte es inline geschrieben werden, das heisst für jedes Tag einzeln:

<div style="display: inline-block; font-family: Verdana; text-align: center;"&rt; 

Falls euch das zu mühsam ist, gibt es ein praktisches Tool von den Machern von Mailchimp um euren CSS Code zu „inlinen“: http://beaker.mailchimp.com/inline-css.

3. Tabellen

So schlimm es sich anhört, es ist ein Fakt: einen Newsletter mit positionierten DIVs zu coden ist ein Ding der Unmöglichkeit. Hier muss man wohl oder übel wieder auf die unschöne Variante mit Tabellen zurückgreifen.

Weitere Infos

2 thoughts on “CSS in Email Kampagnen”

  1. hey Michael,
    thank you very much for the comment, I've also checked the campaign monitor tutorials and guides before writing this article, they write very good articles and you can definitely say there are some people working there who know what they're doing.

    have a nice day!

Leave a Reply