10 tips on designing and coding HTML emails

I’ve spent the past month and half working on an ongoing comms campaign with some heavy coding for [fairly] complex HTML emails. Some with dynamically generated content, most without. I’m working with very skilled colleagues who have put some high quality designs together, which I’ve been furiously coding to my best ability in order to represent properly when they drop into subscribers’ inboxes.

There’s a big range of hurdles to overcome when coding for email. My objective is to get the most consistent possible representation across email clients, and in 99% of cases I am successful across Microsoft Outlook 2000, 2002, 2003, 2007 and 2010 Beta, Gmail, Microsoft Live Hotmail, Yahoo! Mail, Thunderbird 2.0 and 3.0, Lotus Notes 6.5, 7 and 8, Apple Mail 3 and 4, AOL Mail and Mobile Me.

If you’re thinking that you can write off a lot of these clients, especially older ones, because you’d like to code W3C valid markup and you think progressively - then these useage stats published by Campaign Monitor might change your mind. They indicate Outlook 2000, 2003 and Express with 32% usage share - by far the most commonly used.

Campaign Monitor also publish a very useful table of which CSS style elements are supported by each mail client. Quite long, but a useful reference if you’re unsure about using something specific.

These are my 10 top tips for a successfully marked up HTML mail campaign…

10 tips on coding for HTML emails:

01. Wind back to 1998 - the return of tables!
Forget DIVs, tables are the only way to get HTML emails to represent correctly in older mail clients, which are still the most commonly used. Outlook 2000 was a real powerhouse and it’s used widely by business and home users alike still today, so you need to make sure your emails work correctly for it. Cut your design up into a convenient grid structure than you can use to rebuild the entire thing in table cells. If you haven’t built sites for a fair few years yet then you may not remember the days in which this was just the way things were done. Most of us are glad things have moved on a bit since then. This doesn’t mean that your email doesn’t have to validate properly though - you should aim for it to pass as it’ll still have to render correctly across each browser when viewed in Gmail / Yahoo / Hotmail, etc, but it should use tables at its core which is not ideal for normal web standards. Oh and by the way, forget about applying background images to cells (or to the document as a whole) - they just don’t work with several clients, and the <body> tag is stripped out also.

02. Use Inline CSS Styles - Essential
Gmail and some other clients strip out code above (and including) your <body> tag, replacing it with their own. Understandable if they’re web based because you can’t declare those tags half way down a page. This means that externally loaded CSS sheets are an impossibility, and CSS enclosed in <style> will be lost in sending too. Instead, each element on your page needs to have style applied to it individually inline. So use <p style=”font-family: helvetica, arial, sans-serif;”> for example. This obviously does bulk out your code, so if you’re concerned about efficiency then you’ll have to use some clever planning to minimise the damage.

03. Use Premailer to preflight your inline styles
Premailer is a really useful tool that takes your CSS stylesheet and converts it all into inline styles. This means that you can code your email as normal, run it through Premailer, and it’ll spit out the proper inline styled version. An excellent time saving tool. I believe this may use Campaign Monitor’s processing engine, so expect high quality results.

04. Use run-time copy where possible
Most email clients, both web based and standalone software turn off images by default in new mail. Many users may never click to display the images in your email, so make sure if you have important copy included then its delivered in run-time (embedded text) format, instead of within an image. Obviously this means that your font selection will be limited, but this is no different from coding a site normally. I stick to run-time copy for body copy, and use text in images for headlines that need better type choices or further artworking.

05. Don’t forget Alt tags
Considering the last point, make sure your photos have descriptive alt tags, and any headings or other copy that is included in an image is represented fully in the alt tag for the element too. If your main heading for your email is inside an image, then DO NOT forget to make it an alt tag too, or the primary message for the email could be lost!

06. Always include a Plaintext version
Some mail clients just won’t display images at all, and some subscribers will have opted for plaintext mail only, so ensure you send both / multi-part. Thankfully Premailer also offers a tool that outputs a plaintext version of your email for you, so with a bit of tidying up the whole thing will be done for you.

07. ‘Above the fold’ applies, sadly
I’m no advocate of ‘above the fold’ style thinking online, as I believe that web users are much more used to scrolling to explore content, they don’t necessarily engage with a site in a linear context, and they can also be guided through effective design and messaging. However for emails this is slightly different due to the Preview pane built into many email clients. This displays a short strip of your email to the user without them opening it in full, normally no more than about 300 - 400px from the top of the mail, often with images turned off - so make sure your core messaging is included in this section, or at least something enticing enough that might encourage users to open it. I don’t normally include a call to action in here, as I believe if a user is interested enough then they’ll open it to read more first before clicking.

08. Keep it short and sweet
Including too much content in your email will negatively affect your click-through rate, as the user will either have been bombarded with content that they can’t be bothered to read, or will have been given enough information that they will have already decided on whether the specific promotion (or something else) applies to them. You ideally want to withhold enough that the user clicks through to your site to get more info, in which you can interact with them more thoroughly, and also gather some vital statistics on their interest and the success of the campaign.

09. Make call to actions matter
It’s an obvious one, but please if you expect a user to click through to your site then make the call to action simple and compelling. Include a statement about what they’re clicking through to, so instead of ‘Click Here’, use ‘Click To Buy’, and include some sense of immediacy, so ‘Click To Buy Now’, or ‘Limited Time Offer - Click To Buy’. Make buttons look like buttons - conventions will help you appeal to those users who aren’t entirely tech-savvy. Ideally there should be only one exit point from the email, not lots of optional things to click on, direct users to one well thought out landing page instead. That normally means dumping the nav bar you’ve put at the top under the header (these aren’t normally used very often in my experience anyway). Normally I apply the rule that if I think something is obvious, it ideally needs to be at least 3 times as obvious to work en-mass. If your call to action link is text based (ideally it’ll be more attractive than this!) then make sure it is underlined. If its image based (yes please) then it’s essential that the image has a representative alt tag as it will not be displayed by default and must still be usable.

10. Use Litmus for testing (don’t forget Hotmail)
Proper testing of your HTML email is critical to ensuring an effective campaign. There are LOADS of different clients, each with their respective quirks, so its tough to test properly without installing lots of bloated software. Litmus provide a pretty good testing environment which allows you to upload your campaign and get back a series of screen shots showing you how it will appear in each client. Litmus is not free but in my opinion it is very fairly priced for the resource that must be required to provide this service. At peak times it can slow down quite a bit, and it does occasionally crash and go offline altogether for certain clients, but generally this is top quality time saving tool. Oh, but they don’t include MS Live Hotmail, so for that you need to create a Hotmail account and test it yourself… I’m unsure why?

It can be quite stressful at times, but with persistence and patience the results can be rewarding. The worst offenders amongst the clients are Outlook 2007, which for some reason uses the MS Word rendering engine to display emails - much worse rendering than any other version of Outlook (and Outlook 2010 looks the same based upon their Beta), expect major problems surrounding colspan / rowspan; and Lotus Notes 6.5 which is also very poor especially with nested tables. Combining rowspan / colspan with nested tables can also mean a disaster. On some occasions I am guilty of writing Lotus 6.5 off as it has a small user base. Oh and one last tip - MS Live Hotmail will put a strange bit of extra padding around all of your images unless you declare each one as display:block inline. Crazy but true.

Remember… test early and test frequently to avoid wasting lots of time fixing and patching at the end!

Good luck with yours!

Photo courtesy of Post Box