Geek Answers Handbook

Responsive 2 Column to 1 Column Email in Outlook 2007, 2010 and 2013

I am working on optimizing HTML emails for mobile devices. I was instructed to find a universal solution for creating a response layout with a column from 2 to 1 columns. I found an article written by Campaign Monitor - http://www.campaignmonitor.com/guides/mobile/responsive/ . I tried their markup, and it works on most clients and browsers, except for Outlook 2007, 2010 and 2013. I provided the jsfiddle link with my markup for reference. Is there any way to make this work in this version of Outlook?

EDIT: I am not trying to do the responsive part of email work in Outlook. I want 2 tables (left and right in jsfiddle example) to be displayed next to each other, and not above each other. 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 and 5, Outlook 2003, Android 4.0, iOS 4, 5, and 6. I only care about Outlook 2007 and later when the rendering engine has 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/

+7
source share
4 answers

Have you tried adding align="left" and align="right" tables to your stacking tables?

See updated script: http://jsfiddle.net/bxdUp/1/

You currently have a right table with align="left" , but I have had success with the alignment of an Outlook table that controls the align value.

+3
source

For those who are confronted with this SO and looking for a solution to the above problem, where responsive content from two columns is ALSO concentrated, I found that using conditional expressions to define columns for Outlook only made my world easier 1 ^ 300. Of course, it no longer responds to Outlook, but actually ... 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.
+2
source

I do not think that he will work on versions of Outlook. Because first of all, Outlook does not understand media queries. The version of Outlook 2007 is based on the IE rendering engine, while Outlook 2010 and version 2013 use Word as a rendering mechanism to display html emails. Therefore, I believe that there is no way to get them to work in Outlook.

Another point is that when this code is executed in Outlook, it will ignore everything that is inside the style tags. You must specify the style as built-in for Outlook emails.

0
source

I found that reducing the width of the table by a few pixels works in the case for Outlook, and I can only assume that the pixel width in Outlook is different from other email clients.

Not perfect, but he worked for me.

0
source

More articles:


All Articles