KNOW-HOW: Why (and How) You Should Redesign Your Email Templates for Outlook, Hotmail & Yahoo Immediately

Here's a quick test we'd like you to try right this minute:

Step #1. Turn on one of the preview pane options in Outlook.
Step #2. Turn off (block) images.
Step #3. Pick an HTML email alert or newsletter in your inbox.
Step #4. See what it looks like in preview.
Step #5. Gasp in horror.

(If you don't have Outlook, we've posted some sample screenshots below. If you do, we've posted tech instructions below.)

Your next thought probably is, well how many people view emails in preview pane with HTML blocked anyway? Data from an EmailLabs study conducted last October indicates that 52% of at-work users "always use the preview pane" and 17% frequently use it. (Link to charts below.)

Of these, 45% "rarely" or "never" download the images in preview. So your pretty HTML ads, logos, pictures… all are blocked as the recipient decides based on the preview whether they will bother to open the email all the way or not.

Plus, 48% of surveyed at-work preview pane users rarely or never open email messages all the way. They simply view as much of the message as they can in their preview pane, and move on. Of those who do open all the way, more than 15% never turn on the images, so they keep viewing without your pretty graphics.

All of this data adds up to one thing -- millions of people who use Outlook (and soon Yahoo and Hotmail) see ugly emails with images either completely blocked, or sliced by the confines of a very small box.

Here's more info about what you should do next…

Email real estate -- how much can recipients see anyway?

Now that so many email recipients look at your messages in their preview panes, either entirely or until they make a decision to open or delete, your email has to look fabulous and enticing in that tiny bit of real estate.

It's just like designing your Web site so critical items are "above the fold". Only in email, you have much, much less real estate to work with.

-> 74% of users prefer bottom/horizontal Outlook preview panes.

Most set the size of that box at roughly two-five inches wide, and two-four inches deep. This means that they can probably see your admin text at the top about whitelisting etc. They can also see your logo (or an "image blocked" symbol where the logo should be.) And if you're like most emailers and have some sort of masthead featuring things like date and standard Web site navigational links, they can see those too.

If you're lucky and your logo is pretty short, they can see the headline of your offer, or the top story in your newsletter.

However, anything on the far right side of your message is probably cut off.


-> 26% of users prefer right/vertical Outlook preview panes.

These folks can see about four-five inches down the left-side of your email message. If you're in text-only, your text will wrap so they can read the first paragraph or two of copy. If you're in HTML, they'll see the left slice of that message.

-> Nearly all email users everywhere see about 350 pixels across.

To put this in perspective, the average Web site is 753 pixels across. So, your email messages should be less than half the width of your site.

What if your template is based on looking a lot like your site? Change it. You can keep important brand elements such as colors and key text for the flavor of the site. Plus, remember that eyetracking studies show many site visitors don’t see much beyond the top left corner of your site anyway.

Design tips to work with preview panes

We recommend if you have substantial at-work readership that you assume the worst and design defensively. That means:

#1. Consider moving your admin text (whitelisting, view online, etc) further down below "the fold". Keep it in a stable place where readers can get used to using it, but remember probably fewer than 5% of your readers routinely use this messaging. You shouldn't get rid of it, but you shouldn’t waste critical real estate on it.

#2. Replace large images (if possible all images) in the top left corner of your template with text. You've got two options here that we can think of:

o USA-Today-inspired design --

You could move your logo, and other "header" HTML imagery further down the screen. Instead at the top show your table of contents or text about your offer, then put the logo, etc under it.

The print edition of the USA Today newspaper does something slightly similar by placing intriguing story call-outs at the very top of the front page where most newspaper's logos are.
See a sample email newsletter below that uses this style design.

o Prettied-up text design --

Remove HTML graphics such as pictures and logos entirely. Instead, use text-only. If plain vanilla text-only won't work for your brand (and for many of us, it's not an option), consider doctoring it a bit with HTML.

Key - if the HTML is blocked, the text should still appear and look reasonable. Loren McDonald, CMO J. L. Halsey, who was the moving force behind the EmailLabs study we cited above, recommends you use the following HTML design elements to pretty-up text without hurting yourself:

- Use background colors the text lays on top of (but not too strong or it will be hard to read)

