Dat we al met veel verschillende work-arounds in mailings rekening moesten houden was al bekend. Firefox in combinatie met Hotmail, IE die bepaalde tags niet snapte, geen CSS, wel CSS, noem maar op. Vanaf nu moeten we de design-klok ook nog eens zo’n 5 jaar terug zetten: Microsoft outlook 2007 laat geen background images meer in. Tot Outlook 2003 werd in mailtjes gebruik gemaakt door internet explorer, vanaf 2007 is dit echter Microsoft WORD geworden. Deze heeft erg veel beperkingen waarbij de missende ondersteuning van achtergrond plaatjes de meest vervelende is.
@DESIGNERS: Het enige wat nu nog ONDER tekst vlakken mag staan is een PUUR 100% kleur. (of zwart / wit natuurlijk :))
@PROGRAMMERS: Onderstaand is nog een opsomming van de rest van de beperkingen in de nieuwe Outlook.
No animated GIFs
Other than Flash, animated GIF images are the only animation possibility available for HTML e-mail. However, in Outlook 2007 only the first frame of the animated GIF will render.
No background images
Workaround: use images, forget about gradient backgrounds and other niceties.
Margins for images (ex: ” img style=’margin: 5px’”) are ignored.
Workaround: (1) add white space to the image itself, (2) add padding to the table cell, or (3) if it is not in a table, put it inside a table cell.
“float” style is ignored.
Workaround: use “align=left/right” for images, but be mindful of missing margins (see above).
Align=”absmiddle” is ignored for images.
Workaround: none found so far – please recommend one.
Padding for P and DIV tags is ignored (ex: <p style=”padding: 10px 0 0 0;”>)
Workaround: use margins whenever possible: ex: <p style=”margin: 10px 0 0 0;”>
Paragraph width is ignored (ex: <p style=”width: 200px; border-top: 1px solid #999;”>).
Workaround: be creative, so in the example above you can use an image to create a line (some of us may be reminded the old days before CSS)
List styles are ignored: no images for bullets, no square bullets, no lists without bullets.
Workaround: close your eyes and count to 10. If you don’t want bullets to appear – use paragraphs instead of lists.
Padding for lists is ignored.
Workaround: use margins whenever possible.
Cell padding is acting up.
This is by far my favourite and I can’t quite grasp the cell padding concept of the new Outlook. You just have to see it to believe me, but sometimes, padding-top adds space on TOP of the cell, NOT INSIDE the cell, so that the borders on top of 2 neighbouring cells in the table are not on the same line. Vertical alignment does not help, setting cells to the same height does not help. Workaround: avoid tight situations where ever possible. Set same padding to all cells in a row or, if using images, add white space to the images themselves instead of cell padding.
Font styles set for the entire email in a DIV or SPAN are ignored inside tables.
Workaround: set font styles for each table inside <table> tag.
Tot slot: Happy designing & programming
Tags: html, mailings, outlook, work-around