Email Variant

Back to home

From MJML to Marketo: A Step-by-Step Guide to Transforming Your Email Code

October 30, 2024

Email developers love MJML for its intuitive syntax and robust responsive framework. But what happens when you need to move these beautifully crafted MJML designs into Marketo? Let's break down the conversion process step by step, ensuring your emails maintain their responsiveness while leveraging Marketo's powerful features.

Why Convert MJML to Marketo?

MJML offers an excellent development experience with its semantic syntax and built-in responsive components. However, Marketo's email engine requires specific formatting and elements to function properly. By converting MJML to Marketo, you get the best of both worlds:

  • MJML's streamlined development process

  • Marketo's advanced templating language that allows for editable elements and variable-ized styles

Before You Begin: Essential Requirements

  1. Your MJML email design file

  2. Access to the MJML CLI or online MJML editor

  3. A code editor

  4. Marketo access for testing

Step 1: Prepare Your MJML Code

Before converting, optimize your MJML structure:

<mjml>
  <mj-body background-color="#F4F4F4">
    <mj-section css-class="mktoModule" background-color="#000000">
      <mj-column>
        <mj-text>
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Key Considerations:

  • Identify styles that should be variables in Marketo

  • Note any editable content areas

  • All <mj-section> components will translate to mktoModules so we can add that as a class in our MJML

Step 2: Generate HTML from MJML

Convert your MJML to HTML using either:

  • MJML CLI: mjml input.mjml -o output.html

  • Online MJML editor

<body style="word-spacing:normal;background-color:#F4F4F4;">
  <div style="background-color:#F4F4F4;">
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="mktoModule-outlook" style="width:600px;" width="600" bgcolor="#000000" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="mktoModule" style="background:#000000;background-color:#000000;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#000000;background-color:#000000;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:top;width:600px;" ><![endif]-->
              <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" 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:13px;line-height:1;text-align:left;color:#000000;">Hello World!</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]-->
  </div>
</body>

Step 3: Implement Marketo Compatibility Changes

3.1 Add Marketo Variable Declarations

At the top of your HTML, in between your <head></head> tags define your variables:

<meta class="mktoColor" id="textColor" mktoName="Main Text Color" default="#FFFFFF" />
<meta class="mktoNumber" id="textFontSize" mktoName="Main Text Font Size" default="12" min="8" max="18" units="px" step="1" />
3.2 Replace Static Values with Variables

Transform static values into Marketo variables:

Before:

<body style="word-spacing:normal;background-color:#F4F4F4;">

After:

<body style="word-spacing:normal;background-color:${email_body_color};">
3.3 Add Marketo Editable Sections

Implement editable regions for content flexibility:

<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
     <div class="mktoText" mktoName="Text" id="text1" style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello World!</div></td>

Step 4: Marketo-Specific Enhancements

4.1 Convert MJML Sections to <table>

MJML sections (<mj-section>) translate to <div>'s with ghost tables which isn't compatible with Marketo syntax as the mktoModule class can only be defined on <tr> or <table> elements. Here is how we will adjust our MJML html output to be Marketo compatible:

Before:

 <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="mktoModule-outlook" style="width:600px;" width="600" bgcolor="#000000" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div class="mktoModule" style="background:#000000;background-color:#000000;margin:0px auto;max-width:600px;">
<!-- content -->
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->

After:

<table align="center" border="0" cellpadding="0" cellspacing="0" class="mktoModule" mktoName="Module 1" id="module1" style="width:600px;" width="600" bgcolor="#000000">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
   <div style="background:#000000;background-color:#000000;margin:0px auto;max-width:600px;">
<!-- content -->
</div>

      </td></tr></table>

Key Considerations:

  • Remove Outlook conditional comments surrounding the ghost tables so they are now "visible"

  • Assign class="mktoModule" to the table, along with the mktoName attribute and a unique id

4.2 Add a wrapper <table> around entire content of email, just inside of the opening <div> tag

The <mj-body> component creates a wrapper of a <body> tag with a <div> that wraps the entire contents of the email. We need to add in a <table>, <tr>, <td> element here so that we can assign our "mktoContainer" class which is a requirement for Marketo email templates.

Before:

<body style="word-spacing:normal;background-color:#F4F4F4;">
  <div style="background-color:#F4F4F4;">
<!-- email content -->
</div>
</body>

After:

<body style="word-spacing:normal;background-color:#F4F4F4;">
  <div style="background-color:#F4F4F4;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%;" width="100%" style="background-color:#F4F4F4;">
        <tr>
            <td class="mktoContainer" mktoName="container" id="container">
<!-- email content -->

</td>
</tr>
</table>
<div>
</body>

Key Considerations:

  • Add in a <table>, <tr>, <td> container inside the opening <div> tag, making sure to carry the styles from the <div> to the new <table> element.

  • Assign class="mktoContainer" to the <td>, along with the mktoName attribute and a unique id

Conclusion

Converting MJML to Marketo-compatible code requires attention to detail, but the result is worth the effort. You'll have templates that are both easy to maintain and fully functional within Marketo's ecosystem. Remember to test thoroughly across different email clients and devices to ensure consistent rendering.

Additional Resources

  • MJML Documentation

  • Marketo Email Template Syntax

  • Email Client Testing Tools

By following this guide, you'll be able to successfully transform your MJML email designs into robust Marketo templates while maintaining responsiveness and adding Marketo's powerful features.