Introducing MJML : First open source markup language for responsive email
Mailjet launched a new markup language for creating responsive email called MJML.
Designing an email is extremely complicated. The reason is simple. There are many different webmail clients with backward capability problems. When you make a website, you have to worry about a few versions of web browsers and most of them are standardizing by itself. But when you are designing email you have to worry about different web browsers, plus every webmail client and email software like(Thunderbird, Outlook). Then add up different smartphones and others devices, and it becomes a nightmare.
According to a recent survey by litmus, it shows that more than 50% people nowadays use mobile devices to open an email. So sending an email that will open and interact properly in all of the mobile devices are incredibly important.
Until now most email designers has to use HTML code from 1998 where tables are law and the CSS is only the shadow of itself. Speaking of CSS, you have to insert it inline for more compatibility with Gmail. Then you have to maintain HTML, image and text ratio to pass the spam filter.
To tackle those problems, developers from Zurb created a responsive email framework called Foundation for Emails a while ago. It simplifies our task to design a responsive email with many templates and tools that can get CSS inline without having to do it during development. But today I want to talk about MJML, which makes it even more easier to build responsive email.
Between a framework and outright a new language, the MJML is a much more radical solution. Its goal is to make the creation of responsive emails much more easier and advance by removing anything that complicates our tasks like tables, CSS properties required for our email looks like something, and so on.
MJML or Mailjet Markup Language is created by Europe largest email service provider Mailjet. Mailjet created this language while working on their drag and drop email newsletter builder passport. They used it in their system over a year then made it public last month. MJML has been designed to reduce the pain of coding a responsive email.
Obviously, it is necessary to compile the result before sending it, but if you already have your CSS inline with a tool that will not change much.
How to use MJML
There is two basic way to use MJML. You can either use their online editor which will render your MJML codes into responsive HTML code. Or can download plugins to use it directly on your computer code editor like Atom, Sublime Text, and Gulp.
They also have ready-made responsive email templates here.
Finally, it is really easy to install (if you already have Node.js on your computer). Simple to use and with a good learning curve you can easily build beautiful responsive emails. And it is also supported by most email clients:
- Outlook 2000, 2002, 2003, 2007
- Outlook 2010, 2011, 2013, 2016 (OSX)
- Office 365, Outlook.com
- Gmail, AOL Mail, Yahoo Mail
- Apple Mail 7, 8
- Android 4.4
- Gmail App (Android)
- iPhone 5s (iOS7, iOS8), 6, 6 Plus
- iPad, iPad Mini
Anyone who has had to integrate an email knows, we badly need a new tool for the task. The MJML works really well, so I see no reason not to use it for all your emails templates.
Of course, you may feel slightly limited sometimes to implement certain effects like (overlapping, …), but it it really new and growing so we have to make some adjustment at first. And you can also contribute to its development on Github.
So go wild…