Outlook DPI scaling issues: Stop blowing things out of Proportion

“What you sow is what you reap”. This proverb is not applicable to email marketers, who painstakingly design an email, get it coded and finally on sending it are pointed out that Outlook has wreaked havoc in their subscriber’s devices.

Microsoft, in midst of experimenting with different set of rendering engines for different versions of Outlook, made it very notorious of not rendering emails as intended to by email marketers.

Outlook 2007 onwards uses Microsoft Word as the rendering engine and it opened a can of worms in terms of buggy rendering such as:

· Background images not supported

· Animated GIF do not work

· Additional padding below images

· Poor support for margin

· Poor support for CSS width and height

You can refer our blog “Email Rendering Issues and Hacks for Outlook” for finding out solutions for the above listed issues faced in Outlook.

One of subtle yet complicated issues observed in Outlook is the one where for displays kept at greater than 96 DPI for accessibility or in devices with high DPI resolutions, tables are squeezed and fonts are enlarged automatically.

Image Source (MyEmma)

As you can observe in the above image, the CTA button shrunk to barely occupy the CTA copy and the tables have shrunk down and made the paragraph longer.

What happens behind the scenes?

DPI Scaling makes the following changes:

· Widths and heights specified in HTML attributes remain pixel values.

· Widths and heights specified in VML code remain pixel values.

· Other pixel values (px) are converted to point (pt) values instead.

So a text of 10pt @ 150% desktop scaling would be equivalent in size to same text in 15pt @ 100% desktop scaling.

We need to add the following two codes to the <head> to make VML scale the images.

<html xmlns=”http://www.w3.org/1999/xhtml"
xmlns:v=”urn:schemas-microsoft-com:vml”
xmlns:o=”urn:schemas-microsoft-com:office:office”>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif] →
</head>

Now in order to scale the tables we need to add nested tables. One with relative width and one nested inside with actual width of the email.

<table width="290" border="0" cellspacing="0" cellpadding="0"
align="left" class="em_wrapper" style="width:290px;">
<tr>
<td>xxxxxxxxxxxxxxxxxx
</td>
</tr>
</table>

Parting thoughts

We, EmailMonks, have come across many such rendering issues with different Email Clients and don’t rest till we find a solution. Click links below to see our workarounds for most of them.

1) Gmail Features v/s Non-Gmail ID Fallbacks

2) Interactive Elements- Email Client Support & Fallback Strategies

3) Background Image now supported in Windows 10 Mail & Live Mail

Show your support

Clapping shows how much you appreciated EmailMonks’s story.