There are, however, a number of best practices and steps we can take to increase the likelihood of our email ending up in the reader’s inbox and and actually read…

Spam check tools.

The higher your spam score, the more likely your email will end up in the spam box! The aim here is to reduce it as much as you can. If you use an Email Service Provider such as Email Vision or Mail Chimp, they have built in spam score checkers which will give you recommendations. Alternatively a good online spam score checker is http://www.contactology.com/check_mqs.php. Run your email through any of these spam checkers and follow the advice given.

Good text to image ratio

Emails should be designed with a good text-to-image ratio. Image-only emails look nice and can be right on-brand, but will probably go straight into spam. On the other extreme, text only emails work well for email clients in terms of inbox deliverability, but look boring and off-brand. As a best-of-both-worlds compromise, utilise around a 60-40 split in favour of web safe HTML text.

Avoid ‘spam’ words

Certain symbols and words are known to trigger spam filters. Avoid or at least minimise use of

• Excessive exclamation marks!!!!!!
• WRITING IN ALLCAPS
• Words like ‘download now’, ‘FREE’, ‘click here’, ‘buy now’ etc. Especially in the subject line.
• ‘Click here’ links. Anchor text should be indicative of what it links to i.e. rather than ‘click here to unsubscribe’, ‘unsubscribe here’ works better.

Powerful subject lines

Pay particular attention to your subject line. A good one will make the reader click inside to read more, a bad one will send your email straight to the trash! Readers are usually bombarded with emails and will skim through the subject lines, only opening emails that interest them the most. It actually turns into a competition over who can get the most attention! Make sure your subject line is short, sweet and most importantly, attention grabbing enough to make readers want to click inside.

The first line of your email is very important and can provide valuable extra information to your readers. In some email clients such as Gmail, the email description after the subject line comprises the first line of your email. So if your first line is ‘click here to unsubscribe’ or ‘click here for an online version’, as it so often is with newsletters, this will appear as the email description after your title… not great, not very descriptive. However, if your email title is ‘Top Tips to Beat the spam filter’ and your first line is ‘Increase Email Inbox deliverability Rate’, this gives your reader a little more information about what’s inside the email which in some cases can be the deciding factor on whether your email gets read or gets sent straight to the trash.

Well formed HTML

It sounds ironic given that email newsletters are coded in a very backwards kind of way, but make sure your HTML is well formed. It doesn’t need to adhere to W3C standards but some email clients factor in HTML errors, so reduce your HTML errors to reduce the spam score. Things to ensure include: closing all tags, properly nesting tags, adding width and height values to an image without unit of measurement (default is pixels) and replacing symbols with the right escape code.

Escape Codes

Don’t copy and Paste text from a text editor such as Word into your Email Client. Certain symbols might not be recognised by the email client and render as a ‘?’ symbol. Make sure all symbols such as apostrophes, copyright, pound, dollar, quotation marks etc are replaced with their relevant escape codes. e.g. Replace all £ symbols with the escape code £ For a full list of escape codes, see http://www.escapecodes.info

Descriptive image names

Often, if the email client is unsure of the sender, it will block the images by default. We want the reader to at least have an idea of what the email is about, even without images, so we need to adopt a meaningful naming convention for the title, alt text and file name as it is one of these values that replaces the images if they are turned off. If the message and content is meaningful enough, the reader is more likely to read your newsletter.

So make sure descriptive images are given descriptive alt text, names and titles. If the images are turned off, the user will still have an idea what it is. Also ensure non-descriptive images such as spacers or images slices have blank alt text, titles and short names. This minimises the clutter on emails where the images are turned off and titles are displayed.

You wouldn’t need to worry about this though if you was a safe sender, as the images would be displayed by default.

Safe contact list

Have a line in the body that asks your reader to add your email address to their contacts. This will increase the likelihood of future emails reaching the inbox with all images intact. Something like ‘add newsletters@lykc.co.uk to your safe senders list to ensure you always receive our newsletters’ works.

