Outlook multi-column mystery spacing issue
|Time: Less than 5 minutes|
|Suggested Skills: HTML, CSS|
|Objective: Are you having issues where Outlook is rendering your 2-col or 3-col content regions with mysterious extra spaces or gaps in your content? Does it look like below? This article covers a known Outlook issue that occurs in HTML emails longer than 1800px.|
This is a fairly well-known Outlook issue that occurs in HTML emails longer than 1800px in length. Since Outlook uses MS Word to render HTML emails, the email is treated as a Word document rather than a web page as most email clients do. As such, Word attempts to inject page breaks into the document at intervals that are on par with what a document would have which results in undesirable extra spacing injected into the HTML. This issue appears to only affect mobile-optimized templates because of the nature of how the HTML is structured.
HOW DO I FIX IT?
Most multi-column responsive layouts employ a technique of aligning tables beside each other within a single table cell. When the email is viewed on a mobile device, the tables are usually set to stretch out to the full width of the viewing area on the mobile device, resulting in the columns 'stacking' on top of each other rather than floating next to each other. In a perfect world, we would have the content for each column in the region stored within its own table cell--that makes Outlook happy and still renders properly on iPhone, but suddenly Android stops playing.
So, how do we get the columns into their own table cells for Outlook and still play nice with Android and iPhone? Enter conditional comments. A conditional comment is only read by Outlook and allows you to make Outlook-specific code changes while all the rest of the email client world renders your email as you originally intended. The goal in this case is to get each column into its own table cell by closing the
<td> tag and opening a new one between each column. Below is what it should look like:
<!--[if gte mso 9]></td><td valign="top"><![endif]-->
Place the above code between each
<table> in your multi-column content regions. For example, if you have a 2-column layout, you will place the above code between the left and right column tables--if you have a 3-column layout, you will place the code between the 1st and 2nd column and between the 2nd and 3rd column.
That should get your mobile-friendly email rendering properly in Outlook and still play nice with the majority of other mobile devices.