We Love The Web - Blogorhea

Bit late this month. Very, very busy. It's a good thing. Anyway....

Designing for email is a specialist discipline that causes problems even for experienced web designers. We’ve created HTML mailers for some of the biggest firms in the business and we’re sharing our expertise.

Why is email so difficult to do properly?

Over 95% of email traffic is SPAM. A lot of that is malicious and tries to trick you into doing things that will harm your computer. Dumbing-down the code makes it easier to keep the bad guys at bay. Javascript and Flash can’t be used in email because they've been used to infect computers with viruses before. The makers of email programs are just trying to shut down lines of attack for the bad guys.

Email also has to work on a vast array of devices: far more than a website.

Quick round-up: Outlook 2003, 2007, 2010, Mac Mail, iPhone mail, Outlook Express, Windows Mail, Entourage, Thunderbird, Blackberry, Nokia mail reader and webmail: Hotmail, Yahoo mail, Google Mail and so on. For each webmail variant, your email also must look right in Internet Explorer (version 6, 7 and 8), Safari, Firefox and Chrome.

The margin for error is tiny: we spend most of our time in any given email build on testing, testing and testing again.

Good news: we’re here to help.

Artwork Setup

Do:

• Make your main content area:
  • 600 pixels wide if you are designing for a consumer audience
  • 750 pixels wide if you are designing for a business audience
• Remember to set your image editor to work in RGB at 72dpi

Don’t:

• Work at 300dpi in CMYK

Don’t forget:

• Allow for a variable screen-size, so allow for a surrounding background colour* around your main content area.

* Background colour is safer. Background only 'sort-of' work in hotmail and can break in annoying ways.

Images

Images aren’t downloaded by default in most email programs. Worse, some email programs strip out all HTML, leaving just the text behind: the user isn’t even given the option of downloading images!

Here’s a great example: guess what’s on sale here?

Ooh! It’s a netbook! Well who’d a thunk?

Do:

• Design your emails to be intelligible without the images.

Don’t:

• Put text over images or grads. If you do, we have to do one of two things.
  • ‘Bake the text into the image’. The meaning is lost if the image isn’t downloaded
  • Put the text over an image background. Background images are often filtered out by email programs, so you lose visual appeal. 

Fonts

Emails don't embed fonts, so you have to use the fonts installed on the user's computer. That does impose restrictions since it means you have to use fonts installed on everyone's computer.

Do:

• Use system fonts. These are: Times, Arial, Courier, Verdana, Georgia, Trebuchet, Tahoma, Lucida

Don’t:

• Use non-system fonts for any crucial information (including headlines). Anything you need to be set in a different typeface will have to be created as an image, so it won’t be legible to anyone opening your mail, but not downloading the images.
• Use white text on a dark background. If the background colour is filtered out by the ISP, your customers will be left with white text on a white background. Using light-coloured text is not a workaround: your customers will be left squinting at the screen in annoyance, trying to read low contrast text. We tend to feel that making the customer angry is a bad thing.
• Do bullet-pointed lists, especially not using custom bullet points. You will just cause us, and you, and your client pain and frustration as it goes through 25 iterations of 'not quite right' as there's no easy way to do this in email HTML.
• Put ‘real’ text over an image. We’ll need to put the image in the background of the table cell and background images overlaid with text won’t work on many email programs: the background image will be filtered out.
• Put ‘real’ text over a colour gradient. Same reason.

Don’t forget:

• Don’t use comic sans. Not ever.

Animations, forms, rollovers and video

You can’t really use these in email.

Do:

• Include very simple 2-3 frame animations if you want. These can be achieved using animated gifs. These may not work in all email programs: only the first frame may display, so make sure it is mainly used for visual impact: anything people must see for the email to make sense should be in text form.

Don’t:

• Put animation, video, rollovers or forms into your email. None of these things will work. If you want to reference some video, put in a ‘You-tube’ style slate image that links directly to the video.

File Formats

Do:

