HTML Email Design Tips

In this issue of List Building for Bloggers I'll give some hints and tips on making your HTML mails work well in most readers. It isn't a "how to design great looking email" post; it's "having designed your great looking email, here's what you do to get it to look right" post.

It isn't as simple as you might think. It certainly isn't as easy as you want.

[This is the latest article in the List Building for Bloggers series – Click here to read all the recent #LBB posts]

All HTML is not created equal

HTML is the "language" - the code - that web pages are written in. Every web page is HTML; in fact is has to be in order to be a "web page" in the first place. Now, some of that HTML may be just enough to host the Mother of All Flash Objects (e.g. game and movie sites), but they all start as HTML.

As you also probably know, despite one's best efforts, some sites look sightly different, or behave slightly differently, depending on the browser you're using. The more complex the site, the greater the risk that some browser incompatibility will cause something funky to happen.

And it gets worse with smart phones.  BlackBerry browsers, let's be honest, are simply awful. iPhones and Android devices are a whole lot better because they use the same core browser technology that powers Apple's Safari browser (amongst others). But phones have different size screens, and they're typically a lot smaller (not just physically, but in the number of pixels they have) than most computer screens. It all adds to the fun of web site design.

HTML, CSS, WTF?

As well as HTML, graphic designers use a related technology called CSS which helps make sure that the HTML displays (or "renders") the way they want. Like HTML, there are multiple generations of CSS, and each browser supports CSS to varying degrees. CSS is really, really powerful - and can get really, really, complicated - but the tools that graphic designers have rely on CSS to turn the HTML they build for sites into something that, more or less, within a certain degree of acceptability, looks and works the same way no matter where the web page is viewed. CSS is great for web sites; it helps eliminate many browser compatibility problems and makes complex / interesting web sites much easier to build.

So the typical web designer has to deal with all of this in order to get your web site to look good on all the different platforms and browsers that are out there.

It's a lot of work. It's complicated. It's often infuriating, fiddly and tiresome to boot.

They have it easy.

Welcome Back to the Stone Age - HTML for Email

Because it's just worse here in email-land. There are many more email apps (aka "clients") than there are browsers out there. There are desktop clients (e.g. Outlook, Thunderbird, Notes); the email app on your mobile phone, and web apps (gmail, hotmail, Yahoo!, whatever your ISP or cable company gives you).

All of them have different HTML rendering engines. All of them make different decisions about how to render the HTML. And, especially for desktop email clients, people can keep using the same app around for years and years (I still use Outlook 2003 personally, for example). Many of the older ones only have basic support - or even none at all - for things such as CSS.

Oh, and there are some email clients (I'm looking at you, Gmail), where lack of support for these capabilities is a design decision. They could support this stuff (if Yahoo and Hotmail can do a better job at rendering than gmail, it isn't a case of it being impossible). They simply elect not to. Don't like it? Tough luck.

So all the tools, technologies, that your web designer uses to build your beautiful web site? HTML 4, CSS 3? No good for email. Forget it. They're really not going to like what one has to do to get good HTML email rendering across the broadest set of email apps.

Email CSS Compatibility - the Chart of Doom

Corporate email provider Campaign Monitor has an excellent resource they update from time to time on the CSS support each major email client delivers. If you're a graphic design maven, gird your loins and read the whole post there. The chart doesn't yet include Android mobile devices, but since Android uses Apple's WebKit (well, mine does), the iPhone column will do for now. For bloggers, I'd caution that the market shares listed at the foot of the table will probably not reflect your readers' email software use, since you're much more likely to be talking to consumers. As such, webmail services like gmail, yahoo and hotmail etc will have a much higher share of your readership than indicated on the chart.

As a blogger, though, graphic design is no more your job than it is being a full-time email marketer. What the heck are you supposed to do to get your emails looking right across the board, given this degree of complexity?

K.I.S.S.

Keep it simple, silly. The whole chart at Campaign Monitor is useful for graphic designers, but for the rest of us there are two areas that merit picking out.

They are the Notes 6/7 and Gmail columns, and the background and colors sections. Here they are, excerpted (remember, the source post with the whole graphic is here). Just look at all that red:

What you need to internalize from this is really basic:

1. Gmail and Lotus Notes 6/7 really stink at CSS (and Outlook 2007/2010 is pretty odiferous too);
2. Doing anything other than simple foreground colors is asking for trouble.

And it gets worse from there. More advanced CSS used for positioning and what's called the "box model" is inconsistently implemented, if at all. Use these CSS features at your peril.

The Blogger's Advantage

Ok, so this whole HTML email thing is one giant screaming nightmare, right? What are we to do?

Well, it isn't quite as bad as it seems as long as you follow a few basic rules of the road.

Better yet, as bloggers and content marketers, we actually have a huge advantage compared to corporate email marketers building custom "blasts" (ugh) every time they run a mailing. We deliver our messages in consistent form - what most email services call a template - time after time after time. The basic layout is similar every time we mail; only the post content changes. So what you need to focus on is getting the template right; once done you ought not to have to worry about rendering much in the future, provided you're a teensy bit careful with how you build your posts (and more on that below).

HTML Email Rules of the Road

For best results and the most consistent rendering:

1. Don't use CSS at all. Use standard HTML tags - yes, even the nominally deprecated ones - to format your posts and template. So use old-fashioned tags such as the font, b and em tags; and use HTML tag attributes such as color, bgcolor, border, align attributes etc. instead of CSS. Don't use the style attribute; as soon as you do you're going to have rendering problems.
   
2. Never, ever use CSS positioning statements. Use HTML tables to lay out your page. Yes, tables. They work consistently in HTML email; positioned divs won't.
   
3. If you do use CSS for style, specifiy as much as you can as style attributes of the relevant HTML tags. Gmail in particular will simply ignore style tags and the classes / selectors they define or modify. Just to add to the fun and games, CSS will not always cascade as it should in some webmail clients. So if you're getting really fancy (again, don't), you're going to have to specify the style attribute on each tag.  But, really, don't do this. Specify a font, color etc. in the template with the font tag and be done.
   
