We’ve all been there. It’s Friday afternoon and you just received a request for an email that needs to go out on Monday.
You create the email, send it to your inbox preview tool (our recommendation: Litmus) from your email marketing platform (our recommendation: Oracle Eloqua or Oracle Responsys) for testing. Everything looks good! Even in Outlook 2007, 2010, and 2013…until, you get to the screenshot for Outlook 2013 120 DPI. Ugh!
“Good” Email Outlook High DPI Email
Why is this happening?
Let’s understand what’s going on here.
DPI (Dots Per Inch) is an unit for screen resolution and it is usually set at 96 DPI. With higher DPI settings, the displayed content scales up. For example, in 120 DPI, the displayed content is at 125% of that of 96 DPI.
Outlook 2007, 2010, and 2013 use Microsoft Word as their rendering machine. When your email is being rendered by Microsoft Word, the pixel values specified in width and height HTML attributes are perceived as pixels. However, all other pixel values are converted to point (pt) values. Moreover, DPI scaling is only applied to pt values.
As a result, your container tables and images maintain their widths and heights as defined, but the rest of your email (e.g. padding, font sizes, etc.) is being scaled up by DPI scaling.
No wonder the content doesn’t fit anymore. Let’s fix it!
Step 1: Adjust width and height inline styles
To get everything on the same unit, add inline styles for width and heights for all tables, td, and images. This step is not necessary for relative values (i.e. percentage values).
<table align="center" border="0" cellpadding="0" cellspacing="0" width="480" style="width:480px;" class="mobile-table">
<img src="https://hd.unsplash.com/photo-1452882033718-1caccfcfe77f" width="180" height="120" style="display: block; border: 0px; width:180px; height:120px;"/>
Step 2: Enable VML and scale images
In order for Outlook to scale images properly, here’s what you need to do.
Amend the html tag with the following XML namespaces:
Then, add the following inside the head tag:
<head> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <!--Rest of content in <head>--> </head>
If you are interested in learning about how these XML namespaces for Microsoft Office works, check out James White’s blog.
Here’s the final product:
There you go. You can enjoy the weekend without having this email on your mind.
Relationship One’s development services team are experts in the email development arena. Deep in code every day, we live for email optimization challenges! Have an email rendering issue? Or looking for an awesome email? Contact us – we’re here to help!