Conquering the Outlook HiDPI Scaling Beast

Conquering the Outlook HiDPI Scaling Beast

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.

Challenge accepted.

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

Photo-of-email-formatted-correctly               Photo-of-email-format-incorrect-due-to-Outlook-High-DPI

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).

Example Table:

<table align="center" border="0" cellpadding="0" cellspacing="0" 
       width="480" style="width:480px;" class="mobile-table">

Example Image:

<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:

<html 
      
      >

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:

Successful-Outlook-high-DPI-email

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!

By | 2018-06-29T14:09:42+00:00 September 26th, 2016|Design, Do, Marketing|0 Comments

About the Author:

At Relationship One, we empower organizations to modernize their marketing through strategy, technology and data. With a core staff of experienced marketing consultants, integration specialists, data analysts and development gurus, we have a well-respected track record for delivering solutions that meet our customers’ unique business needs.


Thank you for subscribing!
Subscribe to our Thought Leadership Today