Coding for DPI Scaling in Outlook 2007-2013

Does Outlook typically make your electronic mail seem like it was put by means of a rubbish compactor after which fed by means of a taffy machine? Fonts are big, tables look tiny and pictures are all out of whack? Worst of all, the e-mail seems to be effective in your machine’s Outlook! Why does it look completely different in your boss’s laptop computer?

The difficulty right here is Outlook DPI scaling, a Home windows setting that helps readers with visible impairments. DPI, or dots per inch, is a measure of what number of dots (or pixels) can match inside a given house.

The Outlook zoom downside is cropping up an increasing number of as new high-DPI laptops typically have the Outlook DPI scaling set as default.  This downside impacts Outlook 2007-2013. Fortunately, Michael Muscat for discovered an answer and posted about it on Marketing campaign Monitor’s discussion board.

Entry DPI Settings in Home windows

You’ll be able to entry the Outlook DPI scaling on a Home windows machine by navigating to your show settings. Click on on “Make textual content and different gadgets bigger or smaller.”

From right here you’ll be able to choose 125% or 150% magnification.

If you wish to change decision for Home windows 10, you’ll need to navigate to Settings > Show and selected from the drop-down menu underneath “Scale and format.” 

You’ll be able to test this laptop setting to substantiate that DPI scaling is the reason for Outlook zoom issues. Basically, any quantity of scaling over 100% will distort the e-mail and the upper the proportion over 100%, the extra distorted the e-mail will look.

However, as we’ll be aware beneath, it’s actually all about how Outlook converts pixels and factors.

Seeing the Zoomed-In Model of Your E-mail

E-mail on Acid’s Marketing campaign Precheck encompasses a step the place you’ll be able to view your electronic mail zoomed in at 200%. This will provide you with a way of what your font, pictures or design will seem like if a person has excessive DPI settings.

The zoom software is a part of Marketing campaign Precheck’s accessibility workflow, which helps you craft emails which are extra accessible for customers with disabilities or imaginative and prescient impairments.

Right here’s an instance of the zoom software in motion:

E-mail on Acid’s E-mail Testing additionally options previews at 120 DPI for Outlook 2010, Outlook 2013 and Outlook 2016, so you’ll be able to simply discover rendering points with variations of Outlook that will distort your electronic mail.

Why Does DPI Scaling Mangle My E-mail So A lot?

This show setting causes some components of the e-mail to scale in dimension, whereas others stay the identical. That’s why your electronic mail seems to be distorted and warped.

• Widths and heights laid out in HTML attributes stay pixel values.
• Widths and heights laid out in VML code stay pixel values.
• Different pixel values (px) are transformed to level (pt) values as an alternative. That is why we see issues, like font show points.

In different phrases, Outlook converts pixels to factors inconsistently all through your electronic mail, so components of your code will render in a different way. Maybe extra annoying is the truth that completely different variations of Outlook will deal with the conversion in numerous methods (Outlook 2007 will do it barely completely different than Outlook 2010 or 2013).

Desktop scaling impacts relative items, just like the “pt” values it converts most of your pixel values too. For instance, if the person has set their scaling to 125%, a 10pt font would develop into 12.5pt.

How Can I Code E-mail to Accommodate for Customers with Desktop Scaling?

You’ll be able to assist management Outlook picture scaling and elevated font dimension in Outlook by ensuring your electronic mail scales correctly. By making a number of easy code modifications, you’ll be able to guarantee the e-mail will look nice on any DPI setting.

Use Inline Types and px Items on Tables

You’ll need to outline the peak utilizing the attribute (for Gmail) then outline the peak and width inline utilizing px. Tables which have a percentage-based width don’t want any therapy, as they may scale with out problem.

Right here’s an instance of a desk formatted this manner:

<desk>
  <tr>
    <td peak="500" type="width: 500px;peak: 500px;">
    </td>
  </tr>
</desk>

Use this Tag to Make VML Scale

This resolution is simple. You’ll want so as to add the next to your head part to make VML scale correctly.

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:workplace:workplace">

<head>
<!--[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

Use MSO Magic for cellspacing and cellpadding

Utilizing these inline types will help you create scalable cellspacing and cellpadding.

<desk cellspacing="10" cellpadding="10" type="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</desk>

That’s it! You now have an electronic mail that’s scalable in Outlook.

Outlook Getting You Down?

DPI scaling is hardly the one downside electronic mail builders face when coding for Outlook. In case you’re on the lookout for extra ideas and tips for coding emails for Outlook, take a look at these assets:

You can too use E-mail on Acid’s E-mail Testing to see what your electronic mail will seem like on 11 completely different variations of Outlook,  together with three variations at 120 DPI. Attempt our free, seven-day trial and also you’ll additionally get entry to our Marketing campaign Precheck instruments, together with the zoom characteristic.