HTML e-mails

I was writing a brief for producing an HTML e-mail design this morning; thought I'd share my thoughts:

When designing HTML e-mails it needs to be kept fairly simple. Because it’s hardcoded in HTML (not CSS) you can’t do fancy things such as transparencies, in the same way as you could do with a web design. You can’t overlap stuff in the same way either, you can’t layer it, everything has to be absolutely positioned. Basically you're not designing a webpage, so throw that book out the window and start reading the HTML newsletter design book (i.e. search for some tips on Google).

For accessibility reasons consider body copy to be a web-font. Headings can be a corporate font rendered as an image as we can assign alt tags to those images but it is preferable to have these as web fonts also.

Consider the end user; people read HTML e-mails on mobiles, or in a reader like Outlook, Hotmail, Google… in all cases consider that even on a 1024 screen or above the space the e-mail is viewed in is rather small. People don't always open the e-mails, they view in the preview area which can be half the screen right aligned or about a quarter of the screen bottom aligned.

A lot of your audience are going to be looking at the e-mail in the bottom preview window.You don’t want to give too much space to imagery; you want the headline and copy to be right at the top (as well as some imagery of course) to grab their attention. Imagery can of course be used further down the e-mail too (and you can do drivers, and links, and share buttons, and all that jazz).

Another reason to render copy as webfonts is because of the way browsers behave. Most browsers don’t automatically download the images; so HTML e-mails have lots of X’s where the images should be. If your grabbing headline is an image then it’s not doing it’s purpose (because the user sees a bunch of X’s and deletes the e-mail). If all copy is a web-font then the user can read it, know the content of the e-mail, and choose if they wish to download the images.

You may find this article helpful: http://articles.sitepoint.com/article/principles-beautiful-html-email