News Flash

Great article by @NeutronUK on how to create a print stylesheet using Firebug and the Web Developer Toolbar - http://cot.ag/bOQiVM

Tagged: html emails

4 January 2009

Campaign Monitor is an online email marketing application that enables designers to create, send, manage and track branded emails for themselves and their clients with ease. Freshview, the company behind Campaign Monitor recently updated the software, adding additional functionality that enables designers to not just run campaigns but actually re-sell it as if it were their own product. They’ll even let you rebrand the application interface and set your own mark-up on the pricing!

37signals_37s37signals_basecamp

37signals uses Campaign Monitor for their HTML emails

HTML email? No thanks!
Along with every other designer I know I’m not exactly the biggest fan of HTML emails. The sheer number of email clients and their sketchy CSS support dredges up memories of web development in the late 90’s. Tables? Inline styles? …and that’s just to get it displaying correctly across the many (many!) email packages, not to mention managing the recipient email addresses and tracking the campaign results. It all sounds far too complicated, expensive and not at all what I got into this web design malarkey for.

Clients do love those branded emails though, so it looks like they’re here to stay. Let’s be thankful then for Campaign Monitor.

First impressions count
Two things struck me immediately about Campaign Monitor (before I had even signed-up for an account). The first was the pricing and just how much you seem to get for very little cost (you can actually do an awful lot for free). Unlike many other internet applications there’s no sign-up or monthly fee; you simply pay whenever you send emails to more than 5 people, which means you can thoroughly test almost everything about the service before committing. The pricing structure is very straightforward – you pay $US5 plus $0.01 per recipient, so sending an email to 500 people would cost $5 plus (500 x $.01) = $10. You also have the option of invoicing clients a marked up cost.

congratulaions-youve-made1

Get paid when your clients send html emails

The other thing that really stood out was the wealth of resource and support information offered across the CM website. Rather than just promote the product it offers information about best practice for designing and sending HTML emails, a run-down of CSS support offered by various email clients as well as tips on how to pitch and charge-for email marketing campaigns. The content across the site is really well written and leaves you with a warm fuzzy feeling that ongoing support from these guys won’t be a problem.

Sounds Great, but What About the App?
Once you have signed up to use Campaign Monitor you are provided with a personalised ‘mycompany.createsend.com’ domain name. This is where you manage your clients, email campaigns, billing for each client and your own account settings which includes the white label customisation settings for the interface. You can choose from nine different colour schemes, add your own logo, add a log in form directly from your own site and even change the createsend url to your own domain if you want.

Just like the CM website, the app itself is beautifully designed with a clear, simple interface, that makes it easy to find your way around (which is no small feat given the amount of functionality it’s packing). It’s testament to this intuitive design and the friendly, succinct copywriting, that I never once felt lost or confused while using the application (there’s a good spattering of in-context advice and help links in case you do need assistance or further information as you go though).

Clients and Billing
The first page you’re greeted with is a simple dashboard which lists your clients and a run-down of latest activity. Adding new clients is very quick and easy with a short one-page form where you can set exactly how much access they can have to the system, what they will be able to see and do, as well as their billing details. You can choose to run things exactly as you please, from allowing no client access and sending your own invoice outside of the application, to allowing your client to do everything themselves and have Campaign Monitor charge them and send you your mark-up profit automatically.

Sub-accounts for each client are automatically generated. This is where you can track each client’s campaign, add email templates, create and send emails, manage their subscriber lists and view related campaign reports. These are also the pages that your client will see if you’ve provided them with access to their account.

Sending and managing campaigns
Sending a new campaign is straightforward, and presented as a four-part linear process that you are guided through step-by-step in a clear and logical manner. Once you’ve set the campaign title, subject line, sender and reply-to addresses you import your email design and content. Depending on how you choose to mark-up the html (don’t worry – it’s easy and explained clearly on the Campaign Monitor website) you can invoke a fancy new WYSIWYG editor that you or your clients can use to add content to the email and see exactly what it will look like in real time as you type.

cm_editor

Let clients add and edit email content in real time using the super-simple WYSIWYG editor.

