A framework to solve the email nightmare


July 14, 2018

MJML, responsive email easy.

MJML brand

Email design is tricky; it has to be interpreted by multiple clients and to make sure that a single email works everywhere we need to base our design on tables and use multiple hacks. That’s the nature of emails, so how can we make it simpler?

That’s what MJML and some other frameworks offer. This framework abstracts that complexity into a markup language that is compiled following the email rules. The best part of it is that these templates are much easier to maintain; you can add additional features and style the components from external files.

Example

Create the main file with the structure that you need. Have a look to the documentation to use the components that you need.

<!-- main.mjml -->
<mjml>
    <mj-head>
        <mj-title>We detected suspicious activity on your Niro account</mj-title>
        <mj-include path="../includes/attributes.mjml" />
    </mj-head>
    <mj-body>
        <mj-include path="./header" /> <!-- or 'header.mjml' -->
    </mj-body>
</mjml>

If you use multiple templates, it's easier to manage them splitting the code. I'm adding here the mj-include used in the previous code.

<!-- header.mjml -->
<mj-section>
    <mj-column>
    <mj-text>This is a header</mj-text>
    <mj-include path="./attributes.mjml" />
    </mj-column>
</mj-section>

And the last thing is that you can import styles using attributes.

<!-- attributes.mjml -->
<mj-attributes>
    <mj-text padding="0" />
    <mj-class name="primary" color="F25F4A" />
    <mj-class name="big" font-size="20px" />
    <mj-all font-family="sans-serif" />
</mj-attributes>

I've used this extension for Visual Studio: Preview VS Code


Related links

This is most of the documentation that I’ve found and what has helped me to create the emails.

Plain emails are also an option.

© Javier Alvear

Send an email or tweet me