Five HTML E-mail Design Tips, Part 1
[Editor’s Note: This article first appeared in the debut issue of “All About E-Mail,” the new, free, weekly e-letter from the Target Marketing Group. To subscribe, click here. Look for Part 2 of this two-part series in the Sept. 10 edition of Giving 2.0, when the authors will explain the importance of designing for preview panes and testing your e-mail messages before they are deployed.]
HTML e-mail designers face a number of challenges when it comes to renderability across multiple e-mail programs. The lack of standards creates an environment where each ISP has its own rules. This means the same HTML code is assembled differently in each reader.
What looks great in one inbox could look terrible in the next, and e-mail designers must be aware of the differences for their e-mails to look good to every recipient. After all, how an e-mail looks is as important as what it says. And e-mails that contain missing graphics, broken links or formatting issues look sloppy and unimportant. What’s more, they have a much higher chance of being reported as spam.
E-mails should be designed for the lowest common denominator to render correctly in as many inboxes as possible. Below are some tips you can follow to avoid rendering issues in the major e-mail programs.
1. Stick to basic HTML. HTML e-mail design is light years behind Web design, so Web design rules don’t apply here. Stick to basic HTML since many complex coding tactics will be stripped out of messages.
2. Follow best practices for images. Images face unique rendering challenges because many ISPs turn them off by default. E-mails should be designed to look good with or without the images turned on.
When adding images, try the following:
* Use alt tags for every image. Be as descriptive as possible so recipients don’t have to turn images on to know what they’re missing. You may even include your offer or call-to-action in the alt so it remains visible at all times.
* Optimize images using GIF or JPEG formats and include height and width parameters so the sizing remains correct.
* Store images on a Web server and link them in the message using the full URL. This is the only way graphics will show up in e-mails.
3. Follow best practices for content. With all of the rendering difficulties that can be caused by images and coding issues, be particularly careful with your messaging. As a result, e-mails should include the following:
* Visible text. If the text is the same color as the background, the message probably won’t make it through spam filters.
* A pre-header with links to a Web version of the message and a prompt to add the sender to subscribers’ address books. The pre-header should let recipients know who sent the message, what it contains and how to view it properly.
* Your physical address, unsubscribe link, valid subject line and routing information, as well as a warning if the e-mail contains adult content. All e-mails should follow the current CAN-SPAM regulations.
Matt Elliott is director of client services and Brent Shroyer is product manager for Listrak, a Lititz, Pa.-based e-mail marketing company. Reach Brent at bshroyer@listrak.com, and Matt at melliott@listrak.com.