Next you add your list of recipients and send it off. One of my favourite features was how you can choose to have Campaign Monitor test your email design and content to ensure it renders correctly in most email clients and will pass through spam filters and firewalls. This really stood out for me as an amazingly useful feature. As designers we all know what a nightmare it can be making sure our sites render correctly in all browsers, but all of the email clients; web-based, desktop and mobile too? No chance. The only complaint I have was that I found this to run a little too slowly (about half an hour) and still not all of the results came back. The guys at Freshview ensure me that this is being improved however, and I still think it’s well worth the extra $5 they charge for the hassle it saves regardless!

There’s a lot of little extra features associated with sending out a campaign such as automatic archiving of campaigns within each clients’ sub-domain but two nice little touches that really caught my attention were the ability to automatically convert your email’s css from an external sheet to inline styling at import, and automatically generating an online version for those recipients to whom the email doesn’t look right. I had assumed these were both things I’d have to take the time to implement as the designer, so was pleasantly surprised to find them built-in. In fact, I was hard pressed to find anything missing at all, and instead was frequently surprised by handy, unexpected little features like these.

And the Rest
When I first looked at Campaign Monitor I assumed sending branded html email was pretty much it, but that’s just the start! Once your campaign gets sent you can track all manner of information about who opened it, what they clicked, who marked it as spam and who unsubscribed, all presented in a nice Google-Analytics style interactive report. In fact, there’s integration with Google Analytics too, so you can track where on your site recipients go after reading your campaign!

cm_report_snapshot

Real time, interactive campaign information presented in a clear, familiar ‘Google Analytics’ style report.

There are a number of other notable features, and improvements over the previous version worth mentioning that I came across while trying out the system but didn’t get to explore fully, particularly around targeting subscribers, generating sign-up forms, subscriber management and the Campaign Monitor API. You can find the full list of features and find out more about them over at the Campaign Monitor site.

Is it Any Good?
You can probably tell by now that I have become a fan of Campaign Monitor. In the course of a week I’ve gone from dreading a client asking for a HTML email to being a lot more interested in the potential that branded email marketing has to offer both my business and my clients’. Campaign Monitor removes so much of what was a hassle before that I’m even starting to think I might start promoting it as service to my clients. I could even make some cash out of it too!

Software name: Campaign Monitor (White Label version)
Developer: Freshview
Price: $US5 plus $0.01 per recipient (but you can set your own mark-up)
Rating (out of 5): 5

Continue reading 41
Future of Web Apps Dublin May 14 2010

28 November 2007

Boy what a difference 18 months can make! In my last Vitamin article I was singing the praises of standards based email and encouraging the use of CSS in your email designs. While the browser market has continued to strive for better standards support, a major player in the email industry has unfortunately done the opposite.

With the release of Outlook 2007 earlier this year using the Word rendering engine instead of Internet Explorer, my recommendations just don’t make the cut any more. I’ve decided to revisit my original suggestions and bring them more in line with today’s baseline. I’ve also had a good look at the feedback and comments from the original post. Getting your email to look good is only one piece of the puzzle, so I’ve dedicated the second half of this article to recommendations on how you can improve the chances of your emails actually getting delivered.

Some things change, some stay the same

While the best way to code your email might have changed, a number of key email design fundamentals haven’t changed a bit. My original article focused on the importance of designing for images being turned off and making sure your design looks good in the preview pane. Not only are these notions still relevant, they’re more important than ever with more and more email clients using preview panes and blocking images by default.

In the last 18 months we’ve seen the new version of Hotmail, known as Windows Live Hotmail and the new Yahoo! Mail sport a preview pane layout that blocks images by default for unknown senders.

In terms of image blocking, it’s safe to assume that at least half of your recipients will receive your email without any visible images. Because of this, it’s still important to ask your recipients to add you to their contacts/safe senders list when they subscribe (and in each email subsequent email you send), which often results in your images being turned on by default.

On top of image blocking and preview panes, my other recommendations on essential content, the importance of testing and key things to avoid all still apply. If you haven’t done so already, make sure you check out these suggestions.

Learning to love inline CSS

You might ask why an update to only one particular email client might change my entire position on using CSS in email. That one’s easy. Outlook commands more than two thirds of the business email market. Admittedly, not everyone will have upgraded to the 2007 version so far, but many more will. Add the imperfections of Hotmail and Gmail to the mix and it becomes difficult to justify sending a garbled email to so many of your subscribers.

