These days, we email everywhere - standing up, sitting down, sleeping...and on a ton of devices too. Beyond the third screen (mobile), we’re moving onto smart watches and possibly even VR devices!
On top of that, there are a lot of email clients out there. With all of these variables of where your email could land, it can be stressful to create a one-size-fits-all email design. That’s why responsive email design is so important. The tricky thing is though, that HTML for email is very different from the HTML you might have come to know (and perhaps love) from the web. Each client renders HTML in its own way and some don’t even support HTML, which can cause delivery issues. Gmail for example, removes the entire header section of your email’s HTML. Guess what happens if that’s where you added your CSS? Yes, it’s removed.
Bottom line is, responsive email is hard and it’s even harder to use HTML to guarantee beautiful, user-friendly email that displays exactly the way you want no matter where it lands.
Why we set out to tackle the challenge of coding responsive email
MJML was created in early 2015 by a team of Mailjet developers while they were working on Passport, Mailjet’s drag-and-drop interface for creating responsive emails. Having been knee deep in email for five years, the Mailjet team saw two things: a) email HTML is antiquated and not developer friendly b) a growing trend of email being viewed on mobile and tablet and the number of screens is only increasing. This means that finding a way to code responsive email easily and quickly is pretty important. The team started by creating a new markup language that would abstract the complexity of responsive HTML and automatically generate it. And that’s how MJML was born.
After learning so much from our users, we wanted to give back to the community by sharing this open-source framework to make responsive email easier and redefine the coding experience once and for all.
How MJML will help you
MJML rolls up all of what the Mailjet Developer team has learned about HTML email design over the past few years and abstracts the whole layer of complexity related to responsive email design.
Get your speed and productivity boosted with MJML’s semantic syntax. Say goodbye to endless HTML table nesting or email client specific CSS. Building a responsive email is super easy with tags such as <mj-section> and <mj-column>.
MJML is responsive by default. Your MJML will always be up-to-date and responsive. Email clients update their specs and requirements regularly, but we geek about that stuff - we’ll stay on top of it so you can spend less time reading up on latest email client updates and more time coding.
Write high-level code through extensible and reusable components. From low-level components such as <mj-image> to higher-level components like <mj-article>, there’s a component for that. By using MJML components, you will be able to focus on the content rather than on the tricky - and annoying - part of the style. Want to include an article in your email? All you have to do is to specify a link to an image, a title, a description and a link to the article as attributes in your <mj-article> tag.
In addition to quickly plugging in components natively included in MJML, you can also build your own. Say you need a component that’ll display pictures of cats and cat names in a neat, clean layout, just build <mj-kitty>! Our goal is for you, the community to own MJML. In time, MJML components will build and innovate off one another.
MJML is an engine transpiling <mj-*>-style markup language into responsive email HTML with nested tables and inline CSS.
Essentially, the MJML engine reads what the sections of the email are and what they should look like. The MJML engine then takes care of rendering the sections as expected and in an responsive way.
The MJML engine was built in React.js for its high composability and the way it handles components. This makes it easy to extend and reuse high-level components.
Since MJML is an open-source framework, you can hop over to Github to check out all of the code behind the engine. Go ahead and hop in as well - we can’t wait to see what you contribute to the engine and its components!
Don’t be shy, get in touch!
If you’re having trouble finding the answers you’re looking for, or simply want to discuss your MJML ideas with us - don’t hesitate to reach out at hi@mjml.io. We’d love to chat!
