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.
- MJML documentation
- MJML vs Fundation
- Medium posts: New to email coding? Here’s where to start.
- Tutorial: Creating your own MJML component
- Newsletter: Really Good Emails
Plain emails are also an option.