With MJML you might actually enjoy coding an HTML email!

If you’ve been coding HTML/CSS markup for a long time, you have occasionally had to (with no shortage of dread) whip up an HTML email. The HTML email landscape has been stuck in prehistoric times relying on 90s era markup to handle the shortcomings and inconstancies of email clients (one in particular, I’m looking at you Microsoft). Inline styles, coding structure with TABLES are still the only way to achieve platform constancy, so prepare to enter the time machine if you want to code from scratch. We could also talk about testing and how there is only one good solution…Litmus, which really is a fantastic platform, but will possibly cause you to literally spit up your coffee when you see how much they charge for a subscription. It’s just unaffordable for those of us who only occasionally need it, but that is probably content for another post.

In the last few years, some new tools have arrived help. First was the very competent, but somewhat difficult to master Foundation for Emails. They tout the accurate tagline “Making Emails Suck Less” and we were early Foundation fans here at FPCS. They offer up some very nice starter templates, and their framework code is very solid out of the box across the vast number of email clients. The main drawback for us was having to go back and inline everything using their custom inliner. Additionally, the framework language was maybe not the most user-friendly, and might take some practice getting used to. All pretty minor gripes keeping in mind this is an open source framework that significantly reduces the pain of coding HTML email from scratch. It was our framework of choice up until we discovered a worthy successor.

MJML is the new kid on the block. It was created by the developers at Mailjet and tested rigorously.

“Before being an open-sourced markup language, MJML has been used for one year as an internal engine to efficiently generate the HTML of responsive emails designed by users through Passport, Mailjet’s drag-and-drop interface to build email campaigns.”

In addition to the comprehensive framework, they have also created a free companion app you can download that will:

  • Show a live preview while you are working in your code.
  • Allow you to Export to HTML with styles inlined.
  • Allow you to send test emails using Mailjet.

This is really slick and allows you to painlessly set up your email project, it was even dare I say, kind fo fun! You can set up includes for header/footer…shared styles and more. Your markup is easy to read, and I found the high-level language for the tags was very semantic and quick to pick up. Here is a quick sample of what the editor looks like with markup and live preview.

Their documentation is very easy to use. If you don’t want to use the app you can find other tools to help with compiling the framework tags to HTML, we are fans of VSCode, and there is a nice extension that should provide all the functionality of the standalone app.

Until next time.

PS. If you have questions about user experience, web design or development post your question to our Ask a Question section and one of our contributors may answer in a post. Thanks!