responsive options

[j-ro]

Are responsive options for mobile display of emails something you're considering?

For example, in most similar editors, if you have, say, three columns, on mobile they stack vertically in a responsive way by default, but the editor gives some control, beyond hide on mobile (which you have), you can also choose to not stack.

[orkhanahmadov]

Hey @j-ro, thanks for another great suggestion! 👍

Short answer: yes, responsive controls are on my radar, and "don't stack" is the one I want to tackle first.

At the moment every multi-column section stacks on mobile by default (which is standard email behavior), and the only per-block responsive control Templatical exposes is show/hide on mobile vs desktop. Letting columns stay side-by-side on mobile is a good fit since Templatical columns already render with percentage widths, which is exactly what MJML's <mj-group> needs to keep them inline. So this would most likely be "Stack on mobile" toggle (on by default; flip it off to keep columns side-by-side).

This is also another thing to keep in mind with Templatical. Compared to other alternatives like Unlayer and Beefree, Templatical does not have its own proprietary HTML renderer, Templatical's direct output is always MJML and never HTML. I'm saying this as a good thing, because I think no one should deal with email-HTML hell, MJML solved this headache for everyone and guarantees maximum email client compatibility. But this also means that whatever Templatical is outputting it should alwasy be compatible with MJML and what it allows.
That being said, some responsive design and "Stack on mobile" on/off is still within MJML's capability.

Few things that'd help me understand that real-world usages:

• To make sure I've got the behavior right: with the toggle off, the columns keep their current proportions and just get narrower to fit the screen, so a 3-column row becomes three skinny columns, not three stacked full-width blocks. Is that what you want, or did you have something specific in mind for how they'd size on mobile?
• What's actually inside the columns you'd keep side-by-side: a row of icons/logos, a vertical stats strip, product cards or something else? This would help me understand the real-world usage and test it accordingly when I start working on this responsive layout feature.

Thank you and keep the great ideas coming 👍

[j-ro]

interesting that they stack now! I'll admit (as you can probably guess) that I haven't fully integrated Templatical yet and run the full pipeline, I'm mostly just trying the playgrounds and such, but when I turn on mobile preview for columns on the homepage playground, there is no stacking. That is why I thought they didn't stack. So maybe that's the bug to fix, make mobile preview work like it would actually work if you interpreted the MJML and sent the email?

I actually think the use case for "don't stack" is probably fairly niche, guessing things like, say, a row of social buttons, where you might still have them side by side proportionally shrunk on mobile. But stack I think would be the default behavior and right 90% of the time, so I think if preview just showed it too, that might do it.

[orkhanahmadov]

@j-ro While replying to your initial idea I noticed that same "not stacking" behavior in editor canvas. I created a bug ticket for it #395

But it is only affecting the editor canvas preview. If you export the email as MJML and convert to HTML, actual HTML stacks correctly. It is only editor fidelity bug which I will fix in next release.

But regardless, I think "Stack on mobile" toggle ("on" by default) still makes sense to have for those ~10% use cases, which I will add to Section toolbar controls. Here's dedicated enhancement issue for it too #396.

Sorry for confusion caused by editor preview and thanks for poking at the playground and catching this 🙏

[orkhanahmadov]

Merged #397 and released 0.16.4 which contains editor preview fidelity fix + "Stack on mobile" toggle ("on" by default)