Personalisation and Relevance

An email looks a 100 times more legitimate when the reader sees their own name or username on the email. Most Email Service Providers allow tag templates to be used for names and usernames so make sure you utilise these. ‘Hi LYKC’ is a lot more personal and looks a lot better than simply ‘Hi Reader’.

Following on from readers wanting personalised emails, readers are interested in content that is relevant to them, so generic emails which have nothing to do with the reader are a major put off. Split your email list into targeted segments and send relevant emails to the relevant people. Bombarding your readers with multiple emails full of unrelated content will make them head straight to the unsubscribe link, so make sure you keep it relevant.

Test, Trial and Error

As with most things in life and the same with trying to beat the spam filter, test often. Try different things, drop the things that don’t work and carry on doing the things that do work. With the increasing amount of actual spam out there, we will always face a challenge to reach intended inboxes especially as spam filters are never perfect and liable to change their spam scoring system at any given time. So until the spam system becomes 100% reliable, follow the best practices outlined above to boost your chances of beating the spam filter and actually reaching your readers inbox.

Do’s

Don’ts

DO’S

Use tables for layout

Keep the design simple so as to easily incorporate it into a table-based layout. All <table> tags should have the cellspacing=”0″ cellpadding=”0″ border=”0″ attributes to reset any unnecessary default padding or borders. Reduce the use of colspans. These have a habit of confusing some email clients, not to mention coders, if it gets too complex. Keep it simple and rather than using a colspan attribute, look to use a new table instead.

Avoid nesting tables more than a few layers deep. Stacked back-to-back tables nested within a container table works well for most simple layouts.

Use inline CSS

Inline styles only i.e. Don’t use a global <style> tag in the <head> section. Some email clients completely ignore it. Instead, add a style attribute to each individual element that requires styling and style each element individually. Labour intensive and not exactly code-efficient I know, but a necessary evil in ensuring that each element renders the way the design intended.

Style your links

Different email clients will render your links in their own default styles. Make sure you define your link font, size and colours (without using CSS shorthand). And make sure each link has a target=”_blank” attribute so that it opens in a new browser window rather than from within the email client window e.g <a href=”…” style=”font-family: arial, font-size:12px; line-height:16px; color:#ff0000″ target=”_blank”>link</a>

Define all width and height dimensions

Always define height and width dimensions, to maintain the shape of the template even if images are turned off. For images and tables, leave out the unit of measurement as this is seen as an HTML error by some email clients thus will subsequently affect your spam score. The default unit of measurement for images and tables is pixels.

• <table> – Always define a width property
• <td> – Always define a width property. If your design allows the height to stretch with copy, then leave the height property. If, however, the design constrains the max height of the copy, then define a height property. Note that when defining the size and length of the copy, ensure you cater for any default padding discrepancies across email clients and leave enough space.
• Images – Always define a width and height property
• Fonts – Define your font size (inc. unit of measurement), font-family and color to avoid the default email client styles taking over.
• Line-height – Define a line-height (inc. unit of measurement) for the same reason

Use <br>’s rather than <p>’s

Default padding in <p>’s can be problematic if there is limited real estate. Rather than battle with this issue, use <br />’s within a <div>. Make sure the font size and styling is defined within a style attribute.

Gracefully degrade images

Increased security measures mean that email clients often turn images off by default so you should assume that when the end user first views your email, images are not displayed. How would your email look if all your images were turned off? If you run firefox, the web developer plugin allows you to turn images off. Here is where the importance of a useful naming convention comes into play as the titles and alt text will be displayed instead. Computers can’t read images (yet!), so they should always be as descriptive as possible. Also. it all helps with overall accessibility and visibility.

• The image file name should be indicative of what it is e.g. ‘abc-designz-logo.jpg’.
• Provide descriptive title and alt text for all images. If the image is not displayed, the title and alt text should be just as descriptive. e.g. ‘ABC Designz Logo’
• Maybe it’s a spacer or non-descriptive image? If so, leave the title and alt text blank so it doesn’t clutter or interfere with the more useful image title and alt text.

