Skip Navigation

5 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 MarketingSherpa 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.
  • 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.

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.

Tips for dealing with turned-off images

  • Include alt-text for your images. This is the text that is displayed when images are blocked. It's also read aloud to people with special computer programs designed for the visually impaired. Many email editors provide options to edit alt-text, so look for it in the editor's image settings.
  • Don't put important content or call-to-actions in 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.

3. Balance image with text.

When you design HTML e-mails, do not create one enormous graphic; always include some text in case your images are turned off. If you must have very little text and one giant graphic in your e-mail, make sure the image is well compressed.

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 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.

Some e-mail applications support things like JavaScript and more modern HTML tricks, but most clients will break your template if you include these elements. Here are a few tips to think about:

  • Replace embedded videos with a stunning graphic that makes people want to click. Include some text to balance your image to text ratio.
  • Research indicates more response is driven by the landing page than by the e-mail itself. 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.