No need to throw the baby out with the bathwater though. CSS still has an important role to play, albeit in its non-semantic inline form — but it works. For example:

<p style=”font-family:Arial; font-weight:bold;
font-size:11px; color:#060;”>Look ma, no semantics!</p>

I know many of you probably cringe at the thought of this, but if you’re looking to get any kind of design consistency across the major email environments, it’s your best option. Not all CSS is supported though, you’re actually working with a limited subset. Here’s an outline of what CSS is and isn’t supported in 14 of the most popular email clients.

For a solid level of support in Outlook 2007 and Gmail, as well as other major clients, stick with inline CSS
for the following properties:

  • background-color
  • border
  • color
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • line-height
  • margin
  • padding
  • text-align
  • text-decoration
  • text-transform

Using tables for basic layout

If you’re looking to add columns or any kind of significant design element to your email, then unfortunately structural tables are the only way to go. Float and width are just too poorly supported at this stage to consider completely CSS-based layouts. Don’t get too ahead of yourself though, just because you can use tables doesn’t mean pixel perfect design will be easy.

Just like CSS, different email clients handle tables differently. When you start to add in a bit of cell padding and maybe nest a table or two, things can get ugly fast. Again, there are some basic table guidelines you can stick to so you can at least maintain your sanity.

  1. Don’t go nesting crazy. As soon as you start nesting more than one table deep some email clients really start to choke, especially older clients like Lotus Notes. Even Outlook handles the padding in a nested table differently to that of the parent table.
  2. Instead of specifying your table width in the <table> tag, specify the width of each cell in the <td> tag. You’ll find this gives you more consistency across the board.
  3. Make sure you don’t mix cellpadding with padding via inline CSS. Some email clients really struggle with this, so stick to basic cellpadding and no CSS for the best results.

Here’s an example of some simple table code that will render most consistently across the major email clients. Notice the lack of width in the table tag and no CSS.

<table cellspacing="0"
cellpadding="10" border="0">
 <tr>
  <td width="120"></td>
  <td width="480"></td>
 </tr>
</table>

The takeaway from this really is to keep things simple, which I think is a good thing for email anyway. Avoid large images and complex layouts and instead focus on making your content readable no matter how your subscribers are viewing your email.

Looking ahead

While the current lack of standards support in the email world is discouraging, complaining about it isn’t going to get us anywhere. We need to start being vocal to email client developers and encourage them to embrace web standards when rendering HTML emails. It’s a big job, and that’s why we recently launched the Email Standards Project — a brand new initiative that will hopefully broaden the communication lines between designers and those responsible for how email clients render HTML email. Check it out and help spread the word if you think it’s an important issue.

Getting your emails delivered

Even though achieving consistency in how your emails are rendered is a challenge in itself, you’ve still got a long way to go before it actually arrives in your subscriber’s inbox. The world of email deliverability has changed a lot in recent years. Originally, content was king. As long as you weren’t blacklisted and your email content didn’t include lots of “spammy” words, then you had a good chance of getting delivered. Today however, ISP’s and spam filtering technology has got a whole lot smarter and more aggressive.

Who is sending the email is becoming more important than what the email says. ISPs are doing this by watching their customers reassign habits and use of the “Mark as spam” button, and then tying that back to the sending domain and IP address. If a subscriber is regularly opening your email then you should be in the clear, but if a decent number rarely open your email and mark it as spam then you might not make the inbox much longer. Known as your sender reputation, it’s the most important factor in getting your emails delivered today. Just like the real world, having a good reputation ensures trust, and if ISP’s don’t trust you, you’re in trouble.

This introduces a new challenge to anyone sending reasonable amounts of email. No longer is getting permission enough to assume your email will be delivered. If it’s not relevant and exactly what the subscriber asked for, you run the risk of them marking your email as spam. It’s a delicate but extremely democratic
system; your ability to deliver email truly is in your subscriber’s hands, so treat them with the respect they deserve.

Ensuring a good sender reputation

There are three major metrics most ISPs use when calculating your sender reputation, each of which are easy to maintain provided you use some common sense. These metrics are your spam complaint rate, the percentage of email you send to addresses that no longer exist, and finally the number of spam trap addresses you send to. Spam traps are generally email addresses created by ISPs and anti-spam companies to lure spam by never actually signing up to anything, but publishing them in spots where email harvesters will pick them up.

