Menu
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>
http://jsfiddle.net/bxdUp/
574
Have you tried adding align="left" and align="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 the align value.
100
For anyone that comes across this SO and is looking for a solution to the above problem where the responsive 2-column content is ALSO centered I found that using conditionals to define columns only for Outlook made my world 1^300 easier. Of course it is no longer responsive in Outlook, but really... F Outlook.
<!-- define a 100% width table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="100%" style="text-align:center; background-color:white">
<!-- define a fixed width table using a class for responsive. I found that defining an arbitary height seemed to be important ~ silly Outlook -->
<!-- align center -->
<table cellpadding="0" cellspacing="0" class="fixedWidthTable" border="0" height="300" align="center">
<tbody>
<tr>
<td>
<!-- align left (this renders as float:left in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
<!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
<!--[if mso]></td><td><![endif]-->
<!-- Brilliant. -->
<!-- align right (this renders as float:right in webkit). Absolutely defined width. -->
<table cellpadding="0" cellspacing="0" border="0" width="300" align="right" style="margin:0;padding:0;width:300px">
<tr>
<td>
<!-- content -->
</td>
</tr>
</table>
</td>
</tr>
</table>
... close outer tables etc.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
