Your robot protection does nothing!
Commenteer 6th January 2009
HTML EMAILS & OUTLOOK 2007
Dan Howard 9th December 2008
Jargon:
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.
Notes and Queries...
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/
shirley 30th January 2009
Thanks for the help, you rock.
Amy Tripp 24th February 2009
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 Oloyede alexoloyede@gmail.com 3rd March 2009
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.
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.
Dan Howard 9th March 2009
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
karen 19th March 2009
Does any one know a way to get animated Gifs to play in outlook??
Thanks
Thanks
Roger B 2nd April 2009
THINK TANK
- Google(22)
- Online PR(4)
- Miscellaneous(6)
- MSN(1)
- Yahoo(1)
- Online Advertising(8)
- Copywriting(4)
- Search Engines(13)
- Website Marketing(11)
- Converting browsers to buyers(1)
- Business(5)
- PPC(8)
- Social Media(3)
- E-commerce(3)
- Web Design(7)
- Web Development(3)
- Mobile Internet Technology(1)
- Google Analytics(1)
- Email Marketing(1)
- Digital Agency News(1)
CATEGORIES:
Thanks for the workarounds, I actually thought no CSS worked at all.