By following the simple guidelines below, you can ensure these three metrics never become an issue and
tarnish your sender reputation.

  1. Get their permission — File this one under “so obvious it’s almost not worth mentioning”. Unless you have clear, explicit permission from everyone on your list then please don’t bother sending anything to them. There are no shades of grey here either — it’s like someone “sort of” being pregnant. If they don’t remember giving you their permission, they’ll mark your email as spam and shoot your sending reputation in the foot. This is also the only way to guarantee you won’t ever be sending to spam trap addresses.
  2. Set expectations and stick to them – At the time of obtaining permission, whether it’s through a subscribe form on your site or someone giving you their details offline, be sure to tell them when they’ll be hearing from you and what they should expect to receive. If someone subscribes to your quarterly newsletter and you start sending to them weekly, you can expect spam complaints.
  3. Be relevant and interesting — This one can be hard to get your head around because it seems so easy. Of course my emails are relevant and interesting! But are they really? Before you hit the send button, try and put yourself in your subscriber’s shoes and honestly ask yourself if it’s something you’d be interested in hearing about. It’s getting more and more common for subscribers to mark your email as spam even if they originally opted-in, purely because it wasn’t relevant enough.
  4. Make it easy to leave — One particular mistake that I see quite a bit is making it hard for your subscriber’s to unsubscribe from your list. The mentality is that by hiding your unsubscribe link in a small font somewhere in the footer then maybe people won’t bother. Today, if a subscriber wants out and can’t immediately see the unsubscribe link, I guarantee the “Mark as Spam” button will be their next best choice. If anyone does click your unsubscribe link, don’t make them jump through hoops to get off your list either. A single-click is all it should take.
  5. Process all bounces — Every time a mail server receives an email for an address that no longer exists or is temporarily unavailable, they’ll send you back what’s called a “bounce”. This is a simple email that often explains why the email couldn’t be delivered and comes in two distinct flavours. A “hard bounce”, which is a permanent error meaning that address is no longer in use, and a “soft bounce”, which is a temporary issue such as a full mailbox. The moment you get a hard bounce back, you should immediately remove that address from your list. While they are often temporary, I recommend keeping track of all soft bounces. As soon as an email address soft bounces 3 times, consider it permanent and remove them from your list. Your sender reputation will thank you for it.

Keeping track of spam complaints with ISP feedback loops

Because keeping your spam complaint rate low is so important, a number of the major ISPs have feedback loops set up where they’ll send you an email letting you know whenever anyone marks your email as spam. This is incredibly useful — you can immediately remove anyone who complains from your list, and you can also quickly gauge if your content is starting to become irrelevant. Here are some brief instructions on the major feedback loops you should register your sending IPs with if you’re taking care of email delivery in-house.

Overview What you’ll need to supply
Windows Live Hotmail (Hotmail/MSN)
The Hotmail Junk Email Reporting Program is a must to register for and includes all spam complaints from Windows Live Hotmail and Windows Live Mail.
Company and domain information
Your sending IP addresses
Your sending practices
Support for Sender ID email authentication (explained below)
Microsoft’s Smart Network Data Services
A great way to monitor your deliverability to all Hotmail and MSN accounts. You register your IP’s and they tell you if there are ever any delivery issues.
Company and domain information
Support for Sender ID email authentication (explained below)
AOL
Includes all spam complaints from desktop and web-based AOL accounts.
Company and domain information
Your sending IP addresses
Yahoo! Mail
Yahoo! doesn’t currently have a page dedicated to their feedback loop, but you can apply to be registered by emailing them.
Company and domain information
The Domainkeys signing key you use for each domain (explained below)
A signed agreement sent back to Yahoo!
SpamCop.net
Once you create an account and log in, you can add the IP range to be monitored here.
Company and domain information
Your sending IP addresses

Most ISPs use the standard Abuse Feedback Reporting format when sending you these complaints, which often involves stripping any personal information about who made the original spam complaint. Because of this you’ll need to make sure you include some kind of identifier (like a subscriber ID) in the original email so you can confirm who made the complaint and remove them from your list.

Embracing email authentication

