Designing and Developing HTML Emails

Posted by on May 2, 2011 in Journal | No Comments


Designing and developing for HTML emails is a totally different animal than for web. With web, you have to design keeping in mind that most screen resolution nowadays is 1024×768 and how different browsers and platforms render a site. With email, on top of those items for web, you also have to think about all the different email clients. Certainly Outlook is the most common email client. But then, different releases of Outook render emails differently. In 2007, Microsoft switched render engines from Internet Explorer to Word.  Why? I don’t know. Not fun for most designers to design and develop for.

So does this mean we have to design for the lowest common denomenator? Well, know your audience. Get metrics on what your audience mostly uses. If your current email marketer doesn’t track those metrics, you can look into companies that do, such as Litmus or Campaign Monitor.

So there are some general rules in HTML email design.

  1. Avoid CSS. If you have to use CSS (and I do, hard to totally avoid), use inline css. Don’t link to one. Don’t put it in the <head>. Just use inline. Most CSS is support in most email clients but not all of them. Check this out.
  2. Keep your subject line short.
  3. The top left corner, roughly about 400 x 300 px, is the most important spot in the email to get your brand across. Read up here on why. Think preview panel.
  4. 600 px width.
  5. Avoid <div>. This is email, not web. Developing for all the email clients is a pain. <table> are your best bet. And set the width in the cells, not just the table. The more thorough you are, the more consistent the email will render across email clients.
  6. Don’t use background images. Again, not all email clients support background images. On PC, Outlook 2003 did. Outlook 2007 doesn’t.
  7. Test Test Test. Always research. Try to keep up with the trends. Things always change. Your subscribers, technology, etc.

Here are a couple of email designs I put together for Genworth Financial Wealth Mangement.


Leave a Reply