Email Template styling
Wenn ich mich richtig erinnere, hast du @henbug schon gemerkt, dass z.B. Google Mail die CSS Regeln in <style></style>
ignoriert. Genauso mach die Gmail App auf dem Android Handy.
Google sagt zwar, dass die CSS Regeln in <style></style>
angewendet werden [Link], es sieht aber danach aus, dass es doch nicht so ist. Viele beschweren sich und das Problem scheint immer noch nicht gelöst [Link zum Thread]. Die Emails bei mir auf dem Handy sind dann "geht so" bis "schlecht". Nur die Inline-CSS-Regeln werden interpretiert.
In dem verlinkten Thread hat jemand erwähnt, dass er die Email HTML Template parst und die <style></style>
in Inline-Styles umwandelt. Das könnte bei den riesigen <h1>
Überschriften helfen: auf meinem Handy sind sie einfach zu groß. In <style></style>
ist zwar die font-size definiert, wird aber ignoriert.
Ein weiterer Vorteil wäre, dass sich die HTML Elemente in anderen Templates (z.B. Order Email) an das gesamte Design anpassen. Als Beispiel sind die Überschriften in Produktliste genauso groß wie der Überschrift am Anfang der Email siehe Screenshot. Im Moment ist das nicht so und man muss jedes einzelne Template (oder auch Locale, wo HTML benutzt wird) finden und Inline-Style per Hand hinzufügen.
Man muss aber auch einige Sachen beachten. Z.B. der Preprocessor soll die schon existierende CSS Eigenschaften nicht überschreiben, Beispiel:
<style>
h1 {
font-size: 30px;
}
</style>
<h1 style="font-weight: normal;">Überschrift der dünn ist und die Größe von 30px hat</h1>
<h1 style="font-size: 20px;">Ein fetter Überschrift mit der Größe 20px</h1>
<!-- generierter html output -->
<h1 style="font-weight: normal; font-size: 30px;">Überschrift der dünn ist und die Größe von 30px hat</h1>
<h1 style="font-size: 20px;">Ein fetter Überschrift mit der Größe 20px</h1>
Es hat keine Prio aber irgendwann sollen wir damit was machen. @mor du darfst gerne diskutieren ;-)