Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

HTML Email Specifications and Best Practices

Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
1 (204) 957-5520 ext:151
1 (888) 237-9559
Ross McDowall Fearless Dwarven Warrior

Email browsers currently do not have any hard set standards associated to the display of HTML coded email. It is important to remember this as the HTML engine of email browsers, in some cases, is approximately ten years behind that of Web browsers. This means that much of the user experience related functionality that you see on web pages is not available in an HTML email. For example rollover buttons, javascript transitions, css transitions and effects, video, and audio are not reliably available in most email browsers.

The following items should be taken into consideration when developing a design for an email template.

  • Designs for email templates should be limited to 600 pixels wide at most.
  • Graphics must be sliceable on straight vertical or horizontal lines.
  • Multiple columns are available.
  • Text will not wrap around anything.
  • Transparency does not work. Any transparency effects should be done within the graphics and rendered as finished images.
  • Fonts to be used in the template as live text must be standard fonts available on all computers.
  • Safe font choices for sans-serif generally include the following: Arial, Helvetica, Verdana, Tahoma.
  • Safe font choices for serif generally include the following: Times New Roman, Georgia, Garamond.
  • Viewing images in emails is a setting on each person’s individual email browser. Assume that images may not be visible in the email. It is best to have all of your copy live text.
  • Video and audio cannot be embedded reliably into email templates.
  • A permanent video or audio file can be embedded into the template ahead of time as long as the file is hosted elsewhere on the internet. Best practice is that videos are linked to their actual web site.
  • Rollovers for links and navigation are limited to CSS hovers for links. These will only work in email browsers that support the CSS standard, otherwise they will only appear as standard links.

For more information on standards in email, please take a moment to visit the Email Standards Project. Visual Lizard has implemented its own targeted email system for which we develop email templates that follow the current limited standards found in the Email Standards Project. It is our ambition within all areas of web development to promote standards. We invite our design partners to join in that effort.