Responsive email design framework MJML to the test

Email design is a real pain in the arse. We all know that. Therefore I decided to give mjml a go. For those who don’t know of mjml.io, it’s a responsive email design framework built by a team of developers at Mailjet, a competitor of Mailchimp.

The beauty of this framework results in the fact that you create something very much close to html, using an MJML markup language, and as mentioned in its detailed documentation, “its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase.”

MJML’s open-source engine, which is - by the way - written in NodeJS (hence easily installed via npm), leverages ReactJS and takes your mjml email designs to process high quality responsive HTML compliant with best practices. That’s the whole idea.

Easy and quick, Responsive, Component based

As I had nothing much to work with for starters, I decided to use somebody else’s work, and picked this beautiful minimalistic newsletter (designed by Dmitri Litvinov) I found on dribbble.

I won’t go into the details of the design process but with the help of the doc, I put all the components together in a matter of minutes, generated the html template using the terminal and the follwowing syntax:

mjml yourfile.mjml

Results

Here’s the final result of my work in both gmail and protonmail. Something not only esthetic but fully functional.

Verdict

If you’re willing to send what looks like a professional responsive email, without having to use a third-party design service, then I defo advise you to give mjml a shot.

So long.