Why does Gmail hate HTML email developers?

If you're any kind of email developer, you'll be aware that Gmail presents some difficulties when building HTML emails. For example, it strips out style tags and has a tendency to remove inline style attributes as well. It's confusing, not in any way documented, and very frustrating.

I spent an afternoon recently trying to get to the bottom of this, and I believe I've found a few new ways to make Gmail behave. Hopefully this will be of use to someone.

The biggest problem I've found is the way that Gmail removes inline style attributes from elements - but not all of them, only some. I found a suggestion online that this stripping might be something to do with line length, so I went through all my long style attributes to see if there were any unnecessary styles I could take out (overly long font-family stacks, for instance) and suddenly a lot more of my styles worked. Oddly, removing all indents (to further reduce any long lines) did not have any effect.

Bizarrely, the order of items within style attributes seems to matter. I was building an email recently and a style attribute was being removed that contained (in this order)

  1. font-size
  2. line-height
  3. color
  4. font-family
  5. font-weight
  6. letter-spacing

Another element was similarly styled and was not having its style attribute removed. This was the order of the rules.

  1. color
  2. font-family
  3. font-size
  4. line-height
  5. font-weight
  6. letter-spacing

Amazingly, changing the order of rules in the first one to match the second one worked. Having said that, this solution did not apply universally. There are clearly multiple factors involved.

I've found that a chunk of code that keeps its style attribute cannot always be copied to another part of the HTML with the same effect. This leads me to believe that there is something related to the depth of nested elements that comes into play, but I've yet to discover the specifics. If in doubt, try wrapping your nested table in another single-celled table - this has worked for me.

Another thing that doesn't make any sense is how Gmail will load some of my images, but not all of them. This is particularly frustrating given that the images I'm referring to are often essentially the same image, displayed in the same markup. Sometimes images will not appear the first time you open the email, but will appear the next time. Or vice versa. This one seems to be just one of those quirks of Gmail that we're supposed to live with.

I hope my poking around with Gmail has saved you at least a little bit of a headache. Of course, everything may change tomorrow and none of this will help anymore. The more I investigate the more I become baffled by the thought that any of this is deliberate on Google's part. But then if it isn't deliberate, how could anyone have written the convoluted code necessary to achieve this level of complexity?


This article is tagged with