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:
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.