A large portion of my day is spent designing and marking up solicited email newsletters. I am also a very strong advocate of W3C Web Standards. For anyone who has ever worked on email newsletter, they will know all too well that the above sentences do not mix well.

All web designer’s have faced the many hurtles of browser compatibility. Getting things to work on multiple browser versions and browser types can be a real pain, but this is child’s play compared to the ever changing world of html based email. I’m not going to talk about whether email should have ever been used as a medium to deliver rich content, there is plenty debate about that elsewhere. The fact of the matter is that html email is here, and it’s very popular.

For the past three years the number one hurtle for myself and the company I work at has been Microsoft’s web based email, Hotmail. This client ruthlessly tears apart your beautiful standards compliant html and leaves a broken mess behind. Everything from requiring inline styles everywhere to removing all your margins, this beast has not been fun. Microsoft has now released Live Mail which is replacing Hotmail and is slightly better, but it is a tiny step in the right direction. I should also add that we have very little problems with Yahoo mail, and in general very little problems with most modern stand alone mail clients now.

Recently this has all changed. There is a new big, bloated and terrible mail client in town, and of course it’s also by Microsoft, and that client is Outlook 2007. Up until now, previous versions of Outlook supported both html and Word, but with Outlook 2007 only word is supported. Microsoft says this move is to standardise on one platform or something along those lines. I always thought that we as an industry had standardized on the W3C Standards, where have I been?

How do we deal with this new client? Rewind backward ten plus years in web design and we find ourselves in 1996 with minimal CSS, hundreds of messy nested tables, and the mighty fix all spacer gif. For the most part I have managed to make my emails hold their integrity in Outlook 2007, although with much pain and suffering.

The other day I was working on an email newsletter when I found a very strange bug, or maybe it’s a feature, since every other broken or missing aspect of Outlook 2007 seems to be documented as a feature. Basically I needed 400 pixel wide rules to separate some teaser articles. In a normal world this would be done purely with CSS, but I have gotten into the habit of using spacers for everything in my newsletters now. Stretching spacer gif images with the html height and width attributes has been an old stand by for years that some of us like to call the “brute force method”. You can image my surprise when a pixel stretched to 400 pixels came out to be only 66 pixels wide. After much head scratching I decided to run some tests which I will share with you here.

Basically Outlook 2007 at the time of this writing does not stretch 1 x 1 gif images past 66 pixels. At first I thought maybe this was a blanket rule to all spacers to stop the use of large pixel spacing. Why they would do this I don’t know, but it made more sense then what my testing further showed.

I decided I would try to stretch a 2 x 2 pixel gif to 200 pixels, the result was 131 x 131 pixel sized square. Now I don’t know what kind of funky math Outlook 2007 is using, but it’s not anything I have ever seen ever seen from any browser or email client to date.

Next I decided to try a 10 x 10 pixel stretched to 200 x 200. This resulted in the correct size. Below are two screenshots, one of the html in Firefox, and one in Outlook 2007.

Firefox Browser screenshot
Everything looks as one would expect it to look. It should look like this in every browser and mail client ever to support inline images.

Outlook 2007 screenshot

My advice to anyone coding email newsletters with Outlook 2007, is to use larger sized spacer gifs, 10 x 10 px should probably do the trick. You can also squash these down to 1 x 1 px images in the html without problems. Happy coding.