Email Design No-Nos Your Designer May Not Know

Written by Anita M. Taylor

Friday, 16 January 2009

Graphic designers are experts for a reason: through training and experience, they've developed an eye for what looks great. But knowing what looks great and knowing what works great are two different things. Many designers are unfamiliar with the quirks and limitations of email, and it's your job to steer them away from five common email-design mistakes.

I'm speaking from experience. Over the last year, I've worked with a handful of designers, with different levels of email experience, and I've had more than one occasion where I've had to stand firm in a clash between beauty and workability.

Here are five things that you and your designer both need to know.

1. The Top of the Email is Not for Pretty Pictures

Your designer might want to put your company logo or your newsletter masthead or something eye-catching in the top-left corner of your email. Bad idea.

This section of your email might be all that readers see in the "reading pane" or "preview pane," now a fixture in virtually all email clients. You don't have a whole lot of room or a whole lot of time to convince readers to open your email marketing message or scroll down.

So start with your call to action (why they should click what you want them to click) or with your value proposition (what this edition of the newsletter is covering). Then put your logo or pretty graphics beneath that primary message or to the right of it.

Read Designing Emails for the Preview Pane and Disabled Images.

2. Web-like Navigation is Murder on Mobile Devices

Until recently, it was quite acceptable to have a home-page-like row of navigation links somewhere near the top of your email. After all, you want to drive people to your site and make it easy for them to find what they're looking for.

There's just one problem. Many mobile devices don't do a very good job of rendering HTML. In fact, they do a pretty bad job. So bad, in fact, that they simply transform your pretty HTML into boring, old plain text. This is especially tough on your links, which get displayed in their full, glorious, six-lines-long glory.

Fill a mobile screen full of these links, and your mobile readers will give up on your email before you even get a chance to make your first point.

Read Marketing Sherpa's Email Marketing to BlackBerrys and Mobile Email Marketing Tips.

3. Graphics Don't Work - No, Really, They Don't

Many email clients block images by default. This means that unless readers specifically turn images on, all they'll see is empty boxes where your pictures should be.

What's more, different clients block images in different ways. When Gmail blocks images, it displays Alt tags, visible text where you can at least explain what the reader isn't seeing. When Hotmail blocks these same images, it blocks the Alt tags, too.

Then there's Outlook 2007, which blocks background images, even when images are turned on.

This can be hard for email-inexperienced designers to grasp, because it's at odds with their everyday Web-design reality.

"Web sites are becoming increasingly more graphical because browsers are faster. Web-design quality is improving as people push the design envelope, using the latest technology, pretty graphics and eye-catching elements," explains Dean Silvestri, owner of Atlas Projects and the artistic force behind the recent Inside Lyris HQ newsletter redesign. "But in email, you're working with a platform that is 15 years old. It's Web .01, with really elementary HTML."

4. Invisible Calls to Action Don't Get Clicked

Because your graphics may never be seen, don't put anything that readers really need to see in a graphic. That means your primary call to action should not be the same pretty button that you use on your Web site. It should be text-based HTML, tricked out with fonts, borders, colors and even background images to look like a pretty button.

Ditto for your newsletter masthead. It should be designed in such a way that your company name or the name of the newsletter is visible at all times, by all readers. And the only way to do that is text. Text, text, text.

Did I mention that any call to action, any key information, any critical branding element must be created in text? Then, if you want to reinforce that information in a graphic, feel free.

5. Outlook 2007 Snubs Cascading Style Sheets

In the Web world, designers rely on CSS to specify colors, fonts and other aspects of the layout. But it doesn't work the same way for email, and your designer might not have a clue.

Designers typically create an external CSS file with all the layout information, and then they link to it in the header area of the HTML code, as in this Web-page example from our site:

"Email browsers used to accept and adhere to CSS specifications in the body or header, but Outlook 2007 changed that," says Silvestri.

Since Outlook 2007 and many other email clients don't honor CSS in the way that designers are accustomed to, they must 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, as in this example from our email newsletter:



It's not fun. But it is necessary, unless you enjoy garbled, mangled formatting surprises.

Toward Good-Looking, Hard-Working Email

If you work hand-in-hand with your designer to avoid these five email design no-nos, you may not end up with the email that looks the best on the designer's computer screen. But you will end up with one that works better in the inbox – and isn't that the whole point?

###

About the Author

Anita M. Taylor is a marketing communications manager for Lyris. She is the editor in chief of the company's Inside Lyris HQ newsletter.

Like this article?

• Subscribe to Inside Lyris HQ, our monthly online-marketing newsletter.
• Find hundreds of online-marketing articles at LyrisHQ.com, our online-marketing blog.
• Download free online-marketing guides, tools and webinars in the Lyris Online-Marketing Resource Center.