Does Outlook typically make your e mail seem like it was put by a rubbish compactor after which fed by a taffy machine? Fonts are enormous, tables look tiny and pictures are all out of whack? Worst of all, the e-mail seems advantageous 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 drawback is cropping up increasingly as new high-DPI laptops typically have the Outlook DPI scaling set as default. This drawback impacts Outlook 2007-2013. Fortunately, Michael Muscat for discovered an answer and posted about it on Marketing campaign Monitor’s discussion board.
Learn how to 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 objects bigger or smaller.”
From right here you may 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 below “Scale and format.” 
You’ll be able to examine this pc setting to verify that DPI scaling is the reason for Outlook zoom issues. Primarily, 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 under, 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 incorporates a step the place you may view your e mail zoomed in at 200%. This offers you a way of what your font, pictures or design will seem like if a person has excessive DPI settings.
The zoom instrument 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 instrument 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 may simply discover rendering points with variations of Outlook which will distort your e 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 measurement, whereas others stay the identical. That’s why your e mail seems 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 a substitute. For this reason we see issues, like font show points.
In different phrases, Outlook converts pixels to factors inconsistently all through your e 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 several methods (Outlook 2007 will do it barely completely different than Outlook 2010 or 2013).
Desktop scaling impacts relative models, 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 turn 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 measurement in Outlook by ensuring your e mail scales correctly. By making a number of easy code modifications, you may 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 concern.
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 kinds will permit you to 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 e mail that’s scalable in Outlook.
Outlook Getting You Down?
DPI scaling is hardly the one drawback e mail builders face when coding for Outlook. If you happen to’re searching for extra suggestions and tips for coding emails for Outlook, try these assets:
It’s also possible to use E-mail on Acid’s E-mail Testing to see what your e 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 function.
This publish was up to date on February 11, 2019. It was first revealed in December 2014.