- Use font sizes and styles (larger, bolder, etc) to stand out. However, only use universally-supported fonts such as Times New Roman or Arial or your recipients won't see what you're sending properly. Also, for ease of reading, keep fonts at 10 points or above and avoid italics.

#3. Redesign to eliminate far-right columns

A lot of people simply don't see them. Enough said.

A few more email design rules:

McDonald also shared these best practices for email design:

"HTML coding for emails is much trickier than for Web sites. With Web sites, most designers/programmers code for the most popular and most used versions of browsers, such as Internet Explorer. With email, however, there are dozens of clients in use – though in the office/work environment Outlook (all versions) command about 80% market share with Lotus Notes roughly between 5% and 10%.

#1. Code email by hand

"While HTML design programs such as HomeSite, Dreamweaver and FrontPage are extremely popular and easy to use, they are not ideal for designing HTML emails. If possible, EmailLabs recommends coding emails by hand as these WYSIWYG editors typically add extra or code that causes havoc with certain email clients."

#2. Code carefully

HTML email code should be self-contained, as a single Web page with the basic HTML, HEAD, TITLE and BODY tags.
Make sure all tags are closed. Your email should include inline style sheet information.

Use HTML tables for the design layout. Avoid nested tables if possible. Some email clients, Lotus Notes and Netscape messenger in particular, may not render them correctly.

#3. Fixed width is critical

So-called fluid design (which expands and contracts depending on the view screen) is very fashionable in design-circles. But it can look awful if images are blocked. Suddenly your text and hotlinks are in a mess all over the page.

#4. Do NOT…

Do not use DIV tags.

Do not use JavaScript.

Do not use canvas background images. (Background images for individual table cells are generally acceptable, but may not appear in some clients such as Lotus Notes.)

Do not apply attributes to the BODY tag.

Do not embed images, or use EMBED tags, or embed forms such as surveys. You'll be blocked, filtered, or the forms won't work properly.

Do not use 1x1 pixel spacer gifs (to force widths in your table data cells) as spammers use them and may flag your email as spam.

#5. Yes you may…

Animated GIF files are OK, but use them sparingly.

Use of images maps are OK.

How to review your own email templates

How to see what email looks like in Outlook preview panes:

o Horizontal preview pane -- Click on "View", then "Reading Pane", then "Bottom".

o Vertical preview pane -- Click on "View", then "Reading Pane", then "Right".

o Blocking images -- Click on "Tools" and then "Options". Go to the Security tab. Click on "Change Automatic Download Settings". Check box: "Don't download pictures or other content automatically in HTML e-mail." Click OK.

Call a meeting with your email team

Although preview panes have been around for a while in Outlook, they are only now being added to Yahoo and Hotmail. Nevertheless, you might wonder why more email isn't design with preview and blocked images in mind.

We asked McDonald, a respected expert who has been preaching the worry-about-this message for nine months now, what reaction he's gotten from major emailers. "A lot of our clients are rejecting the idea of designing for preview panes," he says.

Why? McDonald suspects it's because there's not much response data available for marketers who've either A/B tested or done a before-and-after design measurements. If you have some data, please do let us know!

In the meantime, common sense would dictate that emails that people can actually see properly would get higher clickthrough rates. Why would anyone click on an email where they can't see the pictures, or not see the links?

Plus, just as with Web page design, we suspect there's less scrolling in the preview pane than you'd think. Most email recipients who use preview probably glance quickly at what's visible and then move on to another email. Why not design so you put the "best stuff" up in that spot? Content and click links that are engaging, enthralling, must-read…?

While we work on getting more data for you on redesigns, you should take the next step and call a meeting with your design team. Take a bunch of screenshots of your Outlook in-box preview pane showing what can be seen of your own email templates.

Do a presentation to everyone in a darkened room with PowerPoint slides … don't warn them beforehand. Just let them gasp with horror and draw their own conclusions.

Useful links related to this article:

Creative samples showing you what real-life email messages look like in preview panes, along with charts from the EmailLabs study:
http://www.marketingsherpa.com/cs/epreview2/study.html

EmailLabs
http://www.emaillabs.com

J.L.Halsey
http://www.jlhalsey.com