Top Ten Things Both Marketers and Designers Need to Know

Graphic designers are experts for a reason – through training and experience they have developed an eye for what is visually appealing and what draws a reader in. But knowledge of attractive design and what works for email are two different things. Many designers are unfamiliar with the quirks and limitations of designing for email, and it’s your job as a marketing manager to provide the direction to steer them away from the common mistakes that affect delivery and response.

This will provide:

  • An overview of the design elements that are the most effective in email campaigns
  • An explanation of why traditionally “good design” from print and postal mail do not translate to email
  • What marketers should look for when reviewing an email design
  • How to look for email-design resources and advice

The Top Ten Things Both Marketers and Designers Need to Know:

1. Don’t give up on graphics, but know that many of your recipients just won’t see them.
Many email clients block images by default. So unless a user specifically turns images on – either for all emails or just one at a time – they’ll simply see empty boxes where your images should be. You don’t need to eliminate graphics, but your designer should know that blocked images are a fact of email life. When reviewing email layouts ask the designer to show two versions – one with images visible and one with the images blocked. Both need to work equally well. One design trick that can help eliminate the empty-box syndrome is to set graphics as background images instead of regular images. Email clients simply don’t show these images when graphics are disabled, without putting empty boxes in their places. However, it’s important to note that Outlook 2007 always blocks background images, even when images are turned on. So you should never set critical images as background images, especially if you are a B2B marketer whose email subscribers are likely to rely on Outlook. Your designer may just assume that since the world and the Web are becoming more graphics-based and that because browsers are faster, they can push the envelope in email design by using image-heavy messages. Be prepared to proactively direct your designer in this area and ask for emails that work in all scenarios.

2. Alt tag copy is an art.
An alt tag is an HTML tag that provides alternative text when non-textual elements like graphics cannot be displayed. In other words, alt tags provide visible copy on top of blocked images, so you can explain what the reader isn’t seeing. Since graphics are often blocked, why not use this as an opportunity to make the email effective even without them? Many marketers settle for alt tag copy that simply tells the reader how to turn the images on. In today’s environment, you can rest assured that most email users know how to do this. Instead, why not consider giving the customer a benefit to turning the image on to see what it is? Try describing the product if the image is a picture of something for sale. Or selling the event or service through copy if the image is not product-related. For example, you may want to use alt tag text that reads “50% off our best-selling cameras” if your linked image is the call-to-action for a camera sale. We’ve also seen inventive use of alt tags where the sender used humor to compel action. One such email used an alt tag that read, “See what you’re missing by right-clicking here. C’mon, you know the suspense is killing you.” The one thing you should be aware of with alt tags is that some email clients, such as Hotmail, do not display them all. So don’t assume that all of your readers can read your alt tags. For some of your readers, blocked images are just that – completely blocked, without any alt tag text to support them.

3. Make sure your graphics don’t depress response.
Because your email graphics may not be seen, it is vital to refrain from placing calls to action into a graphic. Let’s say your “click now” button or phone number is beautifully displayed in an eye-catching graphic. If the recipient has blocked images, you’ve just sent an email with the call-to-action totally hidden from view. It’s a good idea to make call-to-actions stand out using textbased HTML that’s tricked out with fonts, borders, colors or even background images. You should avoid placing them into graphics that may be blocked. Use graphics to reinforce messaging, not for messaging itself. The same goes for your masthead if you are designing a newsletter. It should be designed in such a way that the name of your company and your newsletter are visible whether or not graphics are enabled, to ensure readers have the information they need to open and read it.

4. Make sure the reading pane contains a call-to-action, not just graphics.
Your designer might want to put your company logo or your newsletter masthead or another eye-catching element in the top left hand corner of your email. This is what works best in traditional mediums like postal mail and print advertising. And, quite frankly, it looks like it belongs there. However, with the high adoption rate of preview and reading panes, the top-left section of your email might be all the reader sees in their email inbox. The preview pane or reading pane is basically the tiny portion of the body of your email that can be seen automatically, before a user opens your email, displays in full view or scrolls. The exact amount of real estate varies from email client to email client, but you basically only have 2-4 inches of space to tell your story and persuade viewers to open your email. Think of the preview pane as your teaser area – a place to grab the reader’s attention and entice them to either scroll down or to fully open the email. Don’t put anything in that area that isn’t a benefit to your readers. E-newsletters should include headlines or “in this issue” content teasers. Promotional emails should summarize or highlight the key value proposition and call-to-action. And definitely do not put any administrative items like unsubscribe or “add us to your email address book” in this space at the top of your email.

