Tuesday 23 September 2008
HTML emails
It could be said that one of the hardest jobs in web design at the moment is the task of creating HTML emails (or e-Flyers, EDMs and so on) in which the design and build works perfectly across all browsers, web-based email clients, computer-based email clients and operating systems. I will outline a couple of the more unknown problems I have found and possible workarounds for these problems.
Cellspacing in web-based email clients in Firefox for PC
So you've managed to build a HTML email using tables, even though you feel like you are leaping back towards the late 90s. It looks great in Outlook 2007 (a mammoth task just on its own) and seemingly on all of the popular email clients (Yahoo! Mail, Windows Live Mail, Windows Live Hotmail, Google Mail, Outlook, Outlook Express, Thunderbird, Entourage). And yet, viewing it on Hotmail and Gmail in Firefox 3.0 on a PC completely strips all of the cellspacing with no explanation.
So there isn't full support for margin, padding or now cellspacing (cellpadding seems to work perfectly).
The workaround?
The only way I found to make this work was to use a spacer.gif (a 1x1 pixel transparent GIF image) and increase the width and height of the image to force table cells to create the illusion of cellspacing. I remember doing this kind of workaround 7-8 years ago!
Background images or floating images in Outlook 2007
For some unknown reason, instead of Microsoft using the Internet Explorer engine to parse HTML emails as they did in Outlook 2003, when it came to Outlook 2007 they decided to switch to an MS Word engine. This means very little support for HTML (and almost no CSS); the main problem being how you can get the most out of images in your designs.
Background-image is not supported. Background (the non-validating bygone property for tables or tds) is not even supported. And you definitely cannot float text around an image. What does this mean? Very structured tabular designs with structured tabular images.
There isn't one. Just make sure that every image can be in its exact place without overlapping text or other images, and you can work it into a table structure without the need for text to float around it. Good luck!
Cellspacing in web-based email clients in Firefox for PC
So you've managed to build a HTML email using tables, even though you feel like you are leaping back towards the late 90s. It looks great in Outlook 2007 (a mammoth task just on its own) and seemingly on all of the popular email clients (Yahoo! Mail, Windows Live Mail, Windows Live Hotmail, Google Mail, Outlook, Outlook Express, Thunderbird, Entourage). And yet, viewing it on Hotmail and Gmail in Firefox 3.0 on a PC completely strips all of the cellspacing with no explanation.
So there isn't full support for margin, padding or now cellspacing (cellpadding seems to work perfectly).
The workaround?
The only way I found to make this work was to use a spacer.gif (a 1x1 pixel transparent GIF image) and increase the width and height of the image to force table cells to create the illusion of cellspacing. I remember doing this kind of workaround 7-8 years ago!
Background images or floating images in Outlook 2007
For some unknown reason, instead of Microsoft using the Internet Explorer engine to parse HTML emails as they did in Outlook 2003, when it came to Outlook 2007 they decided to switch to an MS Word engine. This means very little support for HTML (and almost no CSS); the main problem being how you can get the most out of images in your designs.
Background-image is not supported. Background (the non-validating bygone property for tables or tds) is not even supported. And you definitely cannot float text around an image. What does this mean? Very structured tabular designs with structured tabular images.
There isn't one. Just make sure that every image can be in its exact place without overlapping text or other images, and you can work it into a table structure without the need for text to float around it. Good luck!
Labels: HTML, web design