I'm working on optimizing HTML emails for mobile devices. I have been tasked with finding a universal solution for creating a 2 column to 1 column responsive layout. I found an article written by Campaign Monitor – http://www.campaignmonitor.com/guides/mobile/responsive/. I've tried their markup and it works on most clients and browsers with the exception of Outlook 2007, 2010, and 2013. I've provided a jsfiddle link with my markup for reference. Is there a way to make this work in these version of Outlook?
EDIT: I'm not trying to make the responsive part of the email work in Outlook. I want the 2 tables ( Left & Right in the jsfiddle example) to display next to each other rather than stacked on top of one another. This works in Gmail (IE, FF, Chrome, Safari), AOL (IE, FF, Chrome, Safari), Yahoo (IE, FF, Chrome, Safari), Hotmail (IE, FF, Chrome, Safari), Apple Mail 4 & 5, Outlook 2003, Android 4.0, iOS 4, 5, & 6. My concern is only with Outlook 2007 and later when the rendering engine changed.
<html>
<head>
<style>
@media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
Best Answer
Have you tried adding
align="left"
andalign="right"
to the stacking tables?See updated fiddle: http://jsfiddle.net/bxdUp/1/
You currently have the right table with
align="left"
, but I have had success with Outlook table alignment manipulating thealign
value.