From Microsoft’s Improving E-mail Deliverability into Windows Live Hotmail pdf:
Q: If my message displays properly in Hotmail, will it look the same in Outlook?
A: No, we recommend that messages be tested with both Outlook 2003 and 2007 as well as Hotmail as messages may not be rendered the same way in all e-mail clients and services. Outlook 2007 no longer support style sheets the same way previous versions of Outlook did. This means that even if HTML content looks fine in Internet Explorer and Outlook 2003, it may not in Outlook 2007.
I think they are referring to their blunder of switching to the Word rendering engine for Outlook 2007’s HTML emails. –Jason
Here are a few recommendations for improving Outlook rendering (p16):
- Do not use background images. Background images, whether specified in the <body>, <table>, or <td> tag, cannot be used because of inconsistencies among e-mail clients, most notably Outlook 2007.
- Do not use CSS (cascading style sheets), inline styles or JavaScript. Cascading style sheets, where the styles are defined within the Web page itself, are only fully supported in most e-mail clients. Attached style sheets are not supported at all. Additionally, Web e-mail clients such as AOL Webmail and Gmail change or comment out style tags, resulting in unpredictable formatting. As a result, we recommend that you use only basic HTML tags. (For instance, to underline text, use the <u> tag, for bold use the <b> tag.)
- Inline style attributes are your only option. Use only the most basic style attributes to designate font size, color, and type, and use them within basic HTML tags (do not use <div> or <span> tags). Do not use styles to set table or row heights or any spacing. Do not define your style elements within the <head> tag of the document (Hotmail will entirely strip this out). JavaScript is not supported in any e-mail client. Do not include any JavaScript, including onClick=”return(false);” in your HTML. Jason says:Nothing new, but why?!…
- Set table width to 600 pixels max. The convention for HTML e-mail is to limit a set table width to 600 pixels. Though a wider table may render fine in Outlook or on a high resolution monitor, users with older systems or who choose an 800 X 600 display setting will not be able see the entire width of the e-mail.
- Do not use the <body> tag to set any essential attributes. Some Web e-mail clients (notably Yahoo and Hotmail) strip out the BODY tag within e-mails completely. You should not include any attributes in the BODY tag. To set values such as background color, use the BGCOLOR attribute inside the TABLE or TD tags. Jason says:Nothing new…
- Use HTML character names. Many e-mail clients won’t display raw 8-bit characters correctly (they’ll show up as question marks or squares instead). As a result, you must use HTML codes for these characters. Use only the HTML names, not the numeric values. Jason says:Nothing new…
In other news, not much has changed. I have no understanding for the email client industry’s bias against CSS. It makes no sense and we are all now dumber for having realised this is their current stand on the issue.
Good News: Yahoo Mail supports CSS quite well.