
ExactTarget and Responsive Templates
Hi folks,
we are using Exacttarget as ESP and I'm trying to create a Responsive template. Unluckily, I found Exacttarget generates two extras HTML tables around each table, causing a breathless (not in positive sense) view in Outlook - here you can see the results of the test: https://www.emailonacid.com/app/acidtest/display/summary/I9Fo3iIUCTirzBPwOc6YWbBDlR4gGv5ipzWkF2PlUQuOd/shared).
..and here the code: https://litmus.com/pub/7badb29
In my opinion, a solution can be to built the responsive template having in mind the automatic creation of this additional table, but I cannot deal how. Anyone having the same issue? Have you ever deal with this problem?
Hope to hear from you soon!
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
Hi Courtney, yes the email looks fine on mobile device. The problem is the two extras tables added by Exacttarget. In Outlook this causes a big issue: when you have two tables that should stay side by side, but they refuse to line up horizontally.
I thought to apply the conditional comments, but I red recently they''re not reliable as few months ago. Anyone heard about this?
Not sure where you heard that. Might have to do with Outlook.com, but the regular desktop Outlook applications work with MSO conditional comments, nothing has changed there. They're highly often used for Outlook.
Have you tested the email outside of ExactTarget to confirm it is the extra tables causing the issue?
Yes, I tested through Email on Acid, Litmus and also in real clients, and the results more or less, are the same. I applied your suggestions on the output HTML, now I am testing on the template, I would like to see how it works. I'll keep you posted.
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.
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.
Thank you Annett! Write me an email, this is my email address: giudemo1986[at]gmail.com.
Thanks!
All you need to do is this:
<tr>
<td class="three-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="200" valign="top">
<![endif]-->
[left table to go here]
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
[center table to go here]
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top">
<![endif]-->
[right table to go here]
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
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/