Email Templates 2.0: enable containers and modules on <div> tags, not only on table elements

Grégoire_Miche2 · ‎06-08-2016

The new email template V2 enable to create modules, i.e. email blocks that can be added by the user as needed to change the layout of an email.

This is such a welcome functionality that we are looking forward to be able to roll it out.

The only limitation is that these new elements only work on table html tags (<table>, <tbody>, <thead>, or <tfoot> for the modules, <table>, <tbody>, <thead>, <tfoot> or <td> for containers).

Depending on the developments approach, in the emails, this may work... or not. Many fluid development approaches recommend to limit the usage of nested tables, excepted for Outlook, and to mainly use <div> tags.

So this idea is about enabling also modules and containers to be set on <div> tags.

-Greg

Grégoire_Miche2 · ‎06-20-2016

And also, I am not offering to test you templates, as it is quite some work and if I do it for you, I'll have to do it for everyone. I hope you'll understand.

-Greg

Lucho_Soto · ‎06-20-2016

No problem Greg, I wasn't asking you to do that . What I meant is I'm interested in testing our template on our Marketo instance when we have access to the 2.0 editor. Thanks for the link.

Grégoire_Miche2 · ‎06-20-2016

Hi Ulf,

an example: tables will not accept background images on some android versions/client. Also, on gmail app on android (gmail app being the new and only email client on android 5) you can hardly get the tables to move one beneath the other without having some issues... on outlook. The result is that most of templates are not really responsive on gmail on android. there are only scaled (which requires excellent eyes to be able to read the texts )

Look at this litmus test on one of the new Marketo templates: Litmus

All these can be worked around using divs, and only using tables in outlook conditional code.

-Greg

Anonymous · ‎06-20-2016

So, is it not possible to simply nest your structural code inside an acceptable container type to get it to work? It's hard to get my head around this without actually being able to play with it, but I would happily add another wrapper table around something in order to turn it into a module.

Or is it that, as soon as you create a module, the entire thing becomes editable or something?

I had presumed you could have, say, a TD container, with 100% wide tables stacked inside, each set to be mktoModule elements, making them repeatable and rearrangeable. Then, inside those elements, you designate specific editable areas using mktoText and mktoImg elements, etc.

Can it not work like that?

Grégoire_Miche2 · ‎06-20-2016

Hi Nicole,

what you suggest is the way Marketo builds its own templates. And they do not render perfectly on all devices, as you can see on the litmus link I posted above.

We can achieve a better result with <DIV> tags, which are BtW just plain HTML standard ones...

-Greg

Ulf_Deeg · ‎06-21-2016

Hi Grégoire,

so far I've been using background="" on the TDs for gmail and left and right aligned Tables with fixed width and an MSO Ghost Column - which works well enough for me.

Best

Ulf

Grégoire_Miche2 · ‎06-21-2016

We have been able to wrap the <div> in a table / tr / td structure and it is apparently working.

It is adding an additional level of code to the template, which in turn adds to the complexity (risk of formatting interactions with the other elements), the risk of errors and the maintenance. So there is workaround there, but not perfect.

-Greg

Anonymous · ‎06-21-2016

Hi Grégoire,

Thanks so much for your response! I can certainly see what you mean about the Marketo templates in that they do not render well across email clients, however I think that is less to do with how they have configured the editable sections, and more to do with poor email coding generally.

Thanks,
Nicole

Anonymous · ‎06-21-2016

Oh, that is great news. Thanks for letting me know. I admit I'm very happy to rejig my layout or even add some complexity if it means getting things to work!

Anonymous · ‎06-26-2016

If <div> tags are better and mean emails render better across all devices, why would Marketo not develop this in the first place? I mean, what would the benefits be of not using <div> tags for the editor?

Not having emails render well in Gmail and Outlook from the outset seems like an odd move, or have I missed something?