As a support associate here at Bronto, I not only help to support our clients, but I do my part to support my fellow Brontos as well. One of the things that I am responsible for is testing all of Bronto’s marketing emails in the major email clients, just to be absolutely certain that our messages are being seen as they are meant to be.
All in all, this is a fairly simple task – send a test message to a number of people in our office who use the different email clients, and make sure it looks like it is intended to look. However, a couple of computers always gave me problems, both of them used Outlook 2007, and both of them mangled our normally nice looking emails. To add to the mystery, the two bad seeds would break the messages in totally different ways.
All of the other instances of Outlook 2007 in our office rendered the message just fine, so we would normally chalk it up to a setting on the computer that was making the messages render incorrectly. Some people may be able to walk away from a situation like this; I am not one of those people. This would not stand… not on my watch.
I decided to do some research and testing to see what exactly was causing this error. I settled down with the two machines to see what I could find. I looked through all of the settings that I thought could be causing the issue in Outlook 2007, but even with all of the settings the same, the messages still did not render correctly. This is when I noticed the two computers side by side just didn’t look the same, everything was much bigger on one and much smaller on the other, and this led me to check the graphics settings, which in turn led me straight to the culprit… the DPI setting.
According to Wikipedia, DPI (Dots Per Inch) is a measure of printing or display resolution, in particular the number of individual dots or pixels that can be produced within a linear one-inch (2.54 cm) space. The default DPI on a Microsoft Windows machine is 96. One of the offending computers was set to 120dpi (large) and the other was set to 82dpi (a custom setting).
This drove me to run some tests on a larger scale to make sure I was on the right track – here’s what I did: I took 6 computers; each with Outlook 2007 and Mozilla Thunderbird installed and sent them a copy of the Bronto News. First, I set each of the computers DPI to the default setting of 96, then I checked the same message with the DPI setting changed to 120, and finally, I changed the DPI to 82 and looked at the message again.
The results are extremely insightful: Outlook 2007 choked on anything except for the default DPI, while Thunderbird displayed the message perfectly no matter what the DPI was set to. To see how the messages displayed for your-self, check out the screenshots below, just click on any thumbnail to see the image in a larger size.
| Outlook 2007 | Thunderbird 2.0 | ||||||||
| 96dpi (default) |  |
 |
|||||||
| 120dpi |  |
 |
|||||||
| 82dpi |  |
 |
|||||||
Could your contacts DPI settings be causing your messages to display improperly? The answer is a resounding yes, which is definitely something to think about when conducting your testing.
I’ll be continuing my research to see if there is something that we as email marketers can do to work around this issue. Look for my next post in May, and if you’ve come across this in your campaigns, please feel free to leave a comment.
Lucas Weber
Support Associate at Bronto
Related posts:
- The Outlook Is Not So Good Many of us can recall the great Outlook fiasco of...
- AT&T/Yahoo! Having Issues Receiving Mail Bronto has learned from Pivotal Veracity that AT&T has been...
{ 12 comments… read them below or add one }
Absolute brilliance! I never would have thought to look at the DPI settings. Thanks for the post.
Something very similar to this happened with the way our website was being displayed on Mac’s – but it was the general screen resolution, versus the dpi. Very good reminder, though, that not everyone has the same settings!
I wonder if this has to do with how Outlook renders pixels. Most email layouts are still fixed instead of fluid, defined by pixels instead of percentages. If the DPI setting is causing Outlook to render pixels differently for image files than it does for HTML, that could possibly be the problem.
I was just thinking about this the other day. When I create emails in html, they look awesome on the page, but not-so-awesome when an email browser renders my emails. I have tested Outlook 2003 & 2007, gmail, hotmail and yahoo. The emails look the best in Outlook by far, but even so there are glitches.
Do you know if there is a definitive resource on how to build an html/css email that looks decent in most major email clients?
Genevieve,
While there is no 100% definitive resource (it’s the nature of our industry that best practices and design techniques will grow and evolve), I can definitely offer some advice here. One site that I have found to be very useful is the Email Standards Project (http://www.email-standards.org) – they provide a very up to date report of all of the HTML/CSS that the major email clients support.
In addition to using standards compliant code, the absolute best way to ensure your messages are appearing properly in all the email clients is to test, test, test.
We’re always willing to lend a hand with your testing if you need a hand or access to an email client that you don’t have. Just let us know.
Thanks for reading!
Lucas
Thanks for pointing this out! Another insightful post!
Good article! Although it didn’t help me directly, but I had a similar problem:
I had to use a background image in a newsletter for one of our customers. Using a JPG in the background-attribute of the body-tag worked. Well..almost worked. The problem was that the image was about 30% to big! 100px became 130px. Very strange. Also checked the DPI settings and they were set to default. After hours of frustation I came up with a solution: use GIF instead of JPG! Now is that wierd or what!
Your post saved my day. A customer of mine had this very problem. When I had a look at her computer I noticed that the appearance of her screen fonts was different. Somehow I already smelled a connection here. She was also using an on-screen ruler to check the dimensions of the pictures in that email. This ruler gave wrong values which became clear after check the actual properties of the images. So I would have probably tried to check and change the DPI settings at some point after several desperate attempts to fix that issue through other ways. But it’s definitely not the first place where you start to look for the cause of strange HTML email rendering. Thanks for the insights!
mate thanks for that! you saved me lots of hours of investigating this stuff, thanks again!
I recently had a problem where the image was just huge on outlook 2007 but fine elsewhere. This helped me to fix the problem. However, there was a slight difference from your situation – I had an image that was a 72 dpi jpeg while my display resolution was set at 96 dpi – this somehow caused outlook to render the image at almost twice the actual size. So I believe the actual problem is that if the image dpi does not match the display dpi – outlook 2007 renders it with an incorrect size. Replacing the image with a 96 dpi image fixed my problem. I believe your images were at 96 dpi which caused them to display incorrectly on displays set at a different dpi.
–
Thanks
This information could have saved me 2 full days worth of frustration. Glad I found it before we went to day 3. Thank you so much!
I had this problem, tracked it to DPI but also to something else (that seemed an easier fix).
Essentially, my image code had width and height in ‘px’. Turns out that removing the px marker fixed the rendering problem.
So width=”140px” became width=”140″
It’s an odd problem, because with font sizes you have to include px, otherwise outlook 2007 ignores makes up it’s own font size.