CSS compatibility and mailboxes

Today, some very useful links and tips while working on newsletter and webmails.

You have to know that webmails such as Gmail are disabling several CSS properties inside their mails contents to ensure that the HTML code inside is not altering the webmails own design and layout. Imagine that in your mail your are redefining a class (randomly : .mailText { display: none; }) used by these web applications, the result could be catastrophic for the user.

So first, on this website http://www.quirksmode.org/compatibility.html you will find how CSS versions are supported in different browsers. Always useful.

In this second link : http://www.xavierfrenette.com/articles/css-support-in-webmail/#selectors-properties-gmail-2 the author describes all the properties supported or not in the most popular webmails : Gmail, Hotmail, Yahoo! Mail. He gives some very useful information and Hotmail hacks.

And because writing a newsletter is a very well know problem for communication professional, you will find in this link http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/ the best practices to begin with newsletters.

Lessons I got from this experience are:

* <style> tags are useless. Use inline CSS and style attributes.

* The most complex client mail to make compatible with your newsletter design will be Outlook. Outlook will not display background images until its next version after Outlook 2010. And that’s not even sure. So, never use background images or advanced CSS. More information on http://fixoutlook.org/

* Good old tables are the rule to construct your page! Separate your pictures into different small pictures like before 2000 !

* Because Gmail/Yahoo! Mail/others don’t implement acknowledgement of receipt, you cannot know if somebody using these webmails read your message by this way.
BUT, with pictures inside your mail, you can add a tracker on them to know who opened your mail and downloaded them!

EDIT : Microsoft documentation with supported attributes for each HTML element to maximise your newsletters’ compatibility with Outlook : http://msdn.microsoft.com/en-us/library/aa338201.aspx

Latest posts by Fab (see all)

About Fab

Solutions Architect, I build great workflows for the news, media and broadcast industries. I play with data too.

Leave a comment

Your email address will not be published. Required fields are marked *