Cut images out the right way

The way you slice your PSD is very important. It has to be simple enough not to mess up the table-based template, yet needs to be detailed enough to provide enough information on what’s going on if images are turned off.

Effective emails should have a good text-to-image ratio. But with the limitations of HTML emails, it is not uncommon for designers to use crazy fonts for buttons and titles. If so, ensure that each message is sliced separately and given its own title and alt attributes. One big hyperlinked image is pretty much guaranteed to trigger off the spam filter, so try and provide as good a text description as possible.

Some email clients snip the background colour from your <body> or container <table> tag and fill it with a default white colour. This can cause a design conflict within the email client if your email border edges are white too. If this is the case for you and you require a darker background to offset the white in your design, then from your PSD, instead of slicing up your images flush to the border edge, include say around 15px of the background colour also within the image all round. This way you have the darker background incorporated within your images and won’t need to worry about the email client snipping the <body> or <table> background styles.

Back to top

DON’TS

No Javascript or Flash

Most email clients disable or ignore Javascript and Flash completely so as to secure the user from any chance of client-side threat or malicious activity. Your best bet is not to use any Javascript or Flash. Ensure any you do use is not essential to the email message and will degrade gracefully.

No CSS shorthand

Email clients recognising shorthand CSS is not a given. To be on the safe side, write each property in full. e.g. border: 1px solid #000000; becomes border-width: 1px ;border-style: solid; border-color:000000; And remember, do all this inline for each individual element!

Don’t use floats, <font> or background images

• Floats: Poor support for floats, and could lead to unexpected mis-alignment. Tables, aligns and valigns can handle most layouts.
• <font> – Declare font styles within a style attribute. The font tag is inline and will break if there are any line breaks. The style property within a <div> can handle everything a <font> tag can, and more anyway.
• If you do use a background image, make sure that you specify a background color as well so that it degrades gracefully should the image not show up. Ideally the HTML text should be on a flat colour

No Whitespace

A common problem is the dreaded 1px white gap in between images or rows. The good news is that there are a number of hacks we can try to get rid of this line of whitespace.

• Within the HTML code itself, ensure there is no whitespace inbetween the lines or before/after the <td>’s or <table>’s. Often, it is just a matter of deleting any accidental spacebars after a <table>, <tr> or <td> tag.
• Add a display: block attribute to each image e.g. <img src=”…” style=”display:block;” />
• Add a height: 0 style attribute to each <td> e.g. <td style=”height:0″>
• Tedious fixes, but well worth it in the end to finally see that 1px line disappear!

Don’t Copy & Paste from Word

Don’t copy and Paste text from a text editor such as Word into the email service provider that you use to send your emails from. Certain symbols might not be recognised by the email client and render as a ‘?’ symbol. Make sure all symbols such as apostrophes, copyright, pound, dollar, quotation marks etc are replaced with their relevant escape codes. e.g. Replace all £ symbols with the escape code £ For a full list of escape codes, see http://www.escapecodes.info/

Overuse of animated gifs

The support for animated gifs is surprisingly good. Email clients that don’t support animated gifs will generally display the first image, so compromises can be made. Subtly executed and when used in moderation, animated gifs can enhance the, generally static, content of an HTML email newsletter. Ensure that as a fallback, the first image of the gif doesn’t obstruct the template in any way. There are some cool examples posted at Style Campaign

The Last Word

Test!

And then test some more. Which email client will your target audience most likely to be using? Make sure you send your email to all of these email clients and test to see all looks as it should. Little niggles and misalignments can be a pain, but when executed correctly, emails can be an incredibly powerful tool to reach out to your readership.

Have fun people, and feel free to share your emails!

Back to top

For more of my photos from the UK and around the world, visit LYKC on Flickr.