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 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 change 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.
Email html design and deployment quick tips
I create a lot of emails campaigns on a regular basis. Creating emails that work in all the mail clients can be a daunting task, if not sometimes impossible. Unlike web pages, you have many more combinations of email clients and browsers that may view your email. Add the fact that many email clients are blocking images, stripping CSS, or just outright ignoring all the great web standards we have worked towards for years, and you have a real mess.
There are some simple rules you can follow which should make life a lot easier. Testing of course is still required and many strange anomalies will pop up. Web based clients change without warning, so constant testing before every email deployment is a must. Below is a quick list of things to watch out for.
