HTML emails

There are many email systems around: each one displays messages slightly differently, and many of them are dependent on the internet browser the user has chosen.

Most of us can't keep up, but there are some basic rules for email design that will help across all systems and are best practice.

Size is everything. Most PC-based email tools have preview panes, whereas internet-based systems don't. The preview pane defaults to a fixed width, and the recent Microsoft default of a right-hand pane limits this space to a width of 607 pixels. Either limit your design to 600 pixels or use a 'fluid' design - one that resizes according to the space available.


Most people only skim, so make sure your most important content is at the top and appears without any scrolling. Only peer-to-peer or very dedicated readers will scroll down pages of copy.

And don't waste the top of your page with a list of links. People do not click through to other parts of an email; they skim read the top lines.

If you have a long list of internal links at the top, you are using up your most valuable 'real estate' with an index.

Images do work well on email, but many email tools now default to block images or prompt the user to download them. Don't make all the space at the top of your email an image. If the user can't see it, the message is useless. Mix images and text, and always remember your 'alt tags' (descriptions that appear) even though some systems block them.

Add height and width to your images to keep your layout intact. Some systems will reformat the space with its image-blocking message and make your template even more warped. Keep it short, keep it catchy, keep it simple. Make people want to click through to your site for more. And make sure they can see the most important story in their preview pane.

text emails

When we talk about email, we always concentrate on HTML - it's more sexy and fun because it gives you nice design, formatting and pictures.

But about 20 per cent of those on your list still just get text emails, so it is essential to use an email tool that sends both text and HTML and allows users to chose.

There are many easy tricks that can improve the design of your text emails.


Most importantly for usability, URL links that break across lines don't work. If you include the URL (uniform resource locator, or web address to you and me) in your copy, most people won't find it - it doesn't underline in text emails. If you have a long URL that breaks across the line, only the first part will work. Put URLs on a separate line and keep them short.

Either use a URL mask (a redirect) or put an extra page high up on your site with a simple URL.

Another trick is to keep the lines of copy very short. When Outlook forwards text emails, for example, it breaks paragraphs into separate lines and adds a > in front of each one. This makes text much harder to read, so keep sentences short and use lots of paragraph breaks to space them out.

The lack of images in text emails can make them very boring visually, so space out copy, add URL links to separate lines and think about using extra characters. For example, using a line of dashes can break up text.

Highlight very important text or a link with > or *. Use spaces to align text and indent bullet points.

Don't forget the unsubscribe option; it's a legal requirement. The law also now requires us to add our company name, registration number and registered address on all emails. And it's best practice to include your charity registration number.

Finally, think about your brand. How does your charity's name look without the sexy logo and coloured font? Are there other ways to highlight who you are?