For Microsoft Store, we have quite a few different email templates that we used to send customers emails for things like order receipts and shipping confirmations. When we were creating these HTML email templates, it was eye opening (read: shocking) to learn how support for HTML & CSS element varied great among different webmail and email clients. One tag that worked in Hotmail wouldn’t work in Gmail, then when we found one that worked in both, it wouldn’t be compatible with Outlook or Yahoo webmail. It was frustratingly to say the least, and underscored why projects like the Email Standards are so important.
Some examples of differences:
- <style> in the <head> and <body> sections is supported in Yahoo Mail, Hotmail and AOL, but not in Gmail.
- Gmail is the only webmail provider to lack support for every single CSS selector
- Mobile Me is the only webmail to lack support for the white space CSS property
- In many cases, the Old Yahoo Mail (before the re-design) supported more CSS selectors than the new Yahoo Mail.
We wanted to minimize the development time to implement each email template and surprisingly found it was faster to identify what HTML and CSS elements were supported across clients, than trying to find what wasn’t supported.
It turned out that the majority of CSS for our emails had to be placed inline because you’re unable to reference external stylesheets. To make matters worse, most webmail and email clients don’t support background images or more advanced CSS functionality. To maximize our Outlook compatibility, we had to use conditional comments as needed to single out Outlook like <!–[if gte mso 9]> <![endif]–>.
It took us nearly twice as long as we originally planned to implement our emails, so if you’re embarking on an endeavor like this, plan accordingly. Here are some tips:
- It will take you more time that you think to implement. Buffer your schedule.
- Test, test and test. Expect to find bugs, and iterate countless times over the same email.
- Because not all webmail or email clients support the <body> tag, don’t count on using different background colors. Stick to white.
- If you don’t specify a style, then most webmail clients will use their own style sheets. This means you need to specify the font, font color and font size for all text and hyperlink.
- Always use ALT and TITLE attributes for images, not only because of accessibility reasons, but also because most webmail clients have higher security these days and will blockk images by default. They will show ALT or TITLE values in their place until the user explicitly says to view images.
- Expect to be surprised by cross-browser compatibility. Again, test, test test!
Some resources we found helpful:
- CSS support in in HTML emails of Hotmail, Yahoo! Mail and Gmail
- How to code HTML newsletters
- Guide to CSS support in email clients
- Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 – Part 1 and Part 2