HTML Email Formatting

December 12, 2011

By

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:

  1. <style> tags may work in some clients, but won’t in others (Gmail in a browser is a big one), so no go.
  2. Style attributes in the <body> tag might also work in some clients, but not in Gmail’s web interface, so forget about it.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

Software Engineer
David Walton

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.

Comments (2)

  1. Taylor Ricca

    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!

    • David Walton
      David Walton

      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.

Leave a Comment