Email Design & Development Best Practices

Guidelines for building email blasts that won’t get flagged as spam

One of the things that spam filters look at is the text-to-image ratio of your email. Spammers like to send messages with images and little text, because the spam filters are analyzing their text. Therefore, if a legitimate business sends an email which has a high image-to-text ratio, the spam filters are likely to think that the email is spam, and send it to the junk folder. They may even come to the conclusion that the business is a spammer, and block them.
Unfortunately, there is no hard and set rule as to what a safe ratio is, but a good rule of thumb is that you want at least one paragraph of text for every image. Ideally, our goal is at least 40% text on an email. Sending out image-only emails will decrease the messaging ability, as most are either immediately flagged as spam or cannot be viewed in the preview panes (which will drive down the open rate, assuming the email manages to avoid the junk folder). Other things that can trigger being flagged as spam:

  • adding random text to go with images in the email in an attempt to fake a good text:image ratio.
  • including an image file as an attachment—many spam filters and virus checkers will junk your email because it has an attachment.

Ensuring your email can be viewed properly in the largest variety of email browsers possible

  • Stick to the Basics. CSS-based layouts are only successful in the most compliant of email clients. Your design will render more consistently when HTML tables are used for layout. Limit the use of CSS to inline styles, as external and embedded styles are stripped out in Hotmail and Gmail.
  • Design with Image Blocking in Mind. Plan how to best use graphics in your design. Images should act as a supplement rather than the main focus of your design. Even with images blocked or disabled, your design should be readable and the call to action clear. In cases where an image must be used, don’t forget to include “alt” tags in the tag. Additionally, it’s best
    to use HTML text and web-safe fonts wherever possible.
  • 600 is the Magic Number. Although monitor resolutions vary, we recommend keeping your design at approximately 600 pixels wide to avoid horizontal scrolling and to ensure that your primary message appears in the preview pane.
  • Avoid Rich Media. Embedding Flash or video in an email will cause major deliverability issues. If delivered, these design elements will be stripped or disabled. If you want to use rich media, use a screenshot of the media linking to the “live” version on your website. Animated .gifs are also alternatives that work across many—but not all—email clients.

Backend/Troubleshooting Issues

Due to the finicky nature of how all the different email platforms display HTML emails, it can be a frustrating experience to troubleshoot problems, such as layout errors. If you are building your own HTML emails with a desktop program, we recommend not using WYSIWYG (What You See Is What You Get) editors, such as Adobe Dreamweaver. These programs make the initial build fairly simple; however, they also add a large amount of extra code every time you make a change using the WYSIWYG tools such as bold, italics, color, size, etc. This code is normally added as a CSS style class, and those classes are written into the header of the html file. However, a good chunk of email programs strip out all styles from the header. At this point, you’ve got an email that won’t render properly on most platforms, and will take three or four times longer to edit and troubleshoot. Our recommendation is that you consider moving to a different editor that is text-based, but includes a preview pane. A comprehensive list is available here (suggestions 1-14 and 40-51). This list includes options for both PC and Mac, but we highly recommend Coda 2 for the Mac users.