Skip Navigation

Five tips for effective e-mail design

The advent of E-mail—one of the most cost-effective mediums—changed communications. E-mail persuades, promotes, informs, reminds and creates buzz.

The better it works the more complicated e-mail marketing gets. What's the best creative? Where do you get a good e-mail list? How do you ensure delivery of your e-mail to your constituents’ inbox? How can you know how many recipients open or read your e-mail? What are the legal-compliance requirements?

In light of the above challenges, United Methodist Communications is providing a series of articles on the best practices of e-mail marketing. Part I of this series covers Tips for Effective E-mail Design

1. Design for the preview pane.

Does your e-mail message deliver its punch in a space roughly 4 inches wide and 2 inches deep? That's all that shows in the preview pane, the feature in many e-mail clients that lets e-mail readers partially scan messages without opening them.

According to a report from MarketingSherpa (January 2007), about 27 percent of e-mail readers use preview panes instead of looking at the entire e-mail. To make matters worse, preview panes are not uniform in terms of shape and size.


Tips for dealing with preview panes


  • Don't design your e-mails too wide. About 600 pixels are as wide as you should go.
  • Use text instead of a single big image.
  • Make sure the most important content—a link to your Web site, a summary of the content or a newsletter table of contents—“peeks” out of the side of the preview pane.
  • Try to get your call to action above the scroll.
  • Left-align your company logo. You don't want to hide it behind the preview pane. Your logo gives your e-mail credibility.

These steps help deliverability. Readers should be able to tell who you are and what you're doing in their inboxes.

2. Design for blocked images.

More and more e-mail programs are turning off images by default. Recipients must click a button or right-click on an image to turn images on. It's a privacy-protection measure. When you design HTML e-mails, always assume your images will be turned off by default. By placing your entire message into a single large image, you also risk getting trapped in spam filters.

Tips for dealing with turned-off images

  • Include alt-text for your images. Don’t make your alt-text so descriptive that readers won’t actually need to view the images.
  • Don't put important content into images. Always use text for the important stuff. Replace navigation images with text links.
  • Use images that don’t overwhelm. Use HTML color to highlight call to action. Make it visible in the preview pane.
  • Watch font size; some filters flag large point sizes (36 points or higher).
  • Another alternative to consider (if you are willing to pay for it) is e-mail certification. It sometimes can get you into inboxes with all images ON by default.

3. Balance image with text.

In response to spam filters looking for keywords, spammers have resorted to sending e-mails with one giant graphic. If you check in your e-mail junk folder now, chances are your spam filter has many image-only spam already trapped. 
When you design HTML e-mails, do not create one enormous graphic; always include some text. Images are turned off by default, and spam filters will think you're sending image-only spam. If you send one giant image, with inadequate supporting text, you even can get blacklisted.

Some spam filters appear to place the image: text ratio criteria even higher than the "spammy keywords" criteria. 
Tips for image-to-text ratio

  • Many small thumbnails work better than lots of big graphics, even if you have enough text to balance things.
  • If your content is just one or two lines of text, don't insert more than one or two graphics into the e-mail.
  • If you must have very little text and one giant graphic in your e-mail, make sure the image is well compressed and the HTML code spotless.

4. Don’t neglect your footer.

Include an “unsubscribe” link and your physical mailing address in the footer of every e-mail campaign. That should be common sense, but it's also required by the CAN-SPAM Act of 2003.

Tips for e-mail footers

  • Do not work the footer content into an image map.
  • Do not make the text in the footer extremely tiny.
  • Do not use a footer font color that almost blends in with your background.

5. Avoid being too fancy-schmancy.

Most e-mail applications support stuff like Flash, JavaScript and ActiveX. Unfortunately, that's how most e-mail programs get infected by viruses. Most people run anti-virus programs that check incoming e-mail for that fancy stuff and remove it (or quarantine your message).

Tips for flash and movies in HTML e-mail

  • Remove the flash movie from your e-mail and replace it with a stunning graphic that makes people want to click. Include some text to balance your image: text ratio.
  • Move the flash movie to a landing page on your Web site. Link the graphic from the e-mail to the landing page.
  • Recent research and tests indicate more response (in case of promotional e-mails) is driven by the landing page than by the e-mail itself. (Newsletters are exceptions.) That's why we recommend building a few solid, reusable e-mail templates, and not reinventing the wheel for each campaign. Focus on good, solid content you can e-mail quickly, and spend most of your time on your landing pages. (You’ll learn more on Optimizing Landing Pages in future articles.)

Future issues will highlight:

  • Writing Effective Copy for E-mails
  • Programming E-mails
  • Building and Managing Lists for E-mails
  • Privacy and Legal Compliance Requirements
  • Delivery and ISP Relations
  • Measuring E-mail Results
  • Testing E-mail Components for Optimizing Results