Best Practice for Building and Designing Email Newsletters
Download a PDF of this paper here.
Different Email Clients (Outlook, Hotmail, Yahoo!, AOL, Gmail) display email slightly differently, and many of them are dependant on the web browser the user has chosen. So how do we build and design emails to fit across all systems?
There are some basic rules for email design which will help across all email systems and are best practice whatever you are sending.
Size is everything. Most PC based email tools (such as Outlook) have preview panes. The preview pane now defaults to a right hand side and is limited to 607 pixels wide. To make your email display well you need to either limit your design to 600 pixels, or, if you can, design with a “fluid” design (one that resizes according to the space).
You must also consider length. Most people only skim read emails, so make sure your most important content is at the top, ‘above the fold’ in newspaper terms, and appears without any scrolling. Also don’t waste the top of your page with a list of links. People do not click through to other parts of an email. Don’t use up your most valuable ‘real estate’ with an index.
Images work well on email, but many email tools now 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 images don’t load the space is wasted and important information is pushed down ‘below the fold’. Mix images and text in the body of the email, and always remember your “alt tags” even though some systems block them.
Always add height and width to your images to keep your layout intact. Some systems (Outlook for example) will replace the image with an “image blocked” message if the user has images turned off.
Background images are stripped out by many systems, as are images controlled by CSS layouts. Make sure your email is readable without images, open it with the images turned off (Tools/Internet options/advanced in Internet Explorer) and see if it still make sense. That is how many users will see it.
Keep it short, catchy, and simple. Make readers want to click through to your site for more. And make sure they can see the most important story in their preview pane.
HTML does not work exactly the same in email as it does on a web page, so don’t assume that your beautifully designed HML page will come across in an email. If you create an email in system designed to build web pages you may end up with something which does not display well. If you are using a CMS (Content Management System), check with the developers that their email building tool creates HTML fit for email use.
Cascading Style Sheets (CSS)
CSS is a classic example. Webmail tools modify the HTML to fit their own style and the size of their browser window. All Webmail tools strip external CSS links as potential security risks and most also strip embedded stylesheets. The only way to include CSS is literally line by line, or to wrap your email in a div tag and use the style attribute.
Similarly all the Webmail tools replace your link colours with standard blue (unvisited) and purple. You can overcome this by using font tags in your link tags.
Forms are great on a website but on an HTML email they may appear to look fine, but many of them won’t work. If an Outlook user isn’t using Internet Explorer, the forms will not submit. Hotmail strips the form tag completely so the data doesn’t go anywhere when the user submits. In Mozilla, Yahoo and Gmail forms work, but the user gets a pop up warning. Best practice, send the user a link to a web based form, don’t include the form in the email.
So keep to basic HTML, leave forms and Flash on the website and keep the email as copy and images.
When we talk about email we always concentrate on HTML. It’s more sexy and fun, gives us a design to play with. But approximately 20% of users still get text emails. So text emails are important and it is essential to use an email tool that sends both, and allows users to chose (known as two part send). There are many easy tricks to improve the design of your text emails, and all of them will make it more readable.
URL which break across a line don’t work - critical for usability. If you include the URL in your copy most people won’t find it (it doesn’t underline in text emails). So it is critical to put URL’s 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.
Copy lines should be kept very short. When Outlook forwards text emails, it breaks paragraphs into separate lines and adds > in front of each line. This breaks up your paragraph and makes it much harder to read. Keep you sentences short and add many more paragraph breaks to space them out.
Images can’t be used, which can make a text email very boring to the eye, 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 the text or create a header and footer space. Highlight the most important copy or links with > or *. Make sure the text aligns using spaces and use spaces to indent bullet points.
Think about your brand. How does your brand come across without the logo, fonts and colours? Can think of another way to highlight the most important piece of information – who you are.
Finally don’t forget the unsubscribe option; they are just as much a legal requirement in text emails as in HTML. And now that the law requires us to add our company name, registration number and registered address on all emails don’t forget to add a footer to your text email. Best practice is also to include your charity registration number on all emails; it aids people’s recognition of you as a sender and makes people trust the veracity of your message.
These are fairly simple rules, avoiding complexity and sticking to what the medium can manage. HTML emails need to be written in HTML for emails, avoid CSS and use the space at the top of the page as wisely as possible. TEXT emails are as plain as possible and have no functions or features. Use the available keyboard options to highlight and break up the visual impression, and keep URL’s and copy as short as possible.