Why does my HTML email look different to the recipients?

HTML formatted email can be pretty cool since you can make exceptionally beautiful messages. However when you send it sometimes all that work might simply disappear, and at worst be completely and totally unintelligible to your recipient. It is true that HTML is a standard however HTML is not rendered the same way by email programs. The problem is very simple: HTML was developed for web pages, and email is not a web page. Indeed, email programs are not web browsers.

HTML is incredibly powerful. And while not strictly HTML, things that you'll find on web pages built in HTML like Javascript, ActiveX, embeddable objects, AJAX and a bunch of other technologies have taken the web to a whole new and incredibly powerful level. But remember email programs are not web browsers. The question is, how much HTML must/does an email program support? The simple stuff is obvious: formatting like bold and italics, paragraph delineation and the like are useful and, above all, safe concepts. How about layout things like tables? Or more complex layout options like floating objects, font size changes and the like? The problem here is that these items are more difficult for email programs to display. So, HTML is powerful, but with that comes the ability to really mess things up. So different email programs have opted to support different levels of HTML. Some will support almost all HTML constructs. Some will support only the bare bones simple formatting constructs. And others don't know what to do with HTML at all, and end up displaying the HTML in it's raw format.

Given the mix of what might be supported and what might be not, it's simply unrealistic to assume you can control the exact appearance of what your recipient sees in email. You can control a few things, and of course you can control the text which is the point of your email anyway.

So what steps should you take?

  Use very simple HTML. The simpler you can keep it, the greater the chances that your recipients will actually be able to view it.

  Don't use Microsoft Word as your email editor. Word uses proprietary HTML that will only work if your recipient is also using Word to view their email.

  Be careful of WYSIWYG HTML editors to compose email. Unless you're hand-editing the HTML itself, they often create complex and cumbersome HTML.

  Don't go overboard with formatting. Use tables rather than CSS positioning, don't even think about using stylesheets, and use in-place attributes rather than any kind of in-line style definitions.

In the case your HTML get stripped out entirely make sure that your message still makes sense including if the formatting and the images disappear completely.

For more information read Email client HTML capability chart and Guidelines for using CSS in email newsletters.