HTML Email: Coding Like It’s 1999

Okay, why HTML Email?

• Doesn’t it seem you’re constantly having to design and/or code more and more eblasts and newsletters?
• Didn’t you, at first, agree with the marketing folks that it’s a total no-brainer and that you could knock it out after lunch?
• Didn’t you once hastily “yes” the salesperson who asked if they could just send out your coded eblast to their list through Outlook?
• Didn’t that beautifully designed eblast consisting of a single, embedded JPEG yield the lowest clicks and the highest unsubscribe numbers to date?
• Doesn’t it seem way more complicated than it need be?

Welcome to the wonderfully frustrating world of HTML Email. And welcome to 1999.

The Good News

The good news is that EMAIL IS KING. It is nearly ubiquitous among US adults with adoption somewhere around 98% (source: www.pewinternet.org). It’s also free with no barrier of entry thanks to popular web-based email services such as Windows Live Hotmail, Yahoo Mail and Gmail. The corporate king is still Microsoft Outlook in all its various, aged incarnations. And on the consumer desktop, Apple Mail seems to be leading this antiquated model, though Thunderbird still has several fans. And then there’s mobile. But forget I mentioned that. For now.

The Bad News

The bad news is that EMAIL IS KING. And if having to deal with the numerous versions of Outlook wasn’t bad enough there are a seemingly infinite number of combinations of webmail services + browsers + browser versions + OSs.

The problem is that there are no email standards to speak of. Each email client supports an incomplete set of either HTML and/or CSS making it nearly impossible to determine anything more than a baseline feature set. Woo-hoo!

The Bottom Line

E-marketers wait for no one and this eblast has gotta get out to the list tomorrow AM.

So, what’s the takeaway here?

This is not intended to be a course on email marketing nor is it a full-fledged tutorial. Instead I want it to serve as a primer plus a list of resources for those needing or wanting to code HTML Emails.

Just a few words on MOBILE…

I recently read that more folks were checking their email on mobile devices than on computers. This would make sense with the gazillions of iOS and Android devices being activated every day. For the sake of space and my own sanity, the information in this article pertains mostly to the desktop/laptop variety of HTML Email, though most modern mobile clients tend to do a much better job rendering HTML Emails that their landlocked counterparts.

HTML and CSS within the Email Client

Contrary to your sales/marketing person’s intimate knowledge of the medium, HTML Email cannot be sent out by copying and pasting your code into a new Outlook message. In order for the HTML to render correctly, your code needs to be assembled at the server level where it is adorned with all the appropriate headers and such and shot out to your recipients.

The easiest way to do this, by far, is by using an EMAIL MARKETING SERVICE (EMS) such as Emma, Constant Contact, Campaign Monitor, MailChimp, etc. I won’t go into which is better, just know that they exist for a host of reasons. On the corporate side, many IT departments host their own bulk mailing services in-house. Either way, Outlook is NOT the way.

Ready to Code Like it’s 1999?

Beyond being an cheap catchphrase, my reference to 20th century markup refers to the dumbed-down subset of HTML & CSS that’s currently available to developers working on HTML Emails. For reasons I shall soon explain, you will need to go back in time, so to speak, and pick up coding and layout techniques that would make any web standards nerd spit up all over his/her WaSP t-shirt. If you thought the phrase “slice and code” raised some eyebrows, just wait ’til you drop “nested table layout” at your next Refresh meetup.

Speaking of slicing and coding, this article presumes that you, the reader, has a working knowledge of HTML/CSS in their currently recognized state. The code examples herein are shown with regard to the topics being covered rather than in a tutorial setting where each tag is explained.  If you want to learn about HTML & CSS and how to use them, I highly recommend you checkout HTML Dog.

---

Step 1. Manage Lower everyone’s expectations (aka: time to break some hearts).

There’s a lot you can do in an HTML Email, but there’s even more that you can’t. If you’re not also the designer, make sure you clue he or she in on the limitations of the medium. And make sure to do the same with the client or marketing person. No sense in having to explain why the coded version in her inbox doesn’t even come close to matching the designer’s PDF file she approved.

So then, why not just export that PDF as a single JPEG image and embed that in an email message and send it out through your email client? Simple answer: SPAM. And by that I mean your email will likely be marked as SPAM by most of its recipients since it contains no discernible information beyond the embedded image (which could contain malware). Also, your ISP will likely lock down your email account suspecting that it is being used for sending SPAM or malware. Need I continue?

---

Step 2. Determine your Target Email Clients – Pick your battles!

You can’t please all of the email clients all of the time so pick your battles and make sure you have a strong business case for when you inevitably get that Outlook ’97 on Win XP screenshot from your client/boss that’s all awry. The good news is that there’s some reliable data out there to help you determine what your targets should be in order to create a baseline. Here are a few snapshots of the email client landscape:

