As email marketers, we all have always highly desired to befriend Outlook, but thanks to the limited support, most HTML emails look real disaster in Outlook versions.
Take larger font sizes, tiny tables and images running around all over the place, whoa! Coding emails for outlook looks like a daunting task to most HTML developers.
With outlook, the email might look perfect on your machines, whereas look completely haywire in your colleague’s device with different resolution. DPI scaling is the real culprit that creates visual difficulties.
Higher resolutions are pesky!
With Outlook, there stands a chance that your email may look well-rendered on your Machine but wreak havoc in your clients’ device. In such cases their DPI scaling maybe the little imp that reduces your tear-jerking email down to flame and tears.
You may have heard about devices accompanied with terms such as 2K and 4K, Retina or UHD displays. These are not marketing gimmicks but terms assigned to number of dots (or pixel), a specific display can accommodate. The higher the DPI = more pixels can be accommodated.
Unlike other email clients, Outlook has an issue with DPI scaling, wherein any resolution in range of 1920×1080 and above will break the layout of your email.
Workaround:
Testing of emails in Higher DPI is no tough nut to crack. All you need to do is change your DPI scaling in your Windows based device.
Select Display from Control Panel
Once done, you can select 125% or 150% magnification.
Just to give you a quick overview about the issues, with Outlook DPI scaling problems, normally your images might misbehave; fonts might become larger and thicker along with gaps in between your layouts.
Implementing coding practices for DPI Scaling
Uplers with their zeal bring to you solutions for DPI scaling in Outlook 2007-2013.
– Use this tag to make VML scale.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
Include the code into the head section of your email to make VML scale well.
<head> <!--[if gtemso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> </head>
In case if you have any issues in regards to the font or images
First check Outlook 2007, 10, 13 and find a table that’s messing up with increased font size, table width, image size etc.
To solve the problem, add width property in style along with class “em_wrapper” in particular table which shows those problem. Use fixed width styles as show below.
Here is one example
<table width="290" border="0" cellspacing="0" cellpadding="0"
align="left" class="em_wrapper" style="width:290px;">
<tr>
<td>xxxxxxxxxxxxxxxxxx
</td>
</tr>
</table>
DPI scaling is one of the major problems that developers face. There are many other render ability issues with Outlook and will provide a few Outlook hacks in our upcoming posts.
We would like to thank EmailonAcid for initiating the concern and we have built upon their workarounds for enhancing the knowledge of our readers.