Designing HTML Email templates

From time to time we revisit the topic of HTML email templates to keep ourselves informed about the state of email standards. Over the past few years we have received more and more requests to develop email templates for regular mailings to large client lists. From a programming standpoint we are fully aware of the limitations that come from trying to implement a design that will work in multiple email browser clients. In past articles we've made note that certain email browsers do not handle modern HTML very well and that modern CSS won't necessarily work either.

Since we need to use a much older form of the HTML programming language in order to build HTML email templates, we have some immediate programming limitations that are not seen when developing for standard websites. We are developing these email templates for some archaic email browsers. While the email browser market out there is getting better, we still have to take into account that not every business keeps their software up to date. That is where we need to start. We develop for the archaic versions first to be sure that the minimal intended look is getting to these browsers. When thinking about an email template design we need to start with the simplest look that works well with browsers like Outlook (versions 2007, 2010). Since both of those versions of Outlook are widespread, if the design works there we have a good starting point.


One of the most frustrating things we have to deal with when it comes to email templates is the inflexibility of the layout. Because we have to build our templates on a grid, that means that we can't make things overlap. A design with overlapping elements requires the design to be cut into blocks and laid out using table cells containing images. The weird thing here is that one of the old tricks to doing layout in tables was to prop open spacing elements using spacer graphics. Some email browsers strip out those spacers which effectively breaks the layout. The general rule with email templates is to make the design dead simple. All of the restrictions imposed by the browsers and old HTML mean that a design with a lightweight layout and minimal graphics will always work better that something that has a large number of graphics and a complicated layout.

Fonts and Images

Fonts are fun and can help a design immensely. Unfortunately support for fonts in email templates is again very limited. Modern email browsers can usually handle some web based font providers like Google Fonts. But again, the email browsers previously mentioned don't necessarily recognize the code calling to those external resources. That being the case, from a design standpoint, if the design can be made to look good with standard web safe fonts that are available on the vast majority of computers, it makes the designer's life simpler. Unfortunately that means the designer's toolbox becomes a bit limited.

Images are part of the design that help sell the information to the recipient. The rule however, thanks to the prevalence of spammers, hackers, and phishers, is that images (which are technically attachments) do not necessarily display by default. The ability to display images in emails is usually a defined preference in the email client settings. So if the design can look good without images either then we're way ahead! Images types are also limited thanks to browser limitations too. Some email browser clients don't support .png file format. That means that if an image requires transparency, it has to be a .gif.

A final note

With all of the limitations thrown in the path of HTML email templates, it can be a real challenge to come up with something simple and beautiful that will work in those old but very prevalent email browsers. For a more detailed analysis of what was discussed here from both a design and programming standpoint you can read the guidelines that one of the best email campaign sending sites on the web.
[ ]

to blog