Campaign Monitor’s Numbers from Dec 2009 June 2011

(Revised 2011/07/18—Source: www.campaignmonitor.com/stats/email-clients/)

Litmus’ Numbers from Feb 2010 July 2011

(Revised 2012/04/05—Source: litmus.com/blog/email-client-market-share-infograph/email-client-market-stats-1000)

First let’s just get it out in the open and admit that all such statistics are skewed and affected by numerous factors. Please read the fine print on both of these sites, which explain how they arrived at their respective numbers.

Nevertheless, what can we learn from a quick glance at these two charts? That OUTLOOK IS STILL KING. Seriously, when one antiquated platform commands such a lead, it’s hard not to consider this your baseline. Set the controls for 1999!

---

Step 3. CSS layouts? Never use ‘em..

First things first, in HTML Email there’s only inline CSS. Some EMSs allow some styles such as background colors to be specified in a STYLE tag inserted just after the opening TABLE tag, but these can be hit or miss depending on the recipient. You also can’t rely on a CSS reset to zero out all of your margins and padding. Don’t think that some email clients won’t add their own default values and ruin your layout.

The CSS allowed in the majority of email clients is a lot closer to CSS 1 than anything we use on websites today. It’s also longhand. There’s none of this funny business going on:

<p style="font: 18px/1.35em normal normal Arial, Helvetica, sans-serif #000000;
margin: 0px 5px 0px 0px; padding: 0px;">hello world</p>

In HTML Email, we need to use something like this instead:

<p style="text-align: left; margin-left: 0px; margin-bottom: 15px; margin-right: 5px;
margin-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px;
padding-top: 0px; line-height: 1.35em; font-family: Arial, Helvetica, sans-serif;
font-size: 18px; color: #000000; font-weight: normal; font-style: normal;">
hello world</p>

I know it seems like more than twice the code, but that’s the deal. Just do it. A good way to make sure no shorthand is included automatically is to set your prefs in Dreamweaver (or tool of choice) to something like this:

Now, for page structure, you’ll want to get to know this snippet of code:

<table width="750" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td valign="top" align="left"> This is my first table! </td>
</tr>
</tbody>
</table>

In HTML Email, it’s table-based layouts or nothing. You will use table cells for every block of content. You will nest tables to position items in various locations on the page. You will travel back in time to 1999!

There are no DIVs per se in HTML Email. Okay, maybe there’s one—just one—that wraps your entire page like so:

<div align="center">
<table width="750" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td valign="top" align="left"> This is my first table! </td>
</tr>
</tbody>
</table>
<div>

That’s kickin’ it old school, right? It’s a good idea to center your entire email and to add a redundant centering table attribute as above, if just as a fall-back. Try to keep your code away from the browsers’/clients’ edges where they can mess with it and skew and hide pixels and such. It happens!

Next, burn this into your memory:

<img src="http://mydomain.com/images/image.jpg" border="0"
style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
display: block;" />

Some clients may treat images as inline elements, others as block elements. The display attribute here just cements this and allows you to code accordingly. Also, it’s very important to zero your margins as some email clients will add some by default like in this Gmail screenshot:

This is perfect example of how you can spend so much time designing something and so little time coding and testing it to make sure it renders correctly. This same lesson was not learned here either:

Unfortunately, you can’t really know unless you test, which I’ll cover below. You also can’t check your email’s source since many email clients rewrite your code to suit their needs. Just take a gander at your Gmail source code and try to figure out what’s what.

---

Step 4. Dig around and get your hands dirty with other peoples’ code

Remember the good ol’ days when there weren’t a complete library of O’Reilly books on every subject and you had to scour around the web viewing other peoples’ source to figure things out? Wait, these still are the good ol’ days! Search around and you will discover some great design & code examples created by folks who’ve figured a lot of this stuff out. EmailCraft gladly airs their laundry in this gallery of examples.

Campaign Monitor has made available these free, ready-made HTML templates designed and coded by some of the web’s rock stars.

---

Step 5. Create a baseline HTML Email Checklist

Coding requirements vary from EMS platform to platform so be sure to check what’s required for yours. Below is a general HTML Email checklist that should serve as a good starting point. Some things to consider:

