Good email design is a critical part of ensuring a high response rate.

A major frustration within the industry is the lack of standards to guide designers when creating HTML email. Though there isn't one email-marketing design bible, there are fundamental design rules that should be applied. This article reviews some of the high-level design principles as well as more in-depth rules affecting some of the most common issues and questions we are most often asked.

Basics

Some basic elements should always be considered when beginning the design process:

  • 600-620 pixels is a good width for email design.
  • Don't use external cascading style sheets (CSS); instead, use CSS inlinks.
  • Optimize image sizes so they load quickly.
  • Don't use flash.
  • Don't use forms; provide readers with a link to a form if you're asking them to take a survey.

Microsoft Outlook 2007

Microsoft challenged email marketing designers after the release of Outlook 2007. In the past, Outlook rendered HTML email using Internet Explorer. The latest version of Outlook relies on Microsoft Word to do its rendering. This means that designers have several limitations, including the lack of CSS support.

What does this mean for you? Hire a designer who is familiar with email marketing design. For those of you in the B2B sector, this is even more critical as Outlook is used most frequently in the business community.

You can find extensive information on Outlook 2007 at Microsoft's Web site.

Other Email Clients

Microsoft Outlook 2007 and 2003 are the primary business email clients, but there are a host of others that are also important. When designing for email that is complimentary to multiple clients, the key is testing. Make sure your designer has access to several client platforms, including Outlook 2007/2003, Entourage, Apple Mail, Gmail, Hotmail, AOL, Thunderbird, and Yahoo.

Also, don't underestimate the surge in the use of Apple as its market share continues to rapidly gain ground. If you're primarily in the B2C market, vigorous testing in Entourage and Apple Mail is essential.

Confused about which email clients you should test? Look at your list. Are you primarily targeting business contacts? If so, Microsoft Outlook 2003, 2007 and Entourage clients are a good place to start. If you're a retailer, you might have a lot of Yahoo, Gmail, AOL and Hotmail addresses. You should have a testing account on each.

Use Alt Tags

Make sure that your designer uses alt tags. Alt tags provide readers with text if their email client blocks images by default. For example, if I send an email with imagery and inside my image I have text that states "Happy Holidays," I should include an alt tag within the code that reflects "Happy Holidays." If the user is blocking images, the text will still be viewed.

Be Careful Using CSS

Cascading style sheets are a Web designer's best friend. However, email designers should use them sparingly, if at all, when designing HTML email. Many designers suggest replacing CSS with tables, considering the constraints of Outlook 2007.

If you choose to implement CSS within your design, ensure that you do not link to external CSS; rather, embed the CSS sheets within your HTML. Confused? Here's an example:

<link href="https://www.contactology.org/styles/style.css" rel="stylesheet" type="text/css">

This link is referencing a file on your Web site's server. Many email clients will block this type of reference, which means that the CSS won't show up. Rather than referencing a file location, designers should actually code the CSS into their email design using inlinks.

Chances are you won't be doing this kind of design yourself. But it is critical that you understand these components. Finding a good designer requires asking lots of questions and reviewing past work. If you ask an email template designer about CSS in email and he or she can't explain why inlinks are important, you should ask your HR department to send more candidates.

Images Images have to be hosted. I can't count the number of times a customer has called afraid we've "lost" their images. When we examine their email, we find that they didn't place a complete url in the code. Here's an example:

<img src="images/headline.gif">

If you were hosting your email on your desktop, or your own Web site, this might have come through just fine. But if it's sent as is, the rest of the world would see a big blank spot. The correct URL would include the full path of the image's host Web site and look something like this:

<img src="https://www.contactology.com/headline.gif">

Remember, placing images in your design doesn't mean the reader will see them. Many email clients block images until the reader downloads them. Designers should place critical information near the top of the email as text rather than embedding it in the jpeg or gif image.

Mobile Viewing

Don't overlook the popularity of the BlackBerry and iPhone. Users are reading email on mobile devices more frequently than ever.

There are some specific issues to consider for mobile viewers. Images may take longer to load. Whenever possible, optimize your image size for quicker speed. As in all email design, don't put all of your important information in an image, as it might not load at all!

Consider designing for a user's preference. When users sign up on your subscription page, ask whether they prefer reading email on their BlackBerry, iPhone, or email client. If they choose a mobile device, send a specific campaign optimized for mobile viewing.

If you really want to spend some time on making mobile viewing a breeze for your readers, consider building mobile viewing landing pages. You can create landing pages that are specifically designed for your reader's mobile device. When they receive your email, at the top of the HTML the user can click on "BlackBerry users, click here." This is similar to the "view in browser" link that comes standard with most email-marketing products.

Though mobile products are getting better, it's important to remember that there is a difference between email clients on your computer and on your phone. Test, test, and test some more to ensure that every email campaign is putting your best foot forward.

Web Designers Aren't Always the Best Email Designers

You would think that Web designers automatically make good email marketing designers. It's true that both use HTML to code, but it's also true that email marketing design is a specialized art that requires dedication and skill.

Email designers must learn the latest changes to email clients and Internet service providers. It's a lot to manage, and in my experience good email marketing designers are hard to find.

Ask prospective designers lots of questions, and don't assume excellent Web designers are going to be a natural fit for your email campaigns.

Keep yourself informed of changes to the major email clients and ISPs, review the email marketing design basics, and find a talented designer. You'll be well on your way to creating successful email marketing campaigns.


Subscribe today...it's free!

MarketingProfs provides thousands of marketing resources, entirely free!

Simply subscribe to our newsletter and get instant access to how-to articles, guides, webinars and more for nada, nothing, zip, zilch, on the house...delivered right to your inbox! MarketingProfs is the largest marketing community in the world, and we are here to help you be a better marketer.

Already a member? Sign in now.

Sign in with your preferred account, below.

Did you like this article?
Know someone who would enjoy it too? Share with your friends, free of charge, no sign up required! Simply share this link, and they will get instant access…
  • Copy Link

  • Email

  • Twitter

  • Facebook

  • Pinterest

  • Linkedin


ABOUT THE AUTHOR

Winston Bowden is marketing and sales manager at Durham-based Contactology (www.contactology.com). Reach him via wbowden@contactology.com.