When it comes to graphics, keep in mind that your company’s logo and other such graphics won’t entice readers to open, because it doesn’t tell them what this particular email is about. And if images are blocked, you are literally filling the most important section of your email with empty space. By using the top area of the email to highlight the most vital information, the rest of the content will naturally flow from there. Any graphics or images should appear beneath this initial call-to-action or value proposition, or to the right of it.

5. Use your subject lines, sender name and “From” address to their best advantage.
In today’s email-heavy environment, most recipients wade through the often overwhelming volume in their email box by performing “email triage” – quickly deleting any messages that are not worth their time or money. They usually decide this by seeing who sent the email and what the subject line has to say. This means that the most critical design element is the plain text that appears in the inbox … before readers even open your message and see what your email actually looks like. There are three critical places to brand your email, so that readers instantly know who you are: the sender name, your From address and the subject line. The sender name should include the name of your company or brand, not the name of an individual. For example, your email should come from Awesome Company or Brand Name, not Jane Doe. Some email clients, such as AOL, display your actual from email address, instead of a sender name. So you should use an email address that makes it clear who you are and what you do, such as or, not

The subject line provides a third branding opportunity. For example, you can set off the name of your newsletter with brackets {Newsletter Name}, so readers get familiar with the name of your publication. Or you can add a specific brand name to your promotional email, so that the combination of the sender name, email address and subject line reinforces who you are and what you sell. In addition, think of your subject line as the equivalent of an envelope teaser in postal mail. When planning an email, put yourself in the shoes of the recipient. What do you need to see to know the offer is worth reviewing? And don’t forget to check the length of your subject lines. A good subject line has to tell the story and get a recipient to open the email in 50 characters or less.

6. Know what pre-headers and snippet text are and how to use them as response-oriented tools.
In the inbox, many email clients supplement the subject line with what’s known as pre-header or snippet text. Here are a couple of examples of how pre-header or snippet text is used:

  • Outlook: In AutoPreview mode, readers see a short line of text directly beneath your subject line.
  • Gmail: PC users see a shaded bit of text after a truncated subject line. (Just sender, subject line and date sent show up in the Macintosh version.)
  • Yahoo!: Renders as a pop-up when readers mouse over
    the subject line in the inbox preview on their Yahoo! home page.

This tiny but significant part of your email message can help tilt the balance in your favor when readers are zipping through their inboxes, looking for which messages to open and which to delete. So where do these email clients get the pre-header or snippet text? It’s generally whatever’s in the first line or two of your email.