• Width – Try to keep things within 800 pixels max. You never know what someone is viewing your work on and how many stupid sidebars, menus and ads are creeping in from either side.
• Fonts – Stick to the fab five: Arial, Verdana, Georgia, Times New Roman (Times) and Courier (Courier New) in all their variants (normal, normal+italic, bold, bold+italic) and colors (go hog wild here!)
• Absolute URLs – You cannot display images in your emails any other way than to host them on a server and point to their absolute URLs.
• Image file formats - Stick with JPG & GIF. Remember, it’s 1999.
• Markup – Use HTML4 or XHTML Trans/Strict and collapse your indents and remove all spaces between tags in your markup. Code for email is not poetry.
• CSS – Use minimally, inline only and NO SHORTHAND. The most common support for inline CSS is with text styling, padding, margins and borders. Remember that CSS will always fall-back to your HTML markup.
• Global Styles – There are none reliable enough to use across all email clients. Instead, every HTML tag (P, A, TD, etc) requires its own “style” tag.
• Margins and Padding – Each element needs to have its own margin and padding values. You might think to apply these to a TD and that every P tag within will inherit. You might be in for a surprise!
• Text-Align – Like many style attributes, double duty is required here. Both your TD horizontal alignment and your P inline style text-align values should match.

…and some things to avoid:

• Animated GIFs – While these may display in some web-based email clients, only the first frame will load in most. Why put that much work into something that will only be seen by a few?
• JavaScript – You’re kidding, right?
• Flash Animations – If it were possible, wouldn’t you have been inundated with these by now?
• Background Images - Best to avoid them. While support is growing and hacks exist, stick with what you know, which is that unlike background images, solid colors display correctly EVERYWHERE.
• Forms – For a host of reasons, this is just naga, naga, nagonnaworkhereanyway.
• <HEAD> Tag Content – TITLE and META tags and the like have no place in your HTML Emails. Most EMSs allow you to put this info in your campaign interface on a per email basis.

---

Step 6. Setup your EMS account

This is not necessarily an endorsement, but I highly recommend you hurry over to MailChimp and sign up for their Forever Free Plan to use as your test EMS account. It’s a full-featured account limited only by the size of your list (up to 2,000) and the number of emails you can send out per month (12,000). More than adequate for a test account!

---

Step 7a. Test your work: The Free – Setup multiple test accounts

Get a copy of Outlook and install it on a PC/partitioned Mac/wherever you feel comfortable. Create a test list in MailChimp with addresses for your Outlook/Apple Mail clients and each of these webmail services to send your test emails to:

• Windows Live Hotmail
• Gmail
• Yahoo! Mail

Don’t forget to test your webmail accounts in different browsers to see if things are shifting around.

Step 7b. Test your work: The Paid – Use an email preview service [REVISED April 5, 2012]

While it’s hard to beat FREE with a stick, you eventually have to consider what your own time and energy is worth. Litmus and Email on Acid are services worth every penny of the fees they charge when you consider what they give you access to. For example, below are the results of an email that was tested using Litmus on 16 different email & webmail client configurations. It took only 8 minutes:

I shouldn’t even have to make a comparison between free and paid as this group of thumbnails (each clickable to reveal an actual size screenshot) should explain the benefits well enough.

Another service [currently in beta as of April 5, 2012] is Fractal, which claims to “Fix your HTML email code in under a minute.” Apparently you just code your email like a web page, upload it and their app will automatically convert it to email-compatible markup. Voilà.

The choice is yours to test with free or paid resources. Just do the math and find what works best for you.

---

Step 8. Test Early and Test Often

In time you may find that some inline styles appear to render predictable results. Don’t take anything for granted. Use your various test accounts or your email preview service to make sure that your emails display correctly in all target clients.

---

Step 9. DIY HTML Email articles and resources [REVISED April 5, 2012]

Finally, here are some resources for designing and coding HTML email templates. This is by no means a definitive list, but a real good starting point:

HTML Email Boilerplate - Conceptually similar to an HTML framework such as the HTML5 Boilerplate with the added zeroing-out of a CSS Reset—but for HTML Email—this heavily commented HTML template attempts to both inform you of the various email client pitfalls and help you avoid them. It’s a great starting point for anyone brave enough to enter the dense thicket that is HTML email.

Email Standards Project - Includes an email client rap sheet (somewhat dated, but still good info on baseline CSS support) and a now-historical saga of trying to get Microsoft to fix Outlook.

HTML eMail Troubleshooter via SitePoint is self-explanatory and useful.

Premailer – A CSS to inline-style converter for the masses.

Getting Started with HTML Emails via tutsplus is another excellent primer on the subject with beau coup resources.

6 Easy Ways to Improve Your HTML Emails via tutsplus has even more helpful tips.

Add a background image to your email in two simple steps via Campaign Monitor—I know I said not to, but what the heck. Experiment!

---

Step 10. Let someone else do all this for you

EmailCraft, [NOT AN ENDORSEMENT—I have no experience using this service] from the PSD2HTML folks, offers relatively inexpensive e-newsletter design & coding (or just slicing and coding your PSD) with a whole slew of output options.

Again, it’s your time and your money and you’ve either got enough of one or the other. Check out your options and your tolerance for this stuff and create a solution that fits your budget and your workflow. In the meantime, I’ll still be here coding like it’s 1999.