Coding for DPI Scaling in Outlook 2007-2013
Does Outlook sometimes make your email look like it was put through a garbage compacter and then fed through a taffy machine? Fonts are huge, tables look tiny and images are all out of whack? Worst of all, the email looks just fine on your machine’s Outlook! Why does it look different on your boss’s laptop?
The culprit here is DPI scaling, a windows setting to aid readers with visual difficulties. This problem is cropping up more and more as new high DPI laptops often have the setting enabled by default. DPI, or dots per inch, is a measure of how many dots (or pixels) can fit within a given space. This problem affects Outlook 2007-2013. Much thanks to Michael Muscat for finding the solution and posting about it on Campaign Monitor.
Accessing DPI Settings
You can access the DPI scaling on a windows machine by navigating to your display settings. Click on “Make text and other items larger or smaller.”
From here you can select 125% or 150% magnification.
You can use this setting on your computer to confirm that DPI settings are the cause of problems in Outlook.
Why does DPI scaling mangle my email so much?
This setting causes some parts of the email to scale in size, while others remain the same. That’s why your email looks distorted and warped.
- 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. This is where the problem comes in.
Desktop scaling affects relative units, like the “pt” values it converts most of your pixel values too. For example, if the user has set their scaling to 125%, a 10pt font would become 12.5pt.
How can I code to accommodate for users with desktop scaling?
You can make sure your email scales properly and looks great on any DPI setting by making a few simple modifications.
#1 – Use inline styles and px units on tables.
You’ll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don’t need any treatment, as they scale well already.
Here’s an example of a table formatted this way:
<table> <tr> <td height="500" style="width: 500px;height: 500px;"> </td> </tr> </table>
#2 – Use this tag to make VML scale.
This one is easy. Just add the following to your head section to make VML scale well.
<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>
#3 – Use MSO Magic for cellspacing and cellpadding.
Using these inline styles will allow you to create scalable cellspacing and cellpadding.
<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px"> ... </table>
That’s it! You now have an email that is scalable in Outlook.
Outlook getting you down?
DPI scaling is hardly the only problem email developers face when coding for Outlook. Get the complete guide to Outlook today! We’ll help you solve renderability issues before you pull all your hair out.
Want to make sure your email looks perfect everywhere? Start email testing today!