Email authentication is a set of important technologies that add a much needed accountability layer into the emails you send and can instantly improve your deliverability to many of the major ISPs. By setting up authentication for all of your sending domains, you can prove an email is coming from you and isn’t fraudulent. These days it’s becoming a must-have for anyone sending a decent amount of email.

Authentication works by adding some simple records in the DNS for each sending domain you use. For example, if you send email from news@abcwidgets.com, you’ll need to add your authentication records into the DNS for abcwidgets.com. Right now there are two main authentication systems that you should be using:

Authentication method ISP’s that support it
Sender ID
A Microsoft technology based on the SPF standard that involves adding a record to your DNS indicating which mail servers are allowed to deliver mail on your behalf. You can create your Sender ID record in a few minutes using this wizard.
MSN/Hotmail
AOL
Juno
NetZero
United
Gmail
DomainKeys and DKIM
DomainKeys is a Yahoo innovation that involves adding a record to your DNS containing a public key, and then adding a corresponding digital signature to your mail headers that matches the corresponding private key to the one In your DNS. DKIM is a newer standard combining DomainKeys and another standard. If possible, I recommend supporting both.
Yahoo
Gmail
Earthlink

Keeping your own house in order

So, now that you’ve got a good sending reputation and are ensuring it remains under control by monitoring spam complaints, what else is left? Here’s a checklist of some of the more important finer points that you’ll also want to ensure is covered in your email infrastructure:

  1. Reverse DNS — It’s crucial to ensure you have RDNS set up for every IP you deliver email from. RDNS involves a receiving mail server looking at the IP address your email is coming from and then checking to see if there is a registered domain associated with it. It’s a requirement for most receiving mail servers and whitelists, so don’t overlook it.
  2. Valid mail headers — The information contained in your mail headers is crucial to a receiving mail server deciding if they will accept your email. Make sure you’ve got a valid return-path (where bounces are sent), the correct MIME-Version and encoding information, DomainKeys/DKIM signature and your IPs in the received lines have RDNS set up. I’d also recommend checking out the list-unsubscribe header currently supported by Windows Live Hotmail.
  3. Throttling your delivery speeds — different ISPs have different maximum speeds you can send at. Once you start to exceed these speeds, they’ll consider you a spammer and start blocking you. Make sure you set a reasonable speed limit on the number of connections and messages you send per hour so you don’t tread on any ISPs toes. From experience most ISPs will allow a few hundred simultaneous connections and 25 or so messages per connection.
  4. Stay off blacklists — While your sending reputation continues to become more important, you still need to make sure you don’t appear on any major blacklists. Even if you’re following all the guidelines I’ve mentioned above, a rare blacklisting can happen to the best of us. I recommend checking the free Spam Database Lookup provided by DNS Stuff as often as you can. You can also apply to be whitelisted by ISPs such as AOL and Yahoo.
  5. Monitor all abuse accounts — By default some anti-spam systems (and people) will send any spam complaints to abuse@yourdomain.com. Make sure it’s set up and is actually going to someone responsible for your sending reputation. If a complaint is made, resolve it immediately. Don’t forget to register your abuse accounts with abuse.net.

As you’ve probably gathered, nothing about email marketing is a piece of cake. Whether it’s getting your email delivered or making sure it looks great once it arrives. If you’re using an Email Service Provider like my company Campaign Monitor to deliver your emails, all of the technical challenges I mentioned above will be covered for you automatically. Nevertheless, the technical side is only a small part of your email reputation — the crucial ingredients of permission and relevance are up to you. If you are responsible for delivering email from your own servers however, I hope that by sharing many of the lessons I learned the hard way over the last few years you can get your emails delivered, and keep your sanity in the process.

Continue reading 18

3 June 2006

HTML email – you either love it or you hate it. Some love the simplicity of text-only emails, while others praise the flexibility and good looks of HTML. But it doesn’t really matter whether you love it or hate it because sooner or later a client will ask you to design one of those ‘pretty looking email thingies’ for their own customers, and then what do you do?

Most of us tend to think that if we can design a web page, then hell, an HTML email will be a piece of cake! Well…almost. But before you decide to plunge into HTML email design head first, there are a few guidelines to follow that can ensure the best results for you and your clients.

