Email Design/Code Guidelines

WAG created this short email design guideline to provide you with the most common do’s and dont’s of coding a campaign so it displays as intended in multiple email programs.

Important Note: Email coding is not the same as web site coding. What works in a browser, will not always work in an email program. Don’t assume because it looks good in Chrome or Firefox that it will look the same in an email program.

  • Use Tables For The Layout Structure:
  • NO CSS, CSS shorthand or external style sheets.
  • Strip the HTML and BODY tags, they are not needed.
  • Create a single table cell container that defines the width of the campaign (max-600px) and nest tables inside it to create the campaign layout.
  • Div floats, margins and padding are NOT supported by several email programs.

  • HTML Fonts
  • Format all text using inline css only.
  • Use only universal fonts supported by PC, MAC and smartphones: Arial, Courier, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS, Verdana
  • Google fonts are NOT supported in most email programs, do not use them.
  • If you want to use a different font that is not considered a universal font, create an image.
  • Avoid using white or red text, these two colors are still flagged by email programs as “spam”. You can change the hue a bit, i.e. rather than using #FFFFFF for pure white, you would use #FBFBFB which is a very pale gray that passes spam detection.

  • Images
  • NO background images. They do not display in some email programs. If you must use one, make sure to always provide a solid background color in the table cell as a backup. Otherwise you’ll end up with a white block.
  • JPG and GIF are preferred format.
  • Do NOT name images using blank spaces in the file name, some email programs will not display the image. Dashes and underscores are OK.
  • Animated GIF images can be used however some email programs do not support them and will only display the very first frame.
  • Always insert an ALT tag on any image that contains text.
  • Always (mandatory) insert a zero border on the image and include “style=”display: block;”. This will prevent images from breaking apart and showing a thin white space.
  • Don’t use “floats”, instead use “align”. Also utilize “top, middle and bottom” alignment within the table cell to manipulate image positioning.

  • Video
  • Javascript/object tags are not supported in email programs so video will not work in an email. The solution is to create a screenshot of the video and then link to it for viewing in a browser.

  • Testing The Email
  • Always test your emails to multiple accounts. Include an email address that goes to Outlook (2007 or 2010), Gmail and Yahoo. If you have additional accounts (Comcast, AOL, etc), test to those as well.

The following two tabs change content below.

Maarit Durity

I've been involved in web design and development since 1998. Most of my career has been spent in the automotive industry which began in the early 90's when I worked for Tropical Shipping in their vehicle maintenance department. I've owned and operated an aftermarket parts company in the early 2000s, worked for an automotive marketing agency and have freelanced for clients who ranged from dealerships to service centers as well as insurance companies. I love designing and coding web sites, creating marketing materials and emails, writing articles as well as collaborating on projects as a consultant.