Outlook 2007 considers graphic images as snippet text and includes the URL of the graphic image in the snippet, which is why so many HTML emails now include a line of plain text at the very top of the message, directly above where any HTML and images begin. If you don’t like this look, you can use white text on a white background to minimize design clutter, and still reap the benefits of snippet text. A powerfully crafted snippet builds on your subject line and entices the reader to open your message. A common lost opportunity is using “Click here to see images” in the pre-header area, which is a lot less powerful than “Jane, get 20% off your favorite item.” If you optimize for the reading pane (see Tip #4), which means putting your call-to-action or value prop in the top-left corner, you’ve already gone a long way to ensuring that your pre-header or snippet text will engage your readers.

7. Web-like navigation is a poor idea in today’s mobile email environment.
Until recently, it was considered acceptable to have a home page-like row of navigation links at the top of an email. After all, this allows your email to look like your website and drive click behavior. However, with the skyrocketing popularity of mobile devices, this practice can turn good email design into several screens of mobile gobbledygook. Many mobile devices do a poor job of rendering HTML. In fact, they transform your design into plain text. In the process, they transform short, easy-to-read URLS such as “Buy Now” into the full URL link, which may look more like “,148pj,2ed4,8bhr,lz3o,cv.” Each URL may take up a significant part of the screen, causing users to scroll and scroll and scroll if you have several URLs following one after the other in a navigation bar. Why should you care? You should care because there were almost 270 million mobile phone users in 2008 – and that number is continuing to increase by at least 6% per quarter. By 2013, the number of mobile broadband users will double. And chances are those mobile users will comprise the vast majority of your target audience. So it’s generally a good idea to make sure that any navigation bars appear below your primary call-to-action, instead of at or near the top of your email. That way, mobile readers can at least find out what your email is about before they get inundated with a string of really long URL links. You may also want to experiment with a design that uses navigation bars sparingly, toward the very end of your email. At the very least, you may want to reduce the number of links in your navigation bars. Look back at the last six email campaigns and see how many clicks each navigation bar link actually receives. Navigation bar links that nobody’s clicking are good candidates for removal.

8. Know what to do about Outlook 2007, Gmail and Cascading Style Sheets.
Cascading Style Sheets (CSS) is a language used by designers to describe the presentation of a document that will be be read via the Web or email. It’s most common use is to style Web pages or emails written in HTML. In the Web world, designers rely heavily on CSS to specify colors, fonts and other aspects of design and layout. But it doesn’t work the same way for email and your designer may not even be aware of this. Before Outlook 2007 and the increase of Gmail adoption, designers typically created an external CSS file with all the layout information for an email and then linked it in the header area of the HTML code. However, Outlook 2007, Gmail and a few other clients changed all that because they now completely ignore CSS instructions that are coded in this particular way.

Your designer will need to code all fonts, colors and other details inline – also known as Inline CSS. In other words, they must specify formatting instructions throughout the email, table cell by table cell, paragraph by paragraph to ensure the email is viewed correctly. This is much more time-consuming than linking to an external CSS file. But it is a necessity if you want to guarantee against garbled, mangled emails in your audience’s inbox.

9. It is vital to test your email with different email clients for rendering differences.
Once you’ve paid attention to these tips and think the email is designed just right, don’t just assume it will render well in the real world. Different email clients, such as Outlook, Gmail, Hotmail, Yahoo! and AOL, display HTML in slightly different ways. Your email can look great in your inbox, but look absolutely crummy when viewed in a different email client. Whenever you are launching a new email design or doing a major overhaul of an existing one, it is a good idea to send yourself test emails using the major email clients your readers use. A quick scan of your list or database report should tell you which email clients are popular with your audience. At the very least, send tests to Outlook 2007, Gmail and a mobile device, since these are the email clients most notorious for mangling formatting.

This test should examine:
• The sender name and “From” address – Do they read correctly and explain who you are?
• The subject line – Is enough of it visible for it to be effective? Does it provide a reason to open?
• Snippet text – Is it a true call-to-action or just mundane housekeeping?
• Preview pane – Does it provide an incentive for readers to open your email? Is your main call-to-action or value proposition visible?
• Images - Are the graphics appropriately placed?
• Blocked images – Does your email still make sense when images are blocked? Do alt tags support the images your readers can’t see with text?
• Fonts and link colors – Are your fonts displaying as designed? Are your links the right color? This is a common area where different email clients display different things, based on how your designer codes your Inline CSS.
• Test every link – Do they work? Outlook 2007 sometimes experiences rendering issues when links are clicked within your email, causing text around certain links to temporarily disappear or to display in strange ways. Troubleshoot any issues you find.
• Does anything else stand out? Once you’ve fully tested a new or significantly revised design and are confident that it works, you can streamline your rendering tests for future campaign sends. There are email-rendering tools, such as Lyris HQ Deliverability Tools, that allow you to quickly double-check rendering across a wide variety of email clients without sending emails to your own test accounts.

10. How to find the best resources for email design and implementation.
With the information above and with the e-mail design checklist below, you’re armed with what you need to give direction on email design. Then let your designers demonstrate their expertise with layouts that get attention and support your brand while also functioning properly. When choosing a designer for an email program, ask about some of the things on this list. If your designer or agency doesn’t know how to answer “How do you handle pre-header or snippet text?” or “What can you do to ensure an email is effective when images are turned off?” you may do well to find a designer who does. If your designer insists that using CSS is just fine, be wary. There may be more informed designers who can and will do the job better. Even with the right designer, it is very helpful to have resources to check email rendering and deliverability, and to predict response with online-marketing tools. An integrated online-marketing tool can ensure that your marketing campaigns produce the best results at the lowest cost.

By using this tool, along with the information in this guide, you can partner with your designer to make sure every email you send has the highest benefit and provides the best user experience. Your subscribers will thank you with great response!

Email Design Checklist
Use this list of questions as a checklist when reviewing an email to ensure optimal design.

How does the design look when images are blocked?

• Make sure that your email design works with or without images turned on. With images turned off, what do you see?
• Does your email make sense without them?
How do your alt tags read with images turned off?
• Look at your email with the images turned off. Do the alt tags make up for the images your reader can’t see?
• Instead of telling a customer how to turn images on, is there copy that either describes the product being offered or that restates your key message?

How does the call-to-action work when images are blocked?

• Check your “click now” button or any other call-to-action with images blocked. How do they read?
Are they invisible when images are disabled?
• Are your calls-to-action text-based, using HTML fonts, colors, borders or backgrounds to make them pop?
Calls-to-action built in this way are visible to all readers, even if graphics are disabled.
• How about vital information like contact phone numbers or Web-site URLs? Are they visible when images are disabled?
• How about your newsletter masthead? Can you read the company or newsletter name when images are turned off?

Does the preview pane or reading pane spur readers to open your message?

• Is your main call-to-action or value proposition visible in the top-left corner, so readers previewing
your message have a reason to open it?
• Are logos and graphics to the right of or just below your primary call-to-action or value proposition? This way, if images are blocked, your readers see something more enticing than an empty space.
• Are administrative actions like unsubscribe and “add us to your email address book” taking up this valuable real estate? The preview pane is probably not the best place for housekeeping.

Are your subject lines, sender name and “From” address doing all they can?

• The inbox is your first and last chance to get a recipient to open and read your email.

Do the “From” address and sender names clearly explain who you are?

• Is your subject line exciting enough to get someone to open the email right here and now? Does it read well
when the email is received? Is it no more than 50 characters long?

Are the pre-headers and snippet text providing extra incentive for readers to open?

• Look at the first sentence in your email. Is it benefit and offer-oriented?
• Does it build on the subject line?
• Look at the email in Outlook Auto Preview, Gmail’s inbox and by mousing over it in Yahoo! to read the snippet text. If Outlook is displaying a URL for a graphic image, you may need to add a line of plain text to the very top of your email, before your HTML design starts.

Does the email use Web-like navigation?

• URLs often do not display appropriately on mobile devices. Web-like navigation bars fill mobile screens with page after page of long URL links.
• Make sure that any navigation bars appear below your primary value proposition or call-to-action, so mobile readers get to the point before they’re inundated with URLs.
• Consider shortening the number of links in your navigation bars.
• Consider moving your navigation bars near the bottom of your email.

Does the design use CSS? How does it work on Outlook 2007 and Gmail?

• Confirm with the designer that fonts, colors and other details are coded with inline CSS, not an external style sheet.
• Then test it in both Outlook 2007 and Gmail to ensure it can be read.

Does the email render well everywhere it is received?

• For new designs and major redesigns, send tests to email accounts you’ve set up with the most common email clients.

At the very least, send to Outlook 2007, Gmail and a mobile device.

- Do the sender name and from email address read correctly?
- Is enough of the subject line visible for it to be effective?
- Are you making good use of snippet or pre-header text?
- Is your main call-to-action visible in the preview or reading pane?
- Are the graphics appropriately placed?
- Does your email make sense when images are blocked?
- Are the alt tags compelling?
- Are fonts and colors displaying as designed?
- Test every link – do they all work?


Tips to Help Increase Effectiveness:

A successful campaign will utilize both HTML as well as TEXT creative. It has been shown that TEXT creative will convert as much as HTML creative.

Keep in mind many modern email clients by default block images in HTML for security reasons leaving your only real opportunity a TEXT creative.

A highly converting creative will often utilize tried and true graphic examples like proper retail coloring, pictures of real life people the target user can associate with, maps of the US, patriotic symbolism like the US Flag, etc.

When graphic designers are designing this they need to keep in mind bandwidth and optimization. What this means is that they really need to keep it simple.

A highly compressed image will not negatively impact conversions. Image design and concept however will absolutely impact conversions.

Call To Action – What drives the client to want to take the time to click through and visit the site?