It All Started Like a Normal Email Newsletter Project…
We were working with a client to help them with their email newsletter. We like to use a service called Mail Chimp (mailchimp.com) for email newsletters. It allows us to make email templates that enforce brand guidelines, but are easy enough to use that our clients are confident in sending out their newsletters after an hour or two of training. Rich HTML emails need lots of testing and as part of the project and emails behave very strangely in different email clients. This is a very large topic which I'm not going to be covering in this post, but the basic fact of email testing is you need to do lots of it. We did a full round of tests on the popular web-based clients (Gmail, hotmail, AOL) and the "good email clients" (Outlook 2003, Entourage 2008, Thunderbird, and Apple Mail). And finally to the newest (and most crippled in functionality) clients: Outlook 2007 and 2010. It took lots of work but we eventually made the templates consistent across all of the tested email clients.
During a live demo with the clients we ran into a rather peculiar problem.
Even after all that testing, when I was on-site for a client training session the borders on our email were not lining up properly, pushing inside the nice banner region we had set up. It wasn't a major problem as the email didn't look terrible but I assumed we must have failed to test the system properly. The client's computer was a fancy new Windows 7 laptop, running Outlook 2007. I clearly remembered doing tons of testing in Outlook 2007 so I chalked it up to good old human error: we must have posted an old version of the template by accident, right? Wrong. I was very confused to discover that, on our Windows XP-based computers running Outlook 2007, the email looked perfectly fine!
Why would Outlook 2007 render the same HTML differently on different machines?
We started with the theory that Windows 7 & XP render Outlook 2007 emails differently. Is this true? Well it turns out the answer is "yes" and "no": no, in that the rendering is done exactly the same in Windows 7 & XP (well, the fonts are nicer in 7, but the email's HTML rendering is the same); but yes, there is a difference -- Windows 7 detects the size of your screen and automatically applies different DPI settings to your machine.
DPI settings - what's the big deal?
The reason the email templates were breaking was because the DPI setting on the client's computer differed from our testing environment. Ours was set at XP's default setting of 96dpi and the other was set to 120dpi because Windows 7 detected a 27" high-density monitor and set it that way. This sounds harmless enough, but it's actually the core of the problem.
96dpi (100% in Windows 7)
Here is a screenshot of the email on a Windows 7 computer with the dpi settings at 96. Everything is as its supposed to be: the side borders line up with the header and footer.

 
120dpi (125% in Windows 7)
Here is the same email with the computer's dpi settings at 120: each of the images used in the email has been scaled, changing the column widths and breaking the layout. The HTML is exactly the same, but the images are all scaled larger!

 
Hang on…Did Outlook 2007 actually up-scale the images in the email?
Sadly, this is true. Someone on the 2007 team must have been drinking from the crazy juice and decided to upscale images, dependent on the DPI settings of your display! It turn out this lunacy has always been in place for Outlook 2007, but Windows 7 was the first OS that automatically set the DPI based on your monitor size, so the problem only shows up with the 3 people who ever bother to change their default setting from 96dpi.
It's only going to get worse as Outlook 2010 and Windows 7 grow in popularity.
This problem has been around since the release of Outlook 2007 and we haven't noticed it before because generally, computer users don't change their dpi settings or even know it's an option. The client we were training for didn't change the default settings on his PC: it was set at 120dpi because Windows 7 automatically adjusts this setting for you depending on the attached display(s). So this problem is only going to become more widespread as more people switch to Windows 7 and screen resolutions continue to increase.
What can you do about it?
Well, you can spend lots of time on tech sites complaining about Microsoft breaking the Internet. But while that might make you feel good, it won't actually help. In the end, tight graphic layouts aren't really practical anymore and you need to design emails that can handle being randomly up-scaled by Outlook.
In Part 2 of this article, we'll talk about our techniques for dealing with this issue.