How to fix rendering issues in Outlook 2013 120DPI

Just a quick Friday tip for all email developers out there not having a good time with rendering today.

The deal with Outlook 2013 120DPI is that if you code like you would normally do, the tables will be upscaled. Also called DPI scalling, this issue is a real thing. However there is a quick fix.

The fix consists in 2 parts.

1. Make sure you add this to your html opening tag:

xmlns:v="urn:schemas-microsoft-com:vml"  xmlns:o="urn:schemas-microsoft-com:office:office"

2. Add pixels width for tables with a specific width. E.g. style="width:600px" on a table having width="600". No need to do anything for tables with size in percents.

Here is the full sample code:

<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>

   <body>

    <table style="width:600px;" width="600">

         <tr>

            <td>Your content here</td>

         </tr>

      </table>

   </body>

</html>

Happy email coding! Your email snob friend.