Does Outlook typically make your electronic mail appear like it was put by means of a rubbish compactor after which fed by means of a taffy machine? Fonts are enormous, tables look tiny and pictures are all out of whack? Worst of all, the e-mail appears tremendous in your machine’s Outlook! Why does it look completely different in your boss’s laptop computer?
The problem 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 more as new high-DPI laptops usually 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.
Easy methods to Entry DPI Settings in Home windows
You may 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 wish to navigate to Settings > Show and selected from the drop-down menu beneath “Scale and format.” 
You may test this pc 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 under, it’s actually all about how Outlook converts pixels and factors.
Seeing the Zoomed-In Model of Your Electronic mail
Electronic 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 provides you with a way of what your font, photos or design will appear like if a consumer has excessive DPI settings.
The zoom device is a part of Marketing campaign Precheck’s accessibility workflow, which helps you craft emails which can be extra accessible for customers with disabilities or imaginative and prescient impairments.
Right here’s an instance of the zoom device in motion:
Electronic mail on Acid’s Electronic 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 Electronic mail So A lot?
This show setting causes some elements of the e-mail to scale in dimension, whereas others stay the identical. That’s why your electronic mail appears 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 elements 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 models, just like the “pt” values it converts most of your pixel values too. For instance, if the consumer has set their scaling to 125%, a 10pt font would turn out to be 12.5pt.
How Can I Code Electronic mail to Accommodate for Customers with Desktop Scaling?
You may 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 wish 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 difficulty.
Right here’s an instance of a desk formatted this fashion:
<desk>
<tr>
<td top="500" model="width: 500px;top: 500px;">
</td>
</tr>
</desk>Use this Tag to Make VML Scale
This resolution is straightforward. 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" model="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 drawback electronic mail builders face when coding for Outlook. In case you’re searching for extra suggestions and methods for coding emails for Outlook, take a look at these assets:
You can even use Electronic mail on Acid’s Electronic mail Testing to see what your electronic mail will appear 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 put up was up to date on February 11, 2019. It was first printed in December 2014.