• Give us layered Photoshop or Illustrator files.
• Include fonts with your artwork (if appropriately licensed).
• Supply artwork with fonts outlined if fonts aren’t appropriately licensed.

Don’t:

• Give us PDF, InDesign or Quark files. These are intended for print and can be problematic.
• Give us Jpegs and tiffs – they are ‘flattened down’ and aren't suitable. 

Content managed email: special notes

Do:

• See how your design changes when you put twice as much text in each element

Don't:

• Design multi-column setups: equalising the heights is well-nigh impossible.
• Design multiple 'pods' side by side unless your client has the budget for you to create these as images for each email they send. The ONLY way to get the heights to equalise in a controlled fashion is to make them as images.

Finally: forget about the pretty

Most of the variables in the success of an email are nothing to do with how it looks.

Five ways to improve email response rates

The effectiveness of your email promotion depends on how many people open, read and act upon your mail. There are a number of factors affecting this, the most important of these are nothing to do with the design of the mail:

1. Clean subscription data
2. Correct sending setup
3. Subject line of the email.
4. Degrading Gracefully
5. Clear call to action

1. Clean subscription data

I don’t know anything about your mailing list, but many are in a poor state. 
Old email addresses that no longer exist and people who haven’t opted in consciously will both make it much more likely that your email never reaches the recipient. 

Since over 90% of email sent is Spam, most spam filters are very, very sensitive. Most ISPs will detect even relatively small numbers of mails with the same subject line and content coming in.

If a significant proportion of those are to email addresses that no longer exist, the mail will be thrown into a ‘black-hole’: your user will never see it.

If a handful of people have marked the email in hotmail or gmail etc. as ‘spam’, then no-one on that domain will see the email, it will be black-holed. People are much more likely to do this if they did not consciously opt-in to receive the email.

If the list is clean, up to date and is populated by an opt-in (people have chosen to be on the list) or is a list of existing customers (people with whom you are expected to communicate), then you should look at a service like mailchimp. If the list is old and crufty, then you should look at a data-cleansing exercise first (or even start again)

2. Correct sending setup

To reach the user, the emails should come from the place that they say they come from e.g. I could send you an email from our server pretending to originate from god@heaven.com, but it would probably never reach you because the internet would do a lookup to compare the IP address for heaven.com with the sending IP address of the email. If they don’t match then it’s spam and goes in the bin.

If there are more than a few thousand subscribers then it’s worth looking at spam white-listing services such as Return Path.  These are expensive, (about £1500 a year, last time we used one), and a faff to set up, so only worth doing if your send a lot of email.

Alternatively, we use Mailchimp quite a bit. Their sending setup is has high delivery rates and is reasonably priced.

3. Subject line of email

Is the email equivalent of ‘Front page, above the fold’ in a newspaper. If the subject line is engaging, witty, interesting etc. then people will open the mail. If not then they won’t. Most people don’t think about the subject line, but it’s incredibly important.

A final note on subject lines. I was recently sent an email by someone extolling their ‘n_k_d* marketing’ offering. Because of that one word in the subject line, it was spam filtered in three different places. I had to ‘release’ it from three different spam traps before I could read the mail. Most people wouldn’t have bothered. Anything words relating even tangentially to procreation should be avoided.

* ‘not wearing clothing’.

4. Degrading gracefully

Not all email reading software is the same. Some strip out background images even if you choose to ‘download images’, some strip out all styling information, some strip out colour and so forth.

The point is this: you should always make sure your design can be read and acted upon by the user even if all they see is white text on a black background.

And Finally…
If you are looking read rates (also known as open rates), you may be measuring the wrong thing.  Open rates can be a very misleading guide to the success of your email – to the point where we encourage people to disregard them except as a trend indicator.

• If your user does not click the ‘download images’ button, you won’t know they’ve read it
• If they have not enabled HTML email in their mail client, you won’t know they’ve read it.

This is because the emails rely on a ‘beacon image’ being downloaded to flag the mail as being read. The image is unique to that particular email, so we know which mail it was.

The real measure of success is the clickthrough rate: the number of people who respond to your call to action.