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.
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="http://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:
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:
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.
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.
Take the first step (it's free).
You may also like:
- Five Steps for Leading Email Marketing Through Change and Crisis
- How COVID-19 Affected Email Benchmarks in 19 Industries in Spring 2020
- COVID-19 and Email Marketing: What to Do When Reopening Is on the Horizon
- What If Your Email Metrics Are Off: Who's Really Clicking on Your Emails?
- Best (And Worst) Email Signoffs During COVID-19 [Infographic]