More Notes on Coding HTML for Email

Estimated reading time: 5 minutes, 16 seconds

[First, don't yell at me—I know HTML is a markup language. But, until a better term/phrase comes along than "marking-up" this is what you're getting. Anyway, on to the topic at hand...]

Since publishing my tome, HTML Email: Coding Like It’s 1999, and subsequently presenting the same topic at Refresh Austin I’ve been jotting down notes and tips about specific issues that I encounter daily while working on eblasts and newsletters. I thought I’d post them here in no particular order and keep doing so over time as a sort of repository. Since the best way to find anything on the web these days is search, I thought merely posting them was enough. Everyone knows how to ctrl-F or cmd-F, right? Well, if this list gets too long, perhaps then I’ll address its structure and order. In the meantime, here we go!

Line-Height

Avoid using em as a unit of measure here. A few tests on Outlook 2007 and certain Hotmail clients revealed that these were largely ignored thus collapsing or expanding the line-heights to the clients’/browsers’ defaults. Fugly to say the least. Instead, use the less-accessible but universally-reliable px value and everything will look the same across all platforms.

TD Background Colors

Double-up on these as a fall-back, meaning use both the td‘s bgcolor attribute as well as an inline style tag with a background-color attribute within your td tag. One of these is bound to work in every possible platform.

Zap Gremlins

No, not the wet, overfed Mogwai you’re thinking of. I’m talking about those mis-encoded characters you get from copying and pasting text out of PDF and PSD files that make bizarre characters show up in your eblast copy. Since losing use of my favorite text editor, BBEdit, after parting ways with Apple back in 1997 and switching to the now-debatable “dark side,” I haven’t found a better way of dealing with these other than doing a Dreamweaver find/replace on the usual suspects: curly quotes (”), apostrophes (’), hard returns in PSDs, registration marks (®), copyright symbols (©) and trademarks (™) just to name a few. Unfortunately the “paste from Word” feature in your favorite editor doesn’t always do the trick and often makes things worse if your text isn’t coming from Word.  There’s also the trick of copying from a PDF/PSD file, pasting into a blank Word doc, copying that and then trying “paste from Word,” but that might screw up some other things that were displaying/encoding fine. Just be diligent and test on the worst possible scenarios (Outlook 2003 or Lotus Notes 7 on Win XP?) where these badboys are likely to all be lurking.

Centering

Centering your document has one major benefit in that it gets your beautifully designed eblast or newsletter away from the ugly crap that’s in the left and/or right sidebars of webmail clients like Hotmail, Yahoo! Mail, AOL Mail and Gmail, surrounding it with white space or that of your specified background color (I’ll post something about that at a later date). AOL, for example has left and right sidebars turned on by default. Do you really want your handiwork pressed up against those beauties? Center your layout’s main table using these two seemingly redundant methods:

  1. Set your table tag’s align value to “center”
  2. Wrap your main table in a container div—old school—style, like div align=”center”

Doubling-up will ensure your main table will be centered across all platforms. And what’s the harm in centering something that’s already centered?

Width < 700px

As I mentioned before, AOL has left and right sidebars turned on by default that take up around 400px of screen real estate. On a 1024×768 display, provided the browser is full-screen, you’re left with 624px–not including the browsers edges & scroll bar or any padding/margins that webmail clients add to the main email content area. As of March 2011, Adobe SiteCatalyst Netaverages shows around 21% of their captured web users’ data have display resolutions of 1024px or less. StatCounter reports 26% of worldwide users. That ain’t no IE6 brush-off number. That’s one in four users. In my daily workflow, I shoot for 700px-wide maximum, keeping the important content well away from the edges.

Cellpadding vs Padding

Let’s say you have a block of text with white type knocked out of a blue background like this:

this is some text.

 

You might be inclined to simply apply 15px of padding to your paragraph tag along with the appropriate font and background colors like so:

<p style="color: white; background-color: blue; padding-top: 15px; padding-right: 15px;
padding-bottom: 15px; padding-left: 15px; margin-top: 0px; margin-right: 0px;
margin-bottom: 0px; margin-left: 0px; display: inline;">this is some text.</p>

Well, when your boss gets your beautifully-coded newsletter in his/her inbox using either Outlook 2007 or 2010 it will look like this:

Padding and margins are some of the least predictable CSS attributes when dealing with Outlook from any era. Instead of taking the easy way, wrap your text in a table—yes, a table—and let the table’s tried and true cellpadding attribute do the magic like so:

<table border="0" cellpadding="15" cellspacing="0"
style="background-color: blue;">
<tr>
<td><p style="color: white; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;
padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
margin-left: 0px;">this is some text.</p></td>
</tr>
</table>

It will look the same in practically every email client/browser and in the end that’s all that matters.

Overriding Minimum Font Sizes in iOS devices

If you’ve ever tested your copy-heavy newsletters on an iPhone or iPad then you’ve surely seen your layout and proportions go down the toilet. Problem, the default minimum font size on an iOS device is 13px and you’ve likely got fonts sized smaller than that (likely for good reason). One possible solution: target those devices using this technique described by Ros Hodgekiss on Campaign Monitor’s blog.  Keep in mind that this could affect other webkit-based browsers such as Safari on the desktop (as pointed out by Johnathan Snook in the comments). It’s probably a good idea to use these along with an @media query to target only those devices with minimum font size issues.  Another solution: Simply design your email in a way that your minimum font size is 13px. ‘Nuff said.

This entry was posted in Technicalities and tagged , , , , , . Bookmark the permalink.
  • http://dorianredesignstheworld.blogspot.com/ Dorian

    Thanks so much for that part about doubling up on centering techniques and those background colours!

    Now I need to figure out which HTML version and encoding to use…

    • Art Thompson, Jr.

      Your welcome, Dorian! For now and the foreseeable future I’d use XHTML 1.0 Strict or Transitional as your HTML version and–not that it really matters since most email clients ignore the content-type meta tag–use utf-8 for encoding ( good practice for all your HTML, whatever version you use). Good luck!