ExactTarget and Responsive Templates

Hi Giulia,

It looks like the email is fine on mobile devices, correct? So it's not a responsive issue as in it's not working on mobile because of those tables, but it's an Outlook issue.

I'm assuming you're using aligned tables for the columns? The code is a bit hard to go through not in Builder. If that's the case, check out the solution on this thread for using MSO conditional code around the aligned tables: https://litmus.com/community/code/1583-3-column-layout-not-working-in-outlook-07-10#comment-5007

I am a little confused about your Email on Acid results responsively as when I use the code you provided, it doesn't work for me in either Chrome or Safari at mobile sizes (or Android in your tests). Although this is not an ideal indicator to whether it will work or not in email clients, my view is that the email should work as you intend in the browser as this generally means your code is working well - then adapt for each email client. Some of the issues look to be related to the table widths of 600 not being set to 100% on mobile. I would also look at the CSS as I see a few references such as *[id]#menu-wrapper. I think this is meant to be *[id="menu-wrapper"].

Regarding Exact Target, it would depend on how the email is built in there as to how the final code looks. It does add two tables around your code but only does this to entire content blocks of code, not every table. If using content blocks, I find wrapping each block in my own table helps keep things working smoothly.

For your actual issue in Outlook, I find these often come down to simple math issues. Each block in your template is 295px wide but your table is 49% of the container, which is 600px. 49% of 600 is 294 so your images are 1px too wide. Outlook tends to be fussy about this. Also, as mentioned by previous posters, Outlook adds space around tables and images. You could try adding the below to your CSS and see if this helps.

table, td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
    }
    img {
        border: 0;
        outline: none;
        display: block;
        -ms-interpolation-mode: bicubic;
    }
    a img {
        border:none;
        outline:0;
    }

Hope it helps.

Yes, Outlook adds spaces around tables and images. The fix are conditional statements. I am using this template: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919. If you want you can show me your code and I take a look.

This may be worth looking in to. I use ET as well and the INK boilerplate has been a lifesaver for responsive. It's basically bootstrap, but for email.

http://zurb.com/ink/