The guidelines fall roughly into these recommendations: how you should design your email, how you should code it and finally the essential content you should include. Before we get into it though, let’s get one thing settled once and for all. These guidelines are for relevant, permission-based emails being sent only to subscribers who have opted in to hear from your client specifically on the topic of the email. So if you’re a spammer, look away now!

Design for images being turned off

Here’s a nasty little fact for you. Any of your recipients who use AOL, Outlook 2003, Outlook Express and Gmail will never see the images in any emails you send them by default. For some people that can make up at least half of all the people they ever send email to. Bummer huh? I told you it was nasty.

Apple iTunes Announcement

Here’s an example of just how ugly things can get. It’s an email I received from Apple announcing the launch of the much anticipated iTunes Australia Music Store.

Apple announcement with images off
The Apple HTML email I received with images turned off

Apple announcement with images
The same email from Apple with the images turned on

Luckily I recognized the sender and enabled the images right away, but how many of their recipients got the version without images and deleted the email immediately?

We know that images get blocked and that this will affect the design of your email – but blocked images are by no means a show stopper. All you need to do is follow a few simple guidelines when designing your email and you’ll forget that image blocking was ever an issue:

  1. Don’t use images for important content like calls to action, headlines and links to your web site.
  2. Ask your recipients to add your sending address to their address book every chance you get. This will ensure your images are displayed by default in a range of popular email environments.
  3. Add a text-based link to a web-based version of your email that will reveal your email in the browser in all its glory.
  4. Use alt text for any images (which will be viewable in some email environments, especially Gmail).
  5. Make sure you always include the width and height in the image tag for every single image. This ensures the empty placeholder images don’t get stretched and completely throw your design.

To backup these recommendations, here are a few samples of emails that have been designed with these guidelines in mind. Notice how readable they are even with images disabled.

Digital Web Magazine’s Newsletter

Designed by Mark Wyner, this email even uses a clever image replacement technique to display a text alternative when images aren’t enabled. It looks great and is easy to read in either state.

Digital Web's newsletter with images turned off
Digital Web Magazine’s Newsletter without images

Digital Web's newsletter with images turned on
Ta Da! The same newsletter with images turned on

River City Church Newsletter

Designed by Jon Livingston, this email looks great with images enabled, but the large, clear title in the header still makes it recognizable to those with images turned off.

River City Church mail with images on
River City Church newsletter with images on

River City Church with images off
River City Church newsletter with images off

Remember that almost half of your recipients may be using a small preview pane to decide if your email’s really worth checking out. Preview panes allow your recipients to check out a sample of your email before they decide to open it and read the whole thing. Some of your recipients will even read all their email in the preview pane and will never completely open it.

Historically, preview panes have been popular among traditional email clients like Outlook and AOL. That’s all about to change with the two most recent betas of the new Yahoo! Mail and Windows Live Mail (Hotmail) both sporting a split-screen preview layout.

So how does this sudden loss in screen real estate impact your design? We’ve all got busy inboxes and if you’re like me, you’re pretty trigger happy with the delete key. If your design doesn’t grab your recipient’s attention with relevant and interesting content within a second or two, it probably doesn’t stand a chance.

Each email environment dedicates different screen real estate to their preview panes, but no matter what your recipient is using, try to ensure the following:

  1. Include something that will identify you and even attract interest at the very top of the email and preferably to the left. This could be a summary of the email content or at the very least the name of your company/organization.
  2. Check out your reports after each email you send to see what people are most interested in – try to make that visible in the preview pane for the next email.
  3. Make sure this content is text-based so it will be viewable by all recipients by default.

CSS or tables for layout?

Ahhh… the age old question. Unfortunately, the answer is still ‘it depends’. Contrary to popular belief, fully-semantic CSS based emails are not only possible, but widely supported in the majority of email environments. Even better, if you code your CSS correctly, your email can fall back to a perfectly usable rich text email for those with poor CSS support.

Today, deciding on whether to play the CSS card or fall back to tables and inline CSS is a lot like the days when you had to decide if you wanted to support Netscape. Some clients will demand it, while others realize that it’s time to move forward.

If you’re unlucky and the CEO uses Lotus Notes but wants your design to look consistent for everyone, tables and inline styles it is. If you can explain to your client just how broken some email clients are, and that your design will be accessible by everyone but will degrade to a simple layout for some, CSS is an option.

