If it sounds like a dirty word, you’ve probably got a little experience with the nightmare of trying to maintain cross-browser/cross-email-provider/cross-client-application consistency in your emails.
I found one very nice article worth reading to get started:
http://www.reachcustomersonline.com/2010/01/23/09.27.00/
After struggling with some auto-generated marketing emails for a client, this is my takeaway in a nutshell:
- <style> tags may work in some clients, but won’t in others (Gmail in a browser is a big one), so no go.
- Style attributes in the <body> tag might also work in some clients, but not in Gmail’s web interface, so forget about it.
- Trying to cascade the color of <a> tags throughout your code is a nightmare. The above article did mention that it is possible to use font & color attributes in parent <td> elements, but when in doubt, just put the style in each & every anchor.
- Outlook for Windows renders email via the Word HTML engine, so any CSS that might render positioning (floats & whatnot) are right out. This is a major reason that we’re coding like it’s 1999 with nested tables.
- Also, CSS background imaging won’t work in Outlook. The article above suggests bgcolor & background in your <td> to get around it. I haven’t tested this, though I trust Mr. Slavin. Our own solution to get around the background image item is to use <img> elements with baked in copy. Obviously, the title & alt attributes should contain whatever messaging is in the image for the sake of accessibility.
- On <img> elements, the CSS width attribute doesn’t apply in Outlook (perhaps other elements suffer as well). Fall back on the good old (deprecated) width attribute on the element itself. Important safety tip: Don’t put units on a width; ie, width=”50″ is 50 pixels & width=”50%” is half the containing width- width=”50px” causes issues.
Hope this helps & please feel free to share your own insight.
David Walton Software Engineer
David “Like Voltron But With More Lions” Walton murders time vanquishing mighty foes online & sporting via activities that offer the most risk for their reward.
Jan 25, 2012
@ 12:49 am
You have answered a question that has nagged me for the past few hours! I had no idea gmail did not read the styles tag.
I could not figure out a fix… thanks, you have saved me a lot of time and painful searching!
Jan 25, 2012
@ 9:54 am
That’s fantastic! I’m so glad it helped- I wrote this entry after spending a few hours in the same mire you described.
If you’ve run across any other anomalies I encourage you (and others) share them here; I’ll update this post to keep it as comprehensive as possible.