Design Considerations for HTML Email

I was asked by a potential client today if there were any good online resources to learn about special design considerations when you're creating HTML email newsletters.

After a quick look in Google I couldn't find anything that hit all the points I thought he should know about, so I ended up writing something up for him quickly myself. Not wanting to keep this information to myself now that I've taken the time to write it out, I figured I'd publish it in this blog.

There's not a lot of explanation with these points, but if you've been digging into html email/newsletter best practices, it should all make sense to you.

Here ya go...

• 600 pixels is the generally the recommended width for html newsletters, allowing for the full width to be displayed even in clients like Outlook where the software takes up considerable real estate on the left of the screen and previews the email on the right.
  
  
• It's critical to practice “vertical economy” for all elements of html newsletters. For instance, if the masthead or top banner is too tall, the headlines can very easily get pushed down “below the fold.”
  


• When creating comps for newsletter designs, it’s critical to bear in mind that html newsletters must be coded with old-school tables (not CSS). Text can be formatted with CSS if desired, but text encoded in this manner will not render properly in web clients like Gmail (Gmail strips out ALL CSS).
  
  
• Images must be used carefully if emails are to be remotely readable prior to images being displayed in the email client. While well-branded companies like Apple can arguably get away with having image-based emails, it’s generally considered a bad idea.
  


• My recommendation is to build the email in a manner where headlines and titles are readable without images being displayed. Alt tags, of course, also become quite important.
  


• My personal preference for a nice, readable layout is a 1:3 two column layout with the narrow column on the left side (150 pixel left column, 450 pixel main column). Set up like this, the left column is very effective for call-outs, table of contents, appropriate ads and promotion.
  


• Generally, the most practical approach to ongoing newsletter production is to have a professional designer mock it up, get a competent coder to do the initial html templates, and then have the editorial or production staff place the articles in each issue (possibly with a little help on the graphics).
  


• Also, in general, the simpler the better for layout. While the temptation is always there to build it out to the nth degree, a simple layout that can be quickly and easily edited for each issue makes ongoing deployment WAAAY more quick and practical. Also, while the layout needs to meet branding guidelines and represent the company well, a straightforward, consistent layout is also in the best interests of the reader.
  
  
• Expect to engage in a significant amount of testing to ensure the initial template renders properly across a wide range of email clients (including gmail, aol, yahoo, hotmail, .mac, mac mail, outlook 2007, windows mail, etc). Its kind of painful, but this time spent up front will save a ton of time troubleshooting down the road.
  
  
• Many of the email service providers provide wysiwyg templates, but depending on the complexity of your layout and the proficiency of those administering it, Dreamweaver can be a more practical option (my preference).
  


• Generally, I lean towards having shorter articles in the newsletters. If there is a longer one it is best to go as the last article. If there tend to be a number of longer articles, it’s usually best to provide short excerpts combined with links to the complete article on the site (which should be part of your SEO strategy as well).

Happy coding!