At Campaign Monitor we’ve tested CSS support across every popular email environment out there, so if you’re interested in which CSS selectors and properties are supported, it might be worth a peek. Your clients’ preferences aside though, it’s impossible to know what email environment your recipients will be using. Ultimately, to decide on CSS or tables you’re going to need to make some assumptions.

If you’re sending a Business to Business email, it’s safe to assume that most of your recipients will be using Outlook (around 75%) or Lotus Notes (9%). Outlook’s CSS support is top-notch, but Lotus is just plain dismal. That one’s your call.

If you’re doing the Business to Consumer thing, you’re probably looking at Yahoo!, Hotmail and AOL. If you’re targeting early adopters, you should also consider Gmail (although be warned, Gmail is not as popular as you think it is and is still only hovering at less than 5% of the web-based email market).

To make things easier, here’s a quick summary of which popular email clients support the CSS approach, and which ones rely on tables and inline CSS to display your message as intended.

Email client What you should use
Yahoo! Mail CSS
Hotmail CSS*
Gmail Tables and inline CSS
Outlook and Outlook Express CSS
Lotus Notes Tables and inline CSS
AOL 9 CSS
Thunderbird CSS
Mac Mail CSS
Entourage CSS
Eudora for the Mac Tables and well, no CSS

* Hotmail has one big gripe – make sure you include your <style> element in the <body> and not the <head> or it will be stripped completely.

I want to reiterate this point because I think it’s so important. Don’t be ashamed if you’re forced to go down the tables and inline styles path. As I mentioned before, email clients today range from perfect CSS support to almost none. If your client demands design consistency for all recipients, you really don’t have any other option.

Five Things to Avoid

Whether you use CSS for your layout or not, there are a few other big no-no’s.

  1. Include the <style> element in your HTML file, don’t reference it externally. Some providers will strip it altogether, while others won’t use it if images are disabled. If you’re sending to Hotmail recipients, place the <style> element in the <body> and not the <head>.
  2. Avoid using CSS for positioning. The support is very limited and will more than likely result in a broken layout for most of your recipients.
  3. Don’t use Flash or JavaScript. Flash is poorly supported by most email environments and JavaScript will either get stripped or a security warning will be displayed to your recipients.
  4. Make sure you properly format your HTML and CSS. Leaving a tag open or overly messy HTML may result in your email being filtered as spam.
  5. If you’re targeting Gmail, make sure you do your CSS inline, the <style> element will be removed completely.

Don’t forget to test

No-one launches a new site without checking it in a few browsers first and the same applies with your email designs. If you’re sending a lot of HTML emails, you should try to test each new design in the following environments before sending:

The only one you’ll need to pay for out of all of the above is AOL, but they have very cheap plans perfect for testing for around $5.95 a month. Also, you can always send it to a friend and get them to test it for you.

Don’t forget though, once you get your email right, you can generally re-use your template design and just add new content, so you’ll only need to re-test occasionally.

Essential content

On top of getting your design and code right, there are a number of items that you must include in your email content. We’re not mucking around here, these are protected by law (at least in the US) and can land you in a whole heap of trouble if they’re not included.

The Must-Haves

  1. A working unsubscribe mechanism. You want to make it as easy as possible for your recipient to stop hearing from you. I recommend a single-click unsubscribe link.
  2. Your company name and physical address.

The Should-Haves

  1. A link to a web-based version so those having trouble viewing your email can check it out in their browser.
  2. A quick summary of how you got your recipient’s email address (they opted in from your site, they bought a product from you, etc).
  3. Your recipient’s email address, so they can verify that the email was specifically sent to them.
  4. A request to be added to your recipient’s address book to ensure images will be displayed by default.
  5. A text-only version of your email. Some of your recipients may set their email client to only show the text version of each email, so make sure send your email in multi-part format, which includes both the HTML and text-only version in a single email.

By following the guidelines mentioned above, you can ensure the best email experience for your recipients and hopefully the best results for your client.

digg.com logo Like this article? Digg it!

Continue reading 25

Sign Up to our Newsletter

Enter your e-mail address below to receive regular updates on web design, web development and web business. Subscribe today and receive a free 44 page PDF "Designing Web User Interfaces" by Ryan Singer of 37signals.

Subscribe to the Think Vitamin articles RSS feed

HTML5 Online Conference April 12 2010

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck