What do you need to know about email design?

“A picture is worth a thousand words — unless that picture fails to display on the screen. Our fifth clinic reveals the important email design tips and tricks…”

Ronen Yaari, OpenMoves
Questions? Drop me an email or call!

Last week you learned the copywriting tips and tricks that account for the way people view their email.

This week we apply the same principles to your email's format and design. How do email viewing habits affect your choices and decisions?

Which format do I use?

The basic format of an email can be plain text or HTML. In the former, the entire email is text only.

In the HTML format, you design your email much like a Web page, with all the features such a page allows (columns, colors, fonts, images, etc.). This gives you lots of creative flexibility to get your message across.

But HTML email has one important drawback: It's tough to get right.

That's because there is little consistency in the way different email software displays many HTML features.

So what looks great to someone using Hotmail might look like the cat's breakfast to a person using the latest version of Outlook.

Let's explore the key issues…

Guidelines for text emails

Text-only emails…

• Are simple to produce
  
• Come across as more personal
  
• Nearly always display as intended

The main drawback is the lack of creative flexibility in design, layout, branding, and so forth.

The advice in our fourth clinic (on copywriting) applies equally to the layout and design of text-only emails. But here are two additional tips:

• Make generous use of white space. Separate different sections of your email with blank lines or spacers made of symbols, like this:
  >>>>>>>>>><<<<<<<<<<
• Always make sure Web addresses are written out in full, with a space on each side. Only then can you be sure the receiving software or service will turn them into clickable links.
• Right: Visit http://www.ourwebsite.com/
• Wrong: Visit www.ourwebsite.com/

Guidelines for HTML emails

HTML emails…

• Offer creativity and flexibility
• Suit content better presented as a picture, chart, or table
• Let you use logos, images, and colors to mimic your website's design. This helps with branding and persuasion, and adds a comfort factor when people click from the email to your website.

Building an HTML email template that works well across different devices, software, and Web mail services is a task for an email design professional.

However, many of the email service providers that manage your list and send out the emails for you (see Clinic #3) offer ready-made templates you can use with your content.

Now let's look at the two most critical email design issues: images and preview panes.

Use images wisely

Unfortunately, the less appropriate use of images by spammers has led many email software manufacturers and Web mail services to disable them in incoming emails. That means these emails don't show images unless the user actively requests their display.

This can play havoc with your HTML email design and layout.

The solution is not to abandon images but to use them sparingly and sensibly.

Email newsletters should be at least 70% text. And promotional emails must contain enough text to communicate all your important messages — including any links you want people to follow.

If you pack your key information into images and use image links only, there's a good chance many people will never see them.

A common mistake is to replicate the direct-mail postcard format in email using one single, giant image. Too many subscribers will simply see a big, fat nothing on their screen.

Two tips to pass on to your designers:

• Specify the width and heights of images in your HTML code, so you keep the basic spatial structure of your email intact even when the actual image fails to display.
• Include alt tags. When an image is disabled, the alt tag — a snippet of text describing the image — often displays instead. Worded appropriately, these text snippets convince the reader to download the images or take some other desired action.

Design for preview panes

Another common feature of email software and Web mail services is the preview pane. This is the small window that gives you a brief preview of the contents of an email as you click through your inbox.

It's either a shallow strip along the bottom of the inbox or a narrow strip along the side. This preview is often all the email user ever sees of your email's contents.

Like the “From” and “Subject” lines we mentioned in the previous clinic, the preview pane helps people decide whether to take a closer look at your email.

The top two or three inches of your email, particularly the left-hand part, are the most critical.

Always have a logo or masthead identifying the sender or email at the top, for recognition. And ensure the user can immediately grasp the benefits of reading the actual content.

With an email newsletter, this means a brief editorial or table of contents highlighting what's so great about this issue. (See the top of the email you're reading now!)

With promotional emails, the preview area should contain clear information on the offer and perhaps a call to action.

So — armed with all this insight on copywriting and design, you're ready to prepare emails and send them off to that list you built. Job done.

Not quite.

Once your system is in place, you still need to get your emails delivered successfully to your address list.