Skip Navigation

How to program your e-mail to improve its functionality

SUMMARY: Even if you are not involved directly in the programming aspects of your e-mails, you can set expectations and ask intelligent questions.

Following these guidelines will help to prevent e-mail problems and to ensure important messages reach your audience, make a positive impression and get optimal results.

Restrict HTML e-mail to 500-600 pixels wide
Very wide HTML messages often force the recipient to scroll horizontally to view the entire message. Messages that are too wide are problematic, even in a preview pane.

Use an e-mail marketing product that allows you to send a text version of your message along with the HTML version
In addition to being another criterion for some filters, the text version of the message ensures readability by e-mail clients who aren't receptive to HTML messages.

Use an HTML validator to close HTML tags properly
Poorly formed HTML often results in e-mail messages rendered in surprising, undesirable ways. HTML validators ensure your message uses properly formed HTML. Most professional Web-design packages and browser add-ons, such as HTML Tidy, include this feature.

Don't link to external style sheets
Use inline styles tied to individual HTML tags, as they display more reliably. Avoid CSS. Although CSS on a Web site can simplify the coding process and ensure a consistent style, in HTML e-mail, CSS can cause incorrect rendering or get stripped out or overwritten. Don't embed CSS in the header tags, as many e-mail clients strip those tags from the e-mail. Inline CSS also can be embedded directly in the message code.

Balance text and messages
An image-to-text ratio of 60:40 is generally acceptable. Filters look for e-mail messages with only images. If you embed your text and graphics into a single image, you risk your message going straight to the intended recipient's junk folder.

Host rich-media functions such as inline audio, video or Flash on your Web site instead of embedding them in an e-mail
Post a link that connects directly to these functions on your site. Many recipients won't have the compatible computer platform, e-mail software or correct version needed to render those functions correctly. Embedded Flash doesn't work consistently in most e-mail clients. Your e-newsletter can have an impact without using Flash or other overboard design elements better suited to a Web site.

Avoid scripting (JavaScript, Visual Basic, etc.) if you can. 
Instead of risking your audience seeing a JavaScript warning when trying to read your message, omit it. Instead, move readers to your Web site, where you can use dynamic components safely. In most clients, JavaScript is disabled as a security precaution. Usually the scripts will be stripped out, causing the intended function to break. Sometimes scripts are mistaken for malicious code, and the message is rejected outright.

Use absolute, not relative, links
Relative links increase the risk of all links and images being broken in an e-mail because the client won't know where to get them. It's like addressing an envelope with a street address but no city or state.  If you code a link to go to “” the client has all needed information. If you just code the links as "/scholarships/," it is incomplete.

Use background images carefully
Background images for individual table cells are generally acceptable but may not appear in clients such as Lotus Notes. Also, some ISPs filter e-mail with embedded images. File size can get quite large with multiple embedded images, which also can get the message blocked. Instead, host those images on your Web site and make sure all paths point to the full URL. Also, keep your Web designer aware of the images to which you are linking in your e-mail so s/he does not inadvertently replace, rename or delete them and cause those images not to display in your e-mail.

Use image-alt tags
These show one or two words describing an image or an action when the image doesn't display because of slow loading time or image blocking. However, remember many ISPs and e-mail clients that block images also block alt tags. Add the most important information about the image in the alt tags—for example, “Subject for Next Sunday School”—something that prompts the reader to move to your call to action.