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

[Grégoire_Miche2]

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]

Pierce Ujjainwalla​​, Fab Capodicasa​,

What do the template development specialists think of this limitation? Do you use Tables elements or divs as the primary structure block in your emails?

-Greg

[Grégoire_Miche2]

To be more precise, the current version only supports <table>, <tbody>, <thead>, <tfoot> or <td> for containers.

and for modules inside containers:

• <tr> if the container is <table>, <tbody>, <thead>, or <tfoot>
• <table> if the container is <td>

What we would need to have is

• <div> modules in <div> or <td> containers
• <table> modules in <div> containers

-Greg

[Grégoire_Miche2]

@Karli Kratzenberg ,

If you are downvoting the idea, it would be interesting to know why.

-Greg

[Pierce_Ujjainw3]

Good question - checking with our email developers and will reply back with answers.

[Fab_Capodicasa3]

We use DIVs as our top-level section wrapper. As our Email Template Builder/Editor works independently of Marketo, we don't really have an opinion either way

[Lucho_Soto]

I might be misunderstanding, but it seems weird that "mkteditable" divs can't be modules.

Our hybrid fluid templates look something like this:

<table><tr><td>

<mkteditable div></div>

<mkteditable div></div>

<mkteditable div></div>

<mkteditable div></div>

</td></tr></table>

For modules to work on our template, it looks like we would have to go through our entire template and make sure each mkteditable div is inside of a separate table.

[Grégoire_Miche2]

Hi Lucho,

This is not the only way to set it up. Ours use a table on first level only on Outlook, otherwise it uses divs on other email clients:

<!--[if mso]><table><tr><td><![endif]-->

<div>

     <div class "mktEditable"></div>

</div>

<!--[if mso]></td></tr><tr><td><![endif]-->

<div>

     <div class "mktEditable"></div>

</div>

<!--[if mso]></td></tr></table><![endif]-->

This has shown to be easier to make it fully responsive on all Android email clients

-Greg

[Ulf_Deeg]

From my experience a Table Wrapper doesn't hurt Android clients, but I am always eager to learn. Would you mind elaborating? Always eager to learn about email coding from peers.

[Lucho_Soto]

Hi Greg,

That's interesting, we use conditional outlook tables as well but they are inside of each mkteditable div.

The new email editor isn't available on our instance yet but I'm interested in seeing how our template fares with it.

[Grégoire_Miche2]

Hi Lucho,

I see a big risk about having the conditional outlook inside the div: you rely on the user to not deleting them... I personally would never trust an end user on this

Also, when you get the new editor, you probably want to follow the upgrade path I provided here: Testing the email editor 2.0: Great features, a few glitches and the strong need for a v2.1

-Greg