When designing an email, knowing what looks great and knowing what works great are two different things. There are quite a few quirks and limitations of email and to help you we've listed the five most common email-design mistakes and what you need to know.
1. The Top of the Email is Not just for large Pretty Pictures
You might want to put large, colourful hero shots or images in the top part of your email to grab the reader's attention? 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 logo to the left and a 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 pretty graphics beneath that primary message or to the right of it.
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 full giving the receiver an ugly introduction.
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.
3. Image only emails 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.
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, 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.
This goes the same 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 we 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 colours, fonts and other aspects of the layout. But it doesn't work the same way for email.
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 in a website.
Email browsers used to accept and adhere to CSS specifications in the body or header, but Outlook 2007 changed that, since Outlook 2007 and many other email clients don't honour CSS you must code all fonts, colours and other details inline - also known as "inline CSS" or simply, within the email itself. In other words, they must specify formatting instructions throughout the email, table cell by table cell, paragraph by paragraph.
It's not fun. But it is necessary, unless you enjoy garbled, mangled formatting surprises.
Toward Good-Looking, Hard-Working Email
If you work 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?
