
MJML – Responsive Email Framework - HorizonXP
https://mjml.io/?ref=hackernews
======
pygy_
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...](https://medium.com/@hteumeuleu/the-fab-four-technique-to-create-
responsive-emails-without-media-queries-baf11fdfa848#.odey2yjmy)

1\.
[https://www.emailonacid.com/app/acidtest/display/summary/qTZ...](https://www.emailonacid.com/app/acidtest/display/summary/qTZqWDjsZgysgtYYv6BzbQaRr7jSx9UmhbBqS9Piweusw/shared)

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

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

------
JoshTriplett
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.)

~~~
arnaudbreton
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.

~~~
JoshTriplett
> 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.

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

------
Mizza
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](http://foundation.zurb.com/emails/email-templates.html))

~~~
33degrees
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.

~~~
durub
Seems like they are solving that problem in version 2:
[http://zurb.com/article/1424/call-me-e-schmail-conquering-
th...](http://zurb.com/article/1424/call-me-e-schmail-conquering-the-beast-th)

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

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

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

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

~~~
arnaudbreton
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.

------
callmeed
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/](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.

~~~
arnaudbreton
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!

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

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

------
ngarnier
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](https://mjml.io/templates)

------
ryannevius
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.

~~~
arnaudbreton
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!

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

~~~
arnaudbreton
Thanks for sharing! Glad you love it.

------
killaman2
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?

~~~
arnaudbreton
Glad you find it useful! We're using Code mirror for the code editor
[https://codemirror.net/](https://codemirror.net/)

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

~~~
arnaudbreton
Thanks! It's powered by Slate from TripIt
[https://github.com/tripit/slate](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](https://dev.mailjet.com/guides), also powered
by Slate.

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

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

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

~~~
arnaudbreton
Get you covered, they're coming very soon! Stay tuned,
[https://twitter.com/mjmlio](https://twitter.com/mjmlio)

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

At least 50% more efficient than what?

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

------
nihils
I wonder if this can be linked in to Lamson

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

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

------
pkmishra
Something I have been looking

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

------
orliesaurus
looks good! well done

~~~
ngarnier
Thanks for the love orlisaurus \o/

