After years of working with marketing automation tools, I’m still surprised by how many companies have never heard of MJML.
Using an email framework offers tremendous advantages when building HTML emails—from significantly reducing development time for mobile-first email templates to ensuring a consistent look and feel across all major email clients. It also helps prevent many common issues that email developers typically encounter during testing.
This article explains what MJML is, its advantages and disadvantages, and finally, how to create a custom drag-and-drop template using MJML in Salesforce Marketing Cloud.
What MJML Is:
Let’s start with the basics: MJML is an email framework that allows you to create mobile-first HTML emails that render properly across all email clients using a simple syntax.
Instead of manually coding divs, tables, conditional statements for Outlook (MSO), and large chunks of CSS, you can simply use MJML components. These components—ranging from images and text to structured sections and columns—are then automatically converted into clean, responsive HTML.
ex: MJML Code:
<mj-section full-width="full-width">
<mj-column vertical-align="middle">
<mj-text align="left" font-size="11px">
More than an Email Template
</mj-text>
</mj-column>
<mj-column vertical-align="middle">
<mj-text align="right" font-size="11px">
Choose MJML
</mj-text>
</mj-column>
</mj-section>
ex: HTML Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:middle;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;">More than an Email Template</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:middle;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:11px;line-height:1;text-align:left;color:#000000;">Choose MJML</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
By writing just a few lines of code, we get a properly indented, mobile-first HTML template that works seamlessly across email services.
Installing mjml is quite simple and you have one of two options. You can either install the desktop app (this is a great article that guides you through the process) or use their online editor.
In my experience, for someone with front-end skills, it shouldn’t take more than a couple of weeks to learn how to use MJML effectively. Here are the key advantages:
Advantages of MJML
1- Drastically reduces development time – Whether you're creating a full email, a reusable template, or specific components for email marketing campaigns, MJML significantly speeds up the process and, of course, provide a highly reliable HTML output that will render properly accross most email clients.
2- Cleaner code structure – Since MJML has its own classes and naming conventions, it enforces a more organized and readable coding structure.
3- Reduces bottlenecks – While an experienced front-end developer can build complex emails without an email framework, they often become a bottleneck in the process. With MJML, marketers with basic to intermediate HTML skills can quickly build and execute email campaigns without relying on developers.
Disadvantages of MJML
1- Code Redunduncy: Although MJML is a powerful tool, its HTML output can sometimes be redundant, with the same attributes applied to multiple elements. This can lead to unnecessarily large file sizes.
2- Debugging challenges Like any framework, MJML requires proper debugging. Some complex components, such as mjml-hero or mjml-carousel, may cause rendering issues on certain email clients, requiring an experienced developer to troubleshoot. No tool is perfect, and MJML is no exception. However, I do have to say that in my experience and maybe to add another advantage, MJML has a very strong community and there's always a solution for the most common issues that I encountered.
3- HTML conversion limitations – Once an MJML file is converted to HTML, making structural changes can be challenging. To mitigate this, I recommend standardizing your process: instead of constantly building HTML emails from scratch, create a master template with reusable components. I also think is important to highlight that mjml does not replace a front-end developer and understanding the output is as important as learning how to use the tool to build it.
Create an email template in SFMC:
When implementing custom HTML templates in Salesforce Marketing Cloud, one of the main concerns my clients have is ensuring that the template is drag-and-drop compatible and that its components are easy to use.
This leads to a two-part solution:
1- Creating a template with data-type="slot divs: The first step is to create a template in Content Builder. The template structure will consist of a header and a body, where we'll add empty <div> elements with data-type="slot" attributes. Each slot will have a unique data-key, such as "content_1", "content_2", and so on, depending on the number of drag-and-drop content areas we want to include..
2- Creating Free form content blocks: The second step is to create a content block (it has to be a free form) for each component, such as the header, footer, hero image, and body. When we create them, we simply copy paste the html of that component and we'll be able to easily edit it as a regular content block moving forward. Once these blocks are set up, we can simply drag and drop them into an email using our custom template and edit them just like any other content block as well.
Since, you've made it so far, I'd like to give you a small gift, which is basically an MJML email template using NTO, Salesforce's fictional brand. Thanks for reading :)
Comments
Post a Comment