Best Advice on Coding HTML Email Templates
Posted by contentgrrl on October 22, 2009
Sometimes, HTML emails just don’t work the way you expect. In my day job, I distribute HTML emails using a variety of applications, including Marketo, GroupMail 5, and a proprietary app integrated with our software issue tracker. Sometimes, despite my painstaking validation and link-checking, when I use the latter I get recipient feedback of broken links with all styles stripped, my link href URLs stripped and replaced with “/”, and other design nightmares.
The solution? You may have guessed the proprietary app, but it’s not necessarily the problem. You have to design HTML email templates as if you’re stuck in the mid-90’s, ‘cuz that’s how standardized email clients are.
Anand Graves’s simple WordPress blog includes the most straightforward and comprehensive HTML Email Guide I’ve ever seen.
For everyone who sends HTML emails, here are a few highlights:
- Much as we love/hate Microsoft Office — do not use Word or Outlook or even copy & paste from them. Office inserts a ridiculous quantity of hard-to-remove mso formatting tags. Thankfully, the WYSIWYG Adobe Dreamweaver ($$$) has a command to clean up Word HTML. If you don’t have the Adobe option and are collaborating with someone who insists on working in Office or Outlook, it’s worth it to paste into Notepad, which strips out all formatting, and then copy and paste into an HTML editor that affords highly clean markup. I invested in Adobe’s Creative Suite, but if i had to go without WYSIWYG, I also like Notepad++ (free). I also like the online WYSIWYG http://www.online-html-editor.org/ in a pinch.
- Use tables for layout, nesting a narrower 580-pixel-wide table within a 100% table, where the outer table’s cell has a white background. This is to accommodate recipient email clients that ignore the body tag where you usually define the background, as well as email clients that will display your email in a narrow preview (like Outlook 2007, Hotmail, Yahoo, and the like, to accommodate their banner and skyscraper ads.
- For images, specify both title and alt attributes for cross-browser display of the image description in case your recipient client doesn’t display images by default.
- Get several Webemail accounts for testing, including Gmail, Hotmail, Yahoo!, and AIM (AOL), and get desktop clients including Outlook Express, MS Outlook 2003/2007, & Mozilla Thunderbird.
Things I didn’t think of that Anand did:
- Remove unnecessary HTML tags that will be ignored or removed between you and the recipient. Surprisingly, these include Doctype, HTML, body, meta, head, base, link, script, title, frames, and comments.
- Instead of stylesheets (Unfortunately, body and head stylesheets are often ignored and replaced with client-specific styles over which you have no control), use inline styles in table cells to define the default font, font color, and font size for your content:
<td style="font-family: Verdana, Helvetica, sans-serif; font-size: 10px; text-transform: uppercase; color: black">Content</td>
- Use similar inline font/size/color styles in hypertext links, and use short URLs (extensively long URLs tend to get wrapped and broken):
<a href="http://www.tinyurl.com/####/" style="font-family: Verdana, font-size: 11px; color: blue">blah</a>
- Send the email as multipart/alternative, one part HTML, the alternative part plain text for the remaining recipients out there whose email clients don’t display HTML. I would rely on the email delivery software or service to be able to handle this (as advised by GroupMail and MailChimp), but Anand Graves’ HTML Email Guide has included instructions for doing it with PHPMailer, available under LGPL license.