Creating email newsletter margins with tables
This may seem painfully obvious to some, especially the more seasoned old school table based web designers out there, but I’m still amazed at how many email newsletters don’t render properly in my inbox. Remember when it comes to email newsletters tables are king and web standards go out the window! It sucks, but that’s the way it is, so lets move on.
Outlook email newsletters and the AutoPreview pane
Cranking out email newsletters for Microsoft Outlook can be a pain, but if you are in the web business you may have to crank out the occasional email newsletter, and of course Outlook has a major market share. If you use Outlook you may know of the AutoPreview feature. This is a preview pane below the actual title that gives you the first few lines of content within the email. In many email newsletters you will get something like “View the online version of our newsletter”. This is probably not what you want to show up in the Outlook AutoPreview, and the way around it is quite simple. It’s also another chance to entice your audience into opening your email newsletter.
Creating OFT templates for Outlook 2010
I wrote an article a few years ago on creating OFT files for Outlook. This was written for Outlook 2007, and since then, Outlook 2010 has been released and things have changed. The ability to view web pages within Outlook 2010 has been removed and the UI has also been redone, but fear not, the ability to make OFT files still exists, although it’s not as straight forward as it used to be.
Email newsletters in Lotus Notes and table width
Lotus Notes, or Locust Notes as some of my colleagues like to call it is probably the hardest email client in wide use to code for. Depending on which version you are trying to support, you may be in for a real nightmare. I recently marked up a very basic email newsletter that had to work in Lotus Notes 6.5 and I still had a lot of trouble getting it to work. The same rules apply to Lotus as that of Outlook 2007, build your emails with a slew of tables and spacer gifs and use as little CSS as possible, this is especially true for older versions of Lotus notes. I wanted to share one particularly nasty bug that I squashed, and that is how Lotus deals with table widths.
Outlook 2007 losing font-family declaration
Email clients are one of the pinnacle frustrations for web designers. The limitations are far greater than those of web browsers and you can always count on Microsoft’s Outlook 2007 being at the forefront of compatibility problems and bug issues. If you create emails that have to support Outlook 2007′s wonky Word rendering you may have noticed on occasion that your specified font-family disappears. There’s a few ways to fix this, but some are better than others.
Anchor links in Gmail and email newsletters
I usually recommend against using anchor links in email newsletters; the reason for this is twofold.
First, when someone is viewing a newsletter their attention span is probably extremely short. They probably want to get onto their next email, but something has triggered their interest in your newsletter. Why waste that interest on jumping them further down the email, this is your chance to grab their attention and hook them into your website. It may be your last chance before they click onto their next email and your website is probably a much richer web experience anyway.
Yahoo! mail paragraph spacing still broken
Yahoo broke it’s paragraph spacing in HTML newsletters a long time ago and still hasn’t fixed it. Usually it’s Hotmail or Outlook 2007 that get all the flack for their wacky email newsletter behavior, but dropping paragraph spacing all together really takes the cake, that’s just bizarre. There’s the age old debate on email newsletters and whether they should even exist, but like it or not they are here to stay and there’s obviously a demand for them. Email clients should at least show the basic tags properly. That said if you make email newsletters like I do, you probably want to know how to fix this.
Styling the paragraph tags
Luckily at least with my tests you don’t need inline styles, so you can use an embedded style sheet at the top of the newsletter. If you have worked with email newsletters for awhile you probably already know that most styles should be made inline, but inlining paragraph tags can be tedious depending how man you have. This fix should work either embedded or inline, so it’s up to you which method you choose.
p {
margin-bottom:1em;
}
Option 2:
<p style="margin-bottom:1em;">Your paragraph</p>
This should fix your Yahoo mail paragraph woes, at least until they break change something else.
The mailto syntax; A comma may not work in Outlook Web Access
The mailto syntax is pretty simple, but sometimes you might run into problems with some mail clients (AKA Outlook Web Access). Most of them are very forgiving and you can drop a comma for example right into the body of the mailto and have no problems, but it’s better not to do that. It’s much safer if you use hexadecimal numeric values for your special characters. For example a comma is %2c and a space is %20.
Outlook 2007, inline styles, and links
I recently discovered yet another weird Outlook 2007 bug with email newsletters. Every web designer has probably gone through the nightmare of Internet Explorer and then tried to explain to non-web people why it just plain sucks. Outlook 2007 raises the bar to a whole new level of awfulness, but enough with the ranting.
Outlook 2007 borders and 1px padding on table cells!
Anyone creating email newsletters on a daily basis will tell you how hard it is to get them to render properly in all email clients, but getting them to work in Outlook 2007 can be maddening as any quick Google search will show.
Today I came across a bug that left me fuming. I could not figure out why every single cell in my table heavy layout had a 1px padding around it and in some cases I was even missing my table borders. For those of you working in the sane world of web design, tables are a thing of the past, but in the world of email, tables are back with a vengeance.
As I became more and more disillusioned I started trying anything and stumbled across the fix. I knew I had to share this, so if you are experiencing any of the above, here is the fix and it’s a simple one.
Here’s an example of what a two cell table with an image and text would look like before the fix. Notice the 1px white border/padding around the table.
And here is how it’s supposed to look after the fix. No white border / padding.
And the fix?
table td {
border-collapse: collapse;
}
I don’t think I’ve ever even used this css before, but once I started grasping at straws I began to fiddle around with the CSS border attributes and tried it. I’ve never seen any browser or mail client except Outlook 2007 do this to table cells.
Here’s the full HTML from the example, and thank you Microsoft, for delivering the worst email rendering experience yet, we all thought Hotmail was bad, but you really stepped up to the plate!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outlook 2007 Test</title>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
</style>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border:solid 1px #48463b;">
<tr>
<td width="80"><img src="http://yourserver/graphic.gif" width="80" height="40" alt="graphic"></td>
<td width="120" style="background-color:#c1beb1; color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; font-size:11px;">Another column<br>
plain text.</td>
</tr>
</table>
</body>
</html>
You may also want to check out my other entries on this topic.
