Ex Machina: Jack Graham's Blog » HTML CSS email http://jackgraham.net/exmachina The Worklife of a Software Business Analyst, Unlicensed Futurist, and Tech Wonk-of-all-Trades Thu, 08 Mar 2012 19:54:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Coding HTML & CSS for bulk e-mails http://jackgraham.net/exmachina/2009/09/10/coding-html-css-for-bulk-e-mails/ http://jackgraham.net/exmachina/2009/09/10/coding-html-css-for-bulk-e-mails/#comments Thu, 10 Sep 2009 16:50:48 +0000 Jack Graham http://jackgraham.net/exmachina/?p=72 eI’m presently reviewing resumes and work samples for a new interactive producer position at our company. In the process, I’ve been struck by how few people know the basics of coding mass marketing e-mails. At the core of it, there are only two rules:

  1. Use tables for layout, not CSS.
  2. Embed all CSS styles in block level elements.

And that’s pretty much it. Point 2 deserves a little bit of elaboration, though.

The reason for embedding styles is that some ESPs (Gmail, I’m looking at you) ignore style sheets in the <head>  section of the document. They also ignore <span> tags, and inheritance can be a bit wonky. The safest course of action is to use style attributes in block level elements such as <div>, <p>, <h#>, <a>, and the like.

This makes Dreamweaver a huge pain to use for e-mails, because it does the exact opposite of this. One of my co-workers who’s in marketing hired a freelancer to do some e-mails for her, and she found that they weren’t displaying very well. The freelancer in question had requested a copy of Dreamweaver within minutes of sitting down to work. I’d advise those making hiring decisions on someone to create e-mails to be skeptical of potential hires who indicate that they rely heavily on Dreamweaver. E-mail is still a hand coder’s game.

Some coders use the <font> tag, as well, but I disagree with this on the grounds that <font> is deprecated HTML and should not be used. <font> does allow for the possibility of creating styling inside of a block level element without creating a line break (which happens in some ESPs if you use <div>), but I don’t think it’s a worthy trade-off. I’m advocating deprecated coding techniques (e.g., table layouts), but I won’t advocate deprecated code.

This brings me to my final point. Just because e-mails needs to be coded in a way that flies in the face of what would be considered best practices in building a web page doesn’t mean it’s acceptable to produce lousy code overall. While following these guidelines, one should still strive to produce code that’s readable and validates for whatever flavor of HTML was used.

Photo: Craig Jewell via stock.cchng

]]> http://jackgraham.net/exmachina/2009/09/10/coding-html-css-for-bulk-e-mails/feed/ 0