In letzter Zeit habe ich mich wegen einer Umstellung auf ein neues Design der Webseite und Facebook auch mit dem erstellen einer neuen Mail Vorlage beschäftigt.
Auf der Arbeit verwenden wir den David.fx 12 als Mailserver. Die Mail Vorlagen werden hier in einfachem HTML gemacht. Also habe ich angefangen die Webseite als Mail Vorlage umzusetzen und das Layout soweit umgesetzt.
Natürlich habe ich das ganze schön so gemacht wie man heut zu Tage eine Webseite gestaltet mit div Container die entsprechend platziert werden. Das ganze habe ich im Firefox getestet und es sah auch wunderbar aus.
Nachdem ich die Vorlage in den David Server eingebunden habe sah das ganze dann schon nicht mehr ganz so gut aus. Die div Container haben sich wunderbar an den linken Rand gekuschelt und das ganze trotz margin: 0 auto;. Also habe ich ein bisschen rum gegoogled und habe raus gefunden das der Internet Explorer im Quirksmodus diese CSS Eigenschaften nicht kennt und dieser Quirksmodus wird von Tobit wohl bei der HTML Konvertierung benutz.
Na danke ich liebe dich MS!
Also Internet Explorer an, Entwickler Tools an und in den Quirksmodus gesetzt, die div Container mit align:center mittig gesetzt und das ganze sah wieder wunderbar aus.
Also wieder ab mit der Vorlage in den David Server und siehe da es funktioniert. Trotzdem danke an Tobit das ihr so einen neuen HTML Konverter benutz.
Nun zum nächstem Schritt da es sich um eine Mail Vorlage handelt und die nicht nur intern bzw. nicht nur an David Server verschickt wird muss das ganze natürlich auch in einem Outlook Client gut aussehen. Also die Mail zum Test mal an Outlook geschickt. Als ich die Mail in Outlook gesehen habe hat mich fast der Schlag getroffen. Outlook hat die Mail komplett zerrissen und an jegliche CSS Formatierung komplett ignoriert.
Zum zweiten Mal danke an MS!
Also wieder google rausgepackt und gesucht. Herausgefunden habe ich dann, dass Outlook MS Word als HTML Konverter benutz. Wenn ich an das Darstellen von HTML Seiten denke an welcher stelle denke ich dann an MS Word.
Aber egal es muss ja auch in Outlook funktionierten also muss ich irgendwie damit klar kommen. Nun zu den Einschränkungen die Word bei der Anzeige von HTML Seiten hat:
- Keine ausgelagerten CSS Eigenschaften im <head> Bereich.
- Kein Padding (wird Komplett ignoriert).
- Kein Floaten
- Keine Background Image Eigenschaft.
- Kein z-index
- CSS Schrift Formatierungen immer im Tag der Schrift das wird nur bedingt nach unten vererbt
Schlussfolgerung daraus ist, womit wir auch wieder zu der Überschrift kommen, ein Layout muss mit Tabellen erstellt werden und mit sowenig CSS wie Möglich ist damit es in Outlook ordentlich angezeigt wird.
Das ist wohl ein Schlag ins Gesicht für jeden Web-Entwickler der in den letzte 15 Jahren nicht geschlafen hat. Darum liebe Mailclient Entwickler:
bitte verbessert eure HTML Konverter.
Achja GMail zeigt diese Tabellen Layouts übrigens auch richtig an. Andere Mail Clients bzw. Mail Dienste habe ich nicht getestet.
