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.