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.
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.
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.