4. Don't use background images. They're inconsistently implemented, and if the subscriber is viewing with image display off, not having a background can make your email unreadable. In fact, if you can, avoid background colors too. Same reason.
   
5. Don't use external stylesheets or classes. Did you not see the chart? They won't work in gmail at all. They also won't work in any email client where the user has images disabled. Besides, you're not using stylesheets, right?
   
6. Always specify width and height for images. It makes the page look heaps better if there are no images, smooths rendering when images are being downloaded, and for some email clients (Outlook 2007/2010) stops images being displayed as too large or too small if they are downloaded late.

THE BOTTOM LINE: If you build your HTML template and party like it's 1999, you're going to be just fine.

It's also safe to ignore these rules, as long as you're ok with the email not "looking right" in certain email clients. That should be a business decision, though; don't take it lightly. It is also true that you can specify styles and classes (in which case redundantly include them in the HEAD and BODY of the HTML), knowing that email rendering will be better in those email clients that support them. By all means specify that images shouldn't have a border via CSS. But again, you need to know what your baseline is without that support, because you simply can't rely on it.

Other best practice

• Use meaningful alt tags with images. When an email app doesn't display an image, it will typically display the "alt" tag in the box the image would have occupied instead (and if there isn't an alt tag specified, it may display the images URL, which will be very ugly). Why meaningful? Because you still want to get your message to the subscriber. Don't have an alt tag of "logo" - make it "The Latest from " or something. If you have a lot of imagery, see if you can "read" it using alt tags with images disabled. By the way, your blind readership only has this way of "seeing" images. Make your mailing work for them too.
  
• Use a few, small images. The less work your email app has to do, the faster your email will display. Fast is good. Your beautiful 1MB photo will simply stop your mail from displaying right - if at all - for your mobile customer or the rural subscriber without broadband access.
  
• Think about the preview pane. If you only have 3 lines in the preview and the user is going to decide whether to open your mail based on that, get the details up front - e.g. view online, the latest from , new coupon from Target today only etc.

Posting

Once you have your template happy (see testing below), you shouldn't have to worry much when you post. There are a few things that can mess up in certain readers, beyond the CSS tips above:

• Keep the HTML simple in your posts. No CSS! Try to avoid using classes within the post itself.
  
• Always specify image sizes for all images.
  
• Always use alt tags for images. 
• If you have active content (e.g. script, embedded audio, flash, even forms), provide options in your post to access the content if it doesn't appear, because in email it probably won't (well, apart from video, which FeedBlitz fixes for you).
• Don't use MS Word to create posts. It adds lots of CSS and styles and will mess things up royally.

Testing

So there are three main problem email apps. Gmail, older versions of Notes, and Outlook 2007/2010. Most bloggers are unlikely to have many Notes users, and since it's about as useless as gmail, for most of us gmail can be used as a proxy. Once your mail looks OK in gmail with and without images, you're 95% of the way there everywhere else, especially when you follow the other rules.

To quick and dirty testing, then. Send yourself test mails from your system, and view in gmail. View with images on, and then view with images off. Don't like it? Edit, rinse and repeat.

Be Realistic

Finally, understand that 100% perfection across all email apps is very, very hard to achieve. Know your audience; if you have extensive readership on old Notes platforms you should verify your changes on Notes once you have gmail working acceptably. If your audience is using mobile devices more - and who isn't these days? - then consider how your template should change to accommodate the different form factor: Perhaps you can go from a fixed width to a flowing layout? Understand what compromises you are - and are not - prepared to make.

For FeedBlitz Users and Prospects

If you have a template you like from another vendor or service, please contact technical support. We'll be more than happy to help you convert it to our templating tags to simplify transitions.

Next Up

DIY or outsource: some help on deciding.

About List Building For Bloggers #LBB

Written by Phil Hollows, the FeedBlitz Founder and CEO, List Building for Bloggers (#LBB) is a series of posts to help you make the most of your blogging by harnessing the power and capabilities of email, the universal social network, with your bog and social media communications. No matter whether you're a novice or a more advanced blogger, there will be something for you to learn, apply and benefit from in this series. Click here to read more about #LBB

P.S. If you think your friends or followers would find this series valuable, please retweet on Twitter or "Like" on Facebook using the buttons below. Don't forget to use the #LBB hashtag when you do. Thank you! And if you have a comment, contribution or something else to say, please comment too. :-)