MJML – Responsive Email Framework | Hacker News Reader

MJML – Responsive Email Framework

mjml.io

210 pointsHorizonXP50 comments

Related: "The Fab Four Technique to Create Responsive Emails Without Media Queries"[0] which has been trending on Reddit, but failed to gain traction here.

A really neat and broadly compatible[1] method.

0. https://medium.com/@hteumeuleu/the-fab-four-technique-to-cre...

1. https://www.emailonacid.com/app/acidtest/display/summary/qTZ...

Thanks for this link. That's ingenious and surprisingly simple. It seems I might have to give email templating a try this weekend.

Yep it's sad why Reddit sometimes see the good stuff

Where is it trending? The most popular submission I found has six comments.

It reached my webdev-oriented Reddit home page. Likely the submission you saw.

For browsers, multiple sites such as caniuse.com have statistics on browser usage, which can help determine compatibility requirements.

Does anyone know of similar statistics for email client rendering engines?

For that matter, I don't see anything in MJML about how to handle plain-text email clients. (No, "here's a link to the HTML on a website" is not OK; the text version should have all the same content as the HTML.)

Nothing I'm aware of here, no but would be great. In a way, that what we're aiming for with MJML by packing all we know about email HTML tips and hacks in a lightweight syntax.

About plain-text, I don't believe it's the MJML role. Most Email Service Provider provide ways to send HTML and Text part separately so shouldn't be an issue to deal with both.

> About plain-text, I don't believe it's the MJML role. Most Email Service Provider provide ways to send HTML and Text part separately so shouldn't be an issue to deal with both.

The email provider can certainly send mails containing both HTML and text, but that leaves it to the application to generate a sensible text part. And many applications fail at that.

Rather than leaving it entirely to the application to handle, you might consider incorporating or recommending an appropriate html-to-text rendering mechanism known to work well with MJML templates, to make it easy for people to generate a full multipart/alternative mail containing both text and HTML from the same template.

That's definitely something we can think about, but the first challenge of MJML is definitely to help developers create beautiful layouts easily

For which css features are implemented in each email client https://www.campaignmonitor.com/css/ . It is a really good resource when creating email html templates and you are dealing with odd css quirks.

Thanks for working on a tedious problem so we don't have to!

(I know it's annoying when people post competitors on your announcement threads, sorry, but I've also had success with http://foundation.zurb.com/emails/email-templates.html)

No worries, you're right to bring it here. Ink by Zurb has been the first solution I used years ago as a developer myself to solve that tedious problem as you name it. While developing MJML it has been a great inspiration for us and can't wait what the coming V2 will bring!

I wouldn't say they're competitors; the real interesting thing here is the components, which should greatly reduce the mess of html you have to deal with. I've used foundation for emails before and the markup involved is quite a pain.

Seems like they are solving that problem in version 2: http://zurb.com/article/1424/call-me-e-schmail-conquering-th...

Believe me Zurb foundation framework is very difficult to work with.

Interesting. Seems like it'll be based on handlebars, and the react component approach appeals to me more, though.

> Thanks for working on a tedious problem so we don't have to!

Interestingly, I think this statement is clearly sign of "vitamin" rather than being a "painkiller" product.

Great idea. If it's possible, support for a responsive data table would be helpful for invoices/receipts/etc.

We're working on such a standard component, we'll publish it next week

Can't you just Html with Bootstrap to achieve the same thing? Why learning a new syntax?

Wish it could be that way but actually the HTML for email is a more complex, obsolete and not homogeneous one. Each major email clients (and smaller ones too) come with their own rendering engine, making things super hard for developers to learn and keep up-to-date, which is the reason we decided to create and open source MJML, providing a lightweight and semantic syntax along with a component based approach making it highly extensible.

Because you can't reliably use <link>, <style>, float, flexbox, and whole slew of things that you take for granted in regular webdev[1].

[1](https://www.campaignmonitor.com/css/)

Imagine the web is different in these ways:

* instead of a handful of desktop browsers, there are over a dozen, each with their own quirks, most stuck with support for standards over 10 years old.

* similarly, mobile has the problems it has now (have you ever tried tracking down an Android rendering bug?). But a few more browsers to reckon with on top of the profusion of screen resolution/OS/browser combinations.

* Most ISPs run HTTP requests through proxies which each strips out their own set of tags, CSS, and JS they've decided are unsafe or unhelpful. This set is different by ISP, but you have to assume your page request could go through any of them.

Bootstrap probably wasn't built for that.

You're being down voted and I think that's unfair because it's always good to ask the fundamental question of "why".

I messed around with a few email tools last (as part of updating emails in our rails app).

I tried MJML, Zurb, and a few others. I ended up settling on Cerberus:

http://tedgoas.github.io/Cerberus/

I'd probably use MJML if I had to do this kind of stuff day-in, day-out. But, for just getting a few views in order, I much prefer just copy, pasting, then adjusting from a few blocks.

Thanks for sharing Cerberus, looks like a great tool! I understand the need of a simpler tool to quickly sketch out email HTML ready blocks/layouts. However, there is key reasons about why we decided not to stick to strict HTML with MJML. First, the abstraction layer we provide helps to reduce the maintenance effort by removing the pain to stay up-to-date with the last email clients updates. Second, it is simpler to write (thanks to the lighter/more semantic syntax). Last, but not least, our component based approach powered by ReactJS makes the language highly extensible and helps to reuse the same layout across different email communications.

Hope it makes more sense to you now and you'll have the opportunity to use it for your developments!

This may be what it takes for me to stop hating developing email templates. Will definitely check this out!

Happy that you love (ok, might not be the right word :p) developing email templates again! Keep us updated once you tried!

Hey guys, quick update here as we had specific requests about more specific templates. We just added 6 today and will add more in the next weeks! https://mjml.io/templates

Are nested columns allowed? I searched the docs and gave it a shot in the live editor, but didn't have success. I've almost never had to build a responsive HTML email that didn't require nested columns.

You can nest columns in sections (which correspond to rows in the design). Do you have an example of the layout you're trying to build? We would love to help you here!

Perfect! This is one of the best documentation I have seen recently!

Thanks for sharing! Glad you love it.

From someone that creates email campaigns daily, this will be super useful.

I'm curious, what kind of framework/library/stack are you using for the live code updater?

Glad you find it useful! We're using Code mirror for the code editor https://codemirror.net/

The documentation is terrific. Is this a standard template that someone can use? I can't find it in the source.

Thanks! It's powered by Slate from TripIt https://github.com/tripit/slate. It Markdown to static HTML, multi tab. It's now our go-to solution for documentation. We'll open source the MJML one in the coming weeks. You can also check the Mailjet API doc at https://dev.mailjet.com/guides, also powered by Slate.

Great job. This will make me want to look at responsive email development again. I've always stayed clear.

Awesome to hear! Share feedback once you had the opportunity to play with it!

Can't wait to see more template. I am still a bad designer... And need help to make stuff look good

Get you covered, they're coming very soon! Stay tuned, https://twitter.com/mjmlio

>Our markup is at least 50% more efficient in creating responsive email.

At least 50% more efficient than what?

Compared to using raw HTML to design the same responsive email.

I wonder if this can be linked in to Lamson

I'm curious about it, never heard about Lamson. What is it exactly?

It's Python mail server, that tries to be like Django for Mail. https://github.com/zedshaw/lamson/blob/master/README.md

Something I have been looking

Glad to hear it helps! Have you tried it yet?

looks good! well done

Thanks for the love orlisaurus \o/

Reply on news.ycombinator.com