Using an email framework

Email creation frameworks provide a set of tools that make the development a lot nicer. They usually provide a custom syntax for the mail template, some ready components and development tools.

Two popular email frameworks that I found are Foundation for Emails and MJML (Mail Jet Markup Language). I chose MJML for my project because it is better suited for node based projects. Foundation Emails framework is really similar and easy to use.

I will focus mostly on MJML because it’s the one I have experience with, but it’s possible that Foundation Emails has the same, or even better features remember to check that by yourself before choosing the solution that fits you.

This project was created by ZURB Foundation and previously was known as Inky. It still uses Inky as a templating language, but they added a lot more, such as Sass styling, responsive grid, and common UI patterns to help you speed up development. The documentation is well written, and there are multiple great example templates provided. A simple responsive email would look like this:

Foundation for Emails feels really robust. I didn’t have a chance to actually try it out but I feel like I would be happy with this choice.

It’s an abbreviation of Mail Jet Markup Language. It’s a tool created by Mailjet (duh…) for their tool called Passport, an interactive email creator. According to Nicolas Garnier who is on the MJML team, the platform is currently the most used responsive email library worldwide, which is quite an achievement! It is also used by giants such as The New York Times and Ryan Air.

If you have some experience with HTML, you’ll feel right at home. This is what an example template looks like:

Looks simple, right?

From the technical point of view, it’s not that different from Foundation Emails. Main differences are that all the tags are prefixed with <mj-*> and you can style by using tag attributes not sass.

This tool is exactly what I was looking for since it fits all my requirements:

Avoid direct contact with HTML tables as much as possible — MJML provides it’s own XML inspired syntax, that is plain simple. Waaay better than writing a shitload of <td> 's. Supports most major email clients — MJML compiles to plain html (tables) and they support most major clients out of the box. You can find detailed support in their docs. They even have those awesome compatibility charts similar to what CanIUse has. A better alternative to inline-styles — How about writing them as attributes? Some people may dislike this solution but for me, it worked just fine. The html might get a bit long, but it’s possible to avoid it by using custom MJML attributes and classes which is the next point. Ability to remove duplication as much as possible — This is where custom attributes and classes shine. It’s possible to define reusable classes and global settings for tags. This way most of the duplication can be removed. Sprinkle some Handlebars templating on it, and you will be looking forward to the next emails to style! Easy to add responsive layout — MJML supports columns, and even custom breakpoints (BONUS POINT!) Custom Components — You can easily create them. That might be helpful for more robust templates. (BONUS POINT!) Toolchain — There are plugins for major IDE’s, and there is even a dedicated editor that simplifies template creation. That’s just amazing. (BONUS POINT!) Predefined Components — Did you know that you can add a Carousel and Accordion components to your email? DID YOU? I mean, that’s just crazy… And you get if for free. Blew. My. Mind.

So Yeah… This tools saved me a headache and a lot of hours. It’s really amazing, and I encourage you to try it out. There are a couple of free templates that can help you get started. I especially like the UGG Royale one. It looks really professional and shows most of the cool and useful features of MJML.

If you want to dig deeper into actual implementation I recommend this smashing magazine article, and of course, the official documentation.