
Click here to print.
Posted By David Greiner On 28th November 2007 @ 09:00 | 81 Comments
Boy what a difference 18 months can make! In my last Vitamin article1 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.
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 article2 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 suggestions3.
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 supported4 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:
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.
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.
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 Project5 — 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.
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 today6. 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.
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.
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)8 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 Services9 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) |
| AOL10 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 them11. |
Company and domain information The Domainkeys signing key you use for each domain (explained below) A signed agreement sent back to Yahoo! |
| SpamCop.net12 Once you create an account and log in, you can add the IP range to be monitored here13. |
Company and domain information Your sending IP addresses |
Most ISPs use the standard Abuse Feedback Reporting format14 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.
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.com15, you’ll need to add your authentication records into the DNS for abcwidgets.com16. Right now there are two main authentication systems that you should be using:
| Authentication method | ISP’s that support it |
| Sender ID17 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 wizard18. |
MSN/Hotmail AOL Juno NetZero United Gmail |
| DomainKeys19 and DKIM20 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 |
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:
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 Monitor27 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.
Article printed from Vitamin Features: http://www.thinkvitamin.com/features
URL to article: http://www.thinkvitamin.com/features/design/ensuring-your-html-emails-look-great-and-get-delivered
Click here to print.