Ask Logan: Coding for DPI Scaling in Outlook
For those who may not have the 411 on this (as I'm assured youths somewhere still say), Outlook 120 DPI is what happens when Outlook tries to evolve with growing technology – in this case, high pixel density screens.
It's a Windows accessibility setting, and with it enabled, Outlook converts any pixel values that aren't HTML attributes to points and then scales those up. This means your CSS-defined sizes are scaling up while your HTML sizes are staying put, so your lovingly-crafted email designs are scaling up unevenly and breaking.
It's like that awkward and mismatched 6th-grade class photo all over again, with some lucky kids hitting the puberty lottery and looming over the rest of us with their wispy mustaches and cracking voices.
Thankfully, our emails can all hit Outlook 120 DPI puberty together with a few straightforward steps.
First, enable VML in your markup via the <html> tag. VML is an XML extension that Microsoft created for . . . well, nobody uses it for that, so it doesn't really matter. It might as well stand for "very made-up language." We hack it to make use of some specific Microsoft Office settings that affect images.
The next bit you'll want to include in your code? Just a basic Microsoft conditional statement, wrapped around a bundle of Office-specific declarations we enabled in the <html> tag. The most relevant bit is in blue in the example below – the "PixelsPerInch" line that tells images in Outlook to display at a higher resolution. This assures that images will scale up along with any inline pixel sizes.
An important note: This works best if you're already working with images sized for retina, or high pixel density screens. You want to use images that are double the dimensions at which you'd like them to display, so for an image that would display at 640px wide, create that at 1280px, and then tell it to be 640 in the code. You'll avoid any unintentional fuzziness this way.
The final portion? When you're setting table or table cell sizes, just set those as inline styles, not HTML attributes. This is only necessary for specific pixel sizes, not percentages – those will scale anyway.
With those fixes in place, your design will now scale up proportionately in Outlook, and Grumpy Cat is just a little less grumpy than before.
Email geek, inspirational potty mouth, and design services lead for Emma.