HTML Emails & Outlook 2007
Coding an HTML email is fairly straight forward, getting it to display correctly in Outlook 2007 is another story. Microsoft have decided that it would be a really good idea to use Word’s HTML rendering engine to display emails, I’m not entirely sure why they did this but they did, so we have to deal with it. To get your mailshot to display correctly, it’s a bit like using really simple language when talking to someone who doesn’t understand English very well…
1. Layout your design using tables
You have to go back in time and build your beautifully designed mailshot using tables. But, make sure you’re not using any “rowspan” or “colspan” attributes, Outlook 2007 doesn’t understand these and will break your layout. Fortunately there is a way around this, you can nest more tables within your table cells to create the same structure.
Lets say we need to create this:
| Left column | Right column (top) |
| Right column (bottom) |
<!-- Standard method -->
<table>
<tr>
<td rowspan="2">Left column</td>
<td>Right column (top)</td>
</tr>
<tr>
<td>Right column (bottom)</td>
</tr>
</table>
<!-- Without colspan or rowspan -->
<table>
<tr>
<td>Left column</td>
<td>
<table>
<tr>
<td>Right column (top)</td>
</tr>
<tr>
<td>Right column (bottom)</td>
</tr>
</table>
</td>
</tr>
</table>
2. You can’t use background images.
I am yet to discover a way around this one, but you can still use background colours. You just have to tell the designer that any selectable text needs to be on a plain background colour.
3. Outlook 2007 doesn’t understand CSS Floats
As mentioned above, your layout needs to be built using tables to avoid using CSS floats as this will certainly cause problems. This also applies to images within blocks of text, you must put them in their own table cell using nested tables as described above.
4. You must use very basic CSS Styling
External stylesheets will fail. Everything must been defined within <style> tags in the <head>, or inline using the “style” attribute.
<!-- This will not work -->
<head>
<link rel="stylesheet" href="http://www.yourdomain.com/mailshot.css" />
</head>
<!-- This will work -->
<head>
<style type="text/css">
p {
color:#999;
}
</style>
</head>
<body>
<p style="color:#999">Lorem ipsum dolor sit amet.</p>
</body>
5. Bulleted lists must use the default bullets
If the designer produces something that resembles this…
Send it back until it looks like this…
They aren’t nearly as visually amazing but they work.
Today’s Moral
As we all continue to move forward in web standards, with a common goal of making all code uniform so the data can be better understood, Microsoft seem to be moving in the other direction. They look to be making their platform using code unique to them, at the same time ensuring any developers have to go out of their way to make something work alongside their software.
Despite this, provided the developers are aware of this, and have a good knowledge of HTML code old and new, there are workarounds so we can ensure your mailshots look good on all the major email platforms.
8 Responses to “HTML Emails & Outlook 2007”
-
I simply don’t understand why MS always tries to make everything so hard… Thanks for the workarounds, I actually thought no CSS worked at all.
Esteban says:
-
Your robot protection does nothing!
-
Yeah, I ran into all issues discussed above and had to work around them all… while researching I found this helpful article on what CSS rules work in what e-mail clients: http://www.campaignmonitor.com/css/
-
Thanks for the help, you rock.
-
Could you give me tips on how to make anchor links work within html pages in outlook? They work perfectly in Thunderbird, Hotmail and Yahoomail, but Gmail disables them while Outlook points them outwards, trying to link to the source page (on my system) like it turns them to absolute links. All I want is for the user to click on a link on the page and jump to a different point on the same page without leaving that page at all much less opening up a browser window and going onine. Any help?
-
Alex, In my tests, I found that this works: <a href=#anchor>Go to anchor</a> <!– bla bla bla –> <div id=anchor>This is the anchor</div> Excluding quotation marks and using the id of an element to link to.
-
I used in my email but outlook 2007 did not accept this. What could I use to separate my text in different line. spacer did not work
-
Does any one know a way to get animated Gifs to play in outlook?? Thanks
