Deliverability: often misunderstood, despite being important to everyone engaging in email marketing. Here are a few articles covering the topic that might provide a degree of enlightenment:

• Why poor email deliverability is your own fault – and what you can do about it
• Deliverability Emergencies from the ISP Side of the Desk – a reality check
• Engagement: The New Frontier In Deliverability? – or is it simply a new way of looking at things?
• Rescuing reputation – many small steps
• Email deliverability: what’s it all about? – detailed basic information

This week saw the announcement of the new Composite Snow-Show (CSS) blacklist from Spamhaus, which aims to work around the problem of widely spread, low-use IP addresses which are used for spamming. Naturally, this was covered by the usual suspects around the blogosphere, with a nice overview from the excellent Word to the Wise. On a related note (and just possibly prompted by news from Spamhaus), Return Path also announced the latest version of their Reputation Network Blacklist, which they describe as a real-time list of senders categorized as the “worst of the worst”. In a quick return to our litigious friends over in America, (and as the third link to a post by “laura” this week!) I’d like to point to a hilarious argument-turned-ugly at the DMA. Lawyers, on your marks! Lastly, special mention this week to an article over on MediaPosts‘s Email Insider that I have to confess was very enlightening for me: My Name Is Loren. BTW, I’m A ‘He’. Steve Knigge’s note in the comments also made me laugh.

In this guide I plan to explain some best practices, explain a few techniques and generally give you a solid alternative to an overly image-centric email campaign.

Layout

Firstly think about how you want to your content laid out: elements such as headers, footers, sidebars articles should be considered. The number of articles you plan to include and whether you want to include off-topic or announcement sections. Planning this first will make the wire-framing process easier and will give you an idea about how you’re going to build the nested tables to house all your content.

Depending on your skill level or preference here you can take 2 approaches, the first would be to transfer your layout to a graphics program such as Adobe Photoshop or Fireworks (my favourite) and build the graphics, background images and heading placeholders over the layout.

Secondly would be to use an HTML WYSIYYG (What You See Is What You Get) directly such as Adobe Dreamweaver, Coda or even directly in the Sign-Up.to editor in the create section of your account.

750 pixels is a good maximum width for email campaigns as it fits into vertical preview panes on wide-screen monitors and fits to A4 print margins

Content

Once you’ve got your layout sorted it’s time to pad it out with your content (or place-holder content if you’re building a template).

In the example we’ve been using I’ve added a header graphic image into the header, some drop shadows on the body, separated my content sections with blue tables and finished it with a footer graphic that incorporates a copyright notice and some links.

Compatibility

So you’ve planned your layout, added your content and styled the campaign, now a few things to know before sending it out.

Test, test and then as they say, test some more.

Email clients are unique, in that each one will render elements of your email differently, some not at all.
You can find a well documented reference of this over at The Email Standards Project, and a few tips in a previous post. It is imperative that you test your campaign or template as thoroughly as possible BEFORE you starting sending to your subscribers. I realise not everyone can have all the different clients installed and signing up for all the different web-mail accounts can be tiresome, that’s why I prefer to use a testing service such as Litmus. With Litmus you simply send your campaign test to a private unique email address associated with your account and their system runs it through all your defined email clients such as Hotmail, Gmail, Yahoo, Outlook, Outlook 2007, Thunderbird, Apple Mail – the list goes on. Screenshots are returned and you can get an idea of how well you campaign will display and where you need to tweak it if needed.

If all this sounds a little hairy then don’t worry – you can give us a call and our professional design team can create you a bespoke template that’s been fully tested, for a great price. For those of you wanting to give it go you can find a finished version of the template from this example in your account now (for free!). If you don’t yet have a Sign-Up.to account, you can of course have a free trial account.

For generated HTML such as that from Photoshop or FireWorks I recommend setting your output HTML to use nested tables, no spacers and non breaking spaces for those empty table cells, this always gives the best results across the email client spectrum.

So you’ve imported the HTML you’ve spent hours on, it’s browser compatible and W3C compliant, so why is your email campaign all screwed up?

The issue here is that although, yes, emails are designed in HTML and CSS, things are not as they seem in the world of Hotmail, Gmail & everyone’s favourite Outlook.

So first things first, get out your 90′s get up,  reach for a can of jolt cola and forget almost everything you’ve learned in the past decade: it’s time to design for email.

There are loads of tips and tricks, exceptions and conventions, so I’ll start with the main ones and we’ll see how we go.

Forget Divs in the 90′s (and email design) – tables rule

Tables are the single most important feature of email design – forget tabular data these babies are for layout. Nested tables form the basis for your layouts, whether you stick with the basic header/body/footer design or go deeper and add sub tables, these will be the building blocks of your email.

Nested tables (new tables inside cells) display much better in email clients than splitting rows and columns

Just like the 90′s you can’t have any style on your head

No CSS declarations in the <head> of your emails. Well you can but most webmail clients like Hotmail strip that straight out, so you should declare your CSS inline.

Wrong:
<style>

.heading  {font-family: Arial, Sans-Serrif; font-size: 14px; color: red;}

<style>

Right:

<p style="font-family: Arial, Sans-Serrif; font-size: 14px;">Heading</p>

Separating your headings in table cells means you can apply an inline style to the cell and freely change the text via a WYSIWYG without deleting the style

Java was just a type of coffee

Back in the early days there was no fancy Javascript, no YouTube videos or Twitter feeds, it’s the same in the email world.
So sit back with your favourite cuppa and don’t worry about all that fancy stuff, it’s not going to work anyway.

A clever way to get forms or videos into your campaigns are use screenshots that link to the actual content hosted on your site or on YouTube.

Rather than sending an attachment, much better to host that file on the web and link to it. Not only does this allow you to track who views that file, but attachments often trigger spam filters so you’re more likely to reach the inbox with a link.