HTML for better emails – hot tips

src: 04/08/2008 smart Focus

HTML for better emails – hot tips

Different web browsers render HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) differently. What is often overlooked is that email client software such as Microsoft Outlook and Mozilla Thunderbird, and webmail such as Hotmail, Gmail and others, also render content differently. And just to complete the picture, sometimes web and mail software from the same supplier will render things differently.

So here’s how to ensure that your mail looks smart and professional no matter what software lies in wait…

  1. Keep it simple. Use well-written content and perhaps one attractive image. Don’t throw in javascript, animations, Flash, forms and the kitchen sink. These are best saved for a microsite page linked from the email.
  2. Use CSS cautiously if at all and only if you’re super-confident that the email client used by your readers will support them. Support for CSS varies wildly: linking to external CSS files is largely unsupported in any software; embedded CSS won’t work in Google’s Gmail; inline CSS is limited in Microsoft Outlook 2007.
  3. Be image-conscious. Almost all mail software will handle pictures without too many problems, but remember that putting all of your content into one beautifully-designed, large image will likely get your email flagged as spam. It is also wise to avoid tricksy pictures like animated gifs.
  4. Be aware that your readers may not see images automatically if they have their client software set to block images by default (Windows Live Mail automatically blocks images unless you have been safelisted). So make sure your mail looks good without the image, and that all images have alt_text tags defined.
  5. Although a lot of ‘best practice’ for the web cannot be applied to email because of the lack of support for CSS, you should still take care to ensure that code is properly nested and tags correctly closed.
  6. Always use a ‘show in browser’ link at the top of your email. Provide safelisting instructions in your emails; safelisting not only helps your email to render correctly but ensures that your readers receive it in the first place.
  7. Test, test, test. Since the majority of mail clients are free, and the paid-for software is downright cheap in the context of your overall marketing budgets, you have no excuse for failing here. You must test-mail to every client you believe your readers might be using.
  8. Remember, too, that readers may switch between email clients. Those one the move may use webmail clients rather than desktop software; a business audience will include a number of Blackberry users; an increasing number may be reading email on iPhones.

2 thoughts on “HTML for better emails – hot tips

  1. Check out the Emogrifier, a free open source PHP utility that will merge your HTML and CSS files into a gmail friendly email. You can try it out instantly using the web-based version of the utility as


Comments are closed.