Close
Join 237,000 weekly readers and receive practical marketing advice for FREE.
MarketingSherpa's Case Studies, New Research Data, How-tos, Interviews and Articles

Enter your email below to join thousands of marketers and get FREE weekly newsletters with practical Case Studies, research and training, as well as MarketingSherpa updates and promotions.

 

Please refer to our Privacy Policy and About Us page for contact details.

No thanks, take me to MarketingSherpa

First Name:
Last Name:
Email:
Text HTML
Join Our Research Team at DMA 2014
Aug 03, 2006
How To

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

SUMMARY: If 90% of your email recipients are on AOL, then don't bother reading any further. Your email probably looks fantastic in the in-box.

However, if your readers use Outlook, Hotmail, Yahoo, Mozilla Thunderbird (or a host of others), chances are your email templates need a redesign … as of yesterday.

Why? Your email may look close to unreadable in more than 60% of their in-boxes. Bring this article to your next meeting with your design team:
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




Comments about this How To

Aug 03, 2006 - Mike Atkinson of GBS says:
Excellent stuff! Much of what Loren said in Chicago in April. Glad to have an article to reference. HOWEVER, I take exception with this: "Your email should include embedded style sheet information." We were using styles for text formatting and found that AOL and Hotmail didn't support them. So we went back to individually formatting text... Mike


Aug 03, 2006 - Jeremy Brown of NA says:
"Nearly all email users everywhere see about 350 pixels across." huh? The smallest width I can get my bottom preview pane is about 468 pixels. Almost all your examples are over 700 pixels. How can you say people are only seeing 350 across?


Aug 04, 2006 - Nebojsa Damjanovich of Alutus Consulting says:
Scary but true. And they didn't mentioned Gmail in which many HTML newsletters collapse.


Aug 04, 2006 - Jason Henderson of Big Marketing says:
Is there any significance in the fact that EmailLabs' unsubscribe link is missing in their examples among forward to a friend, ensure delivery, etc? I have never seen one of their newsletters without it?


Aug 04, 2006 - Mary Kay Lofurno of SyberWorks, Inc says:
This is a good article. I would really like to tag it using del.icio.us or my digg accounts, but the problem is that it will expire. I know you have always made your free content available for a limited amount of time, and truly, I understand why you did that with your business model. Just not sure if it fits into the web 2.0, social bookmarking schema, which is very useful in content syndication and ultimately why online marketers do it in the first place, i.e. big drum role......Link Building. Just thought I would throw this out to you. Keep up the good work. Best Regards, Mary Kay Lofurno


Aug 07, 2006 - David of Mokum Marketing says:
What a fantastic, practical and useful article. The power of this article lies in the fact that it looks at marketing from a recipients perspective; the only one that counts.


Aug 07, 2006 - Nat of TM says:
This is great information. What is the recommended method for manipulating fonts and text colors? I've heard everything from using obsolete Tags, to placing tags immediately after the tag to writing CSS right into your tags. Is there a definitive best practice for this?


Aug 08, 2006 - Matt Carroll of Placeworld.net says:
I showed a client and his CEO last week how their campaigns look in Outlook's preview pane at 1024x768 resolution -- pretty bad. Then I told them the high percent of people that use that configuration. They were shocked and are updating the template -- reducing its width and eliminating all unessential things above the fold -- as their highest priority.


Aug 10, 2006 - Peter Cook of Cre8tive Group says:
Ok, so we already knew all this (yes we have Gmail accounts which don't load images by default). The real question is how many people don't click "click here to view images"? For me, its whenever I think I need those images for something useful or I'm particulary interested in that company's email.


Aug 10, 2006 - Nick Rice of Cre8tive Group says:
Great post! I also recommend allowing users to choose what type of newsletter they want (HTML or text). I've read DMA research that stated roughly 50% of all email programs are still text based and cannot even display HTML. I do agree about the temporary link life mentioned in one of the above posts. I've sent this to a lot of coworkers and clients. When you have content that people want to share, I encourage you to allow them to do so easily. It's just good brand building practice.



Post a Comment

Note: Comments are lightly moderated. We post all comments without editing as long as they
(a) relate to the topic at hand,
(b) do not contain offensive content, and
(c) are not overt sales pitches for your company's own products/services.










To help us prevent spam, please type the numbers
(including dashes) you see in the image below.*

Invalid entry - please re-enter




*Please Note: Your comment will not appear immediately --
article comments are approved by a moderator.