The Art of Email Template Design and Coding (Part 2)

January 12th, 2012

“This is the second of a two-part guest post by Joe Myers, one of the most trusted names in the ski industry when it comes to email design and coding.”

Part 2: Gittin’R Done
I’ve been designing email templates for years and I still learn something new each time. The imprecision is mind blowing and the lack of standardization is enough to push anti-social web professionals over the edge. But here are some tricks I’ve learned in addition to Gregg Blanchard’s super-right-on “Ten Reminders for Coding HTML Email Templates.” (seriously start there.)

Basic Tips

Kick It Old-School
As Gregg says, “Code like it’s 1996 and test like mad.” That means, use tables. Use tables within tables. And then nest tables inside those tables. Sursly. I use a 100% width table to form the background, and then center a 600-ish pixel table in there for the content.

Keep It Stupid, Simple
No Flash, no Javascript, no video. While your desktop browser has no problem with these things, email clients see them as kryptonite. And while HTML5 video embed techniques work in some limited (mostly apple) browsers, you’re not sending emails just for a small percentage of your audience. Plus if you’re following the previous tip, that’s not an option.

Embed Your CSS
Most email clients will ignore external style sheets. Some programs may bring them inline upon publishing a draft, but it’s still not as reliable as embedding specific styles within each table cell as needed. This of course is a total pain in the ass and defeats the purpose of knowing CSS, but it will produce the most consistent results.

Use Words
If it’s important, make sure it’s readable in live, editable, HTML type. Use headline tags and style them with embedded css. But don’t use an image for important headlines if you can avoid it.

Rinse and Repeat
Structure your repeatable content elements so that their easy to isolate and repeat. Sometimes I’ll make each newsletter item a separate table (or at least a row) that can be easily deleted or copied to make the email scaleable. Mailchimp allows you to create repeating content items. I’d like to see other programs adapt that functionality.

Micro Tips
To set a background color or to center your content, start with a 100% width table and set the horizontal alignment and the background color in that table using <td align=”center” bgcolor=”#??????”>

And for victims of the Hotmail regime which sees fit to override your markup, strike back by placing this in your <head>  tag (source):

<style type=”text/css”>
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>

Set your basic content width to around 600 pixels. I’ve slowly and cautiously started rolling out templates as wide as 700px, but remember there are sidebars, and menus you don’t see in web browsers.

Get Responsive?
CSS Media queries work in mobile web design to the extent that true CSS does, which is to say not well, especially in Outlook. Honestly, I’ve already babbled enough but if you’re familiar with responsive design (dude, read this) and are interested in experimenting with it in email, here’s a link to get started.

Don’t rely on cellpadding or even CSS-based padding. Again, put on your Hammer-pants and think old-school. Use gutter columns or rows to add padding. Remember Gregg’s tip about line height screwing up your vertical agreement. If you only want 10px of height, include a spacer.gif (really) with a height=”10″ specified in the image and the parent table cell. To add lateral padding, use a gutter column with a fixed width and a non-breaking space for content. Or for a content area narrower than the parent cell, center a nested table that’s narrower than it’s parent cell.
To avoid gaps around your images, include a style=”display:block;” in the img tag. To avoid a default blue border around linked images, include a border=”0″ on the img tag. And to avoid going to hell, include a good, descriptive alt tag.


Conclusion
Well, that’s it for now. I’m sure there’s more, but it’s late and I have to wake up and be super-dad tomorrow. Please hit me up for more questions. Check my site or follow me on the Twitterz.

What's this Ryan Solutions you speak of?

We're glad you axed.

FIND OUT