Friday, April 12, 2013

HTML Emails. The saga continues. Gmail and Outlook are public enemy #1.... and #2.

Gmail strips <style> in the head. This includes any media queries. So All styles must be inline for Gmail. This pretty much leaves out any styling for mobile, but most people don't use the Gmail app on their phone, they use the native email app. I believe this is true for Android and iPhone users.

This doesn't address all the webmail clients, but that's for another day, or hopefully never.

So, to override the inline styles when styling for mobile, you must use the !important function. This will force the style to override any other styles for that particular tag, selector, etc.


If you want to hide a block of content (in the desktop version for example), you would add inline styles, display:none to hide it. But, freakin Gmail doesn't recognize that.

So we try all kind of other styles like, width:0, visibility:hidden, max-height:0, overflow:hidden.

Gmail does seem to understand some or most of those, as it will hide the content.


Gmail will ignore those inline styles if applied to a table. So, wrap the table in a <div> and put the inline styles in the <div>.


Outlook 07 (and probably 10) does not like DIVs. It will ignore the inline styles in the <div>.

How about <p>? Not so much. Both Gmail and Outlook 07 ignored it.

Next, I tried both the <div> and the <table> styles. I wrapped the <table> with a <div> and applied the inline styles to both.

This worked. Finally. 

No comments:

Post a Comment