Using Ghost Columns to Fix 3 Coulmn Problems in Outlook
Outlook is a notorious problem-child for email developers. One of the most commonly seen problems is that Outlook just can't handle exact widths very well. Responsive templates that are designed with two or three side-by-side columns (which stack on mobile devices) often end up stacking on Outlook as well. But with no responsive behavior, the columns don't become full width or stack directly on top of each other. Instead, they still align left and right, as they are coded to.
This problem affects Outlook 2007, Outlook 2010, Outlook 2013 and Outlook 2016 for Windows. Fortunately, there is an easy way to solve this.
We can use the "hybrid" part of fluid hybrid design to constrain these columns so they appear as intended. Hybrid tables are also sometimes called ghost tables, because they are invisible to clients other than Outlook for desktop. By creating a ghost table with two or three columns, or TDs, we can force Outlook to display the columns side-by-side no matter what. Because other clients can't "see" this code, it won't interfere with responsive behavior.
Coding ghost columns for Outlook
I have added some classes and conditional code to these elements so that you can see the main container, as well as the left and right column tables.
Source : https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-problems-in-outlook
This problem affects Outlook 2007, Outlook 2010, Outlook 2013 and Outlook 2016 for Windows. Fortunately, there is an easy way to solve this.
We can use the "hybrid" part of fluid hybrid design to constrain these columns so they appear as intended. Hybrid tables are also sometimes called ghost tables, because they are invisible to clients other than Outlook for desktop. By creating a ghost table with two or three columns, or TDs, we can force Outlook to display the columns side-by-side no matter what. Because other clients can't "see" this code, it won't interfere with responsive behavior.
Coding ghost columns for Outlook
I have added some classes and conditional code to these elements so that you can see the main container, as well as the left and right column tables.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ghost Column Example</title>
<style>
@media only screen and (max-width: 479px) {
.right_column, .left_column {
width:100% !important;
text-align: center;
margin:0 auto !important;
}
.deviceWidth {
width:300px !important;
padding:0;
}
}
</style>
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto;" class="deviceWidth">
<tr>
<td class="main_container">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td width="250">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="250" align="left" class="left_column">
<tr>
<td style="padding:0px;border: 1px solid black;">
Left Column Content
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="160">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="160" align="left" class="left_column">
<tr>
<td style="padding:0px;border: 1px solid black;">
Middle left Column Content
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="190">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="190" align="right" class="right_column">
<tr>
<td style="padding:0px;border: 1px solid black;">
Right Column Content
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
That's it! You should now have three tables that line up perfectly in Outlook.Source : https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-problems-in-outlook
Comments
Post a Comment