7 ms·
MJML – Responsive Email Framework
- ngarnier 11y agoHey 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
- deleted 11y ago[deleted]
- daok 11y agoCan't you just Html with Bootstrap to achieve the same thing? Why learning a new syntax?
- arnaudbreton 11y agoWish 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.
- lhorie 11y agoBecause 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/ https://www.campaignmonitor.com/css/)
- wwweston 11y agoImagine 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.
- inopinatus 11y agoYou're being down voted and I think that's unfair because it's always good to ask the fundamental question of "why".
- manidoraisamy 11y agoPerfect! This is one of the best documentation I have seen recently!
- arnaudbreton 11y agoThanks for sharing! Glad you love it.
- Mizza 11y agoThanks 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)
- arnaudbreton 11y agoNo 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!
- 33degrees 11y agoI 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 11y agoSeems like they are solving that problem in version 2: http://zurb.com/article/1424/call-me-e-schmail-conquering-the-beast-th http://zurb.com/article/1424/call-me-e-schmail-conquering-th...
- jorgecurio 11y ago> 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.
- picsoung 11y agoCan't wait to see more template. I am still a bad designer... And need help to make stuff look good
- arnaudbreton 11y agoGet you covered, they're coming very soon! Stay tuned, https://twitter.com/mjmlio https://twitter.com/mjmlio
- killaman2 11y agoFrom 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 11y agoGlad you find it useful! We're using Code mirror for the code editor https://codemirror.net/ https://codemirror.net/
- tyingq 11y agoGreat idea. If it's possible, support for a responsive data table would be helpful for invoices/receipts/etc.
- arnaudbreton 11y agoWe're working on such a standard component, we'll publish it next week
- orliesaurus 11y agolooks good! well done
- ngarnier 11y agoThanks for the love orlisaurus \o/
- nihils 11y agoI wonder if this can be linked in to Lamson
- arnaudbreton 11y agoI'm curious about it, never heard about Lamson. What is it exactly?
- nihils 11y agoIt'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
- rplittle 11y agoThis may be what it takes for me to stop hating developing email templates. Will definitely check this out!
- ngarnier 11y agoHappy that you love (ok, might not be the right word :p) developing email templates again! Keep us updated once you tried!
- pkmishra 11y agoSomething I have been looking
- ngarnier 11y agoGlad to hear it helps! Have you tried it yet?
- JoshTriplett 11y agoFor 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 11y agoNothing 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 11y ago> 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 11y agoThat's definitely something we can think about, but the first challenge of MJML is definitely to help developers create beautiful layouts easily
- daheza 11y agoFor which css features are implemented in each email client https://www.campaignmonitor.com/css/ https://www.campaignmonitor.com/css/ . It is a really good resource when creating email html templates and you are dealing with odd css quirks.
- pygy_ 11y agoRelated: "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-create-responsive-emails-without-media-queries-baf11fdfa848#.odey2yjmy https://medium.com/@hteumeuleu/the-fab-four-technique-to-cre... 1. https://www.emailonacid.com/app/acidtest/display/summary/qTZqWDjsZgysgtYYv6BzbQaRr7jSx9UmhbBqS9Piweusw/shared https://www.emailonacid.com/app/acidtest/display/summary/qTZ...
- prophesi 11y agoThanks for this link. That's ingenious and surprisingly simple. It seems I might have to give email templating a try this weekend.
- maxpert 11y agoYep it's sad why Reddit sometimes see the good stuff
- wishinghand 11y agoWhere is it trending? The most popular submission I found has six comments.
- pygy_ 11y agoIt reached my webdev-oriented Reddit home page. Likely the submission you saw.
- gketuma 11y agoGreat job. This will make me want to look at responsive email development again. I've always stayed clear.
- ngarnier 11y agoAwesome to hear! Share feedback once you had the opportunity to play with it!
- callmeed 11y agoI 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 11y agoThanks 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!
- spiderfarmer 11y agoThe documentation is terrific. Is this a standard template that someone can use? I can't find it in the source.
- arnaudbreton 11y agoThanks! 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.
- ryannevius 11y agoAre 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 11y agoYou 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!
- l1n 11y ago>Our markup is at least 50% more efficient in creating responsive email. At least 50% more efficient than what?
- ngarnier 11y agoCompared to using raw HTML to design the same responsive email.