Build Responsive Emails Fast with MJML Framework

By Jake Rocheleau. in E-Commerce. Updated on September 4, 2019.

Designing and coding a newsletter is time-consuming. You can find plenty of design tips but coding your newsletter into a template is the toughest part.

That’s where the MJML framework comes into play. It’s one of the best free email frameworks out there and it compiles into pure HTML/CSS, that works for all email clients.

One of the more frustrating things about coding a newsletter is getting it to work across all platforms. This goes double for responsive design which needs to work for mobile and desktop clients, too.

Thankfully, with the MJML framework you get a simple abstraction of HTML, so you aren’t coding every single line by hand. They have a beginner’s guide which is great for anyone new to email development.

You’ll use custom elements such as <mj-column> to build columns and rows for your template. You can quickly add text, buttons, and spacing, based on your needs. The MJML framework transpiles your code from the MJML markup into standards-compliant HTML & CSS.

From there, you can test your newsletter to see how it looks in various clients. Although, based on the compatibility charts, I’d say MJML is a fantastic choice for all modern email.

Note you do need to have some knowledge of frontend development to properly use MJML. It runs its own proprietary templating language and converts that into HTML, but you should understand what your code is doing, too.

To learn more about how this tool works, check out the FAQ page or browse through the official GitHub repo (yes, this is open source!)

Or, you can use the live browser editor to mess around with MJML code, without downloading anything.

This live editor works as a transpiler in the browser, so you can actually use it to convert your code into a newsletter template.

Once you have some MJML written, you just click the “View HTML” link above the preview pane. This displays the entire raw HTML, so you can copy/paste and use that for your own template.

Anyone brand new to email newsletters should start with a framework. There’s no good reason to code everything by hand, so MJML is a huge time saver.

To get started, visit the online docs or even try editing one of their templates in the live editor. With just a few hours of work, you can have a finalized email newsletter coded & ready to go.