Responsive Email Messages with MJML

These days, if you are in charge of creating email templates, you can no longer ignore the fact that email messages must be mobile friendly. After all, everything we do is basically done in our phones.

Despite that, we've all opened a message and found it hard to understand why it would still not be optimized for a smaller screen. Responsive web design has been around for quite some time but it still requires a certain skill set to develop fully responsive email messages.

At Notificare, you can already take advantage of responsive email components when using our Notificare Compoments editor. But, what can you use when you want to create something from scratch and you simply don't have enough HTML knowledge?

Enter MJML

Assuming you have a basic knowledge of HTML and CSS, using MJML might become a real time saver. MJML (or Mailjet Markup Language) was developed by a group of developers at Mailjet (now Pathwire) and simplifies the complexity of designing responsive emails. Basically it will use a syntax, very similar to HTML, and generate all the pieces and bits needed for a proper responsive email message.

Install

MJML is available in many forms, for example, if you are familiar with Node.js and NPM, you can easily install it locally in your computer using:

npm install mjml

You can also use it as a plugin in your favorite IDE:

• Visual Studio
• Atom
• Sublime

Additionally, you can also install the MJML App in your computer, which is probably the best option for beginners just getting started with MJML.

Finally, the team at MJML also has a web based application that you can use to create your email designs right from the browser. Just go ahead and open https://mjml.io/try-it-live to start creating responsive email templates.

Start with MJML

The team at MJML also has a great tutorial to get you started with MJML, you can find that here. You will also want to take a look at their documentation for a more in-depth reference to all those MJML components available for you.

Just like pure HTML, with MJML you start by declaring the following tag:

<mjml>
...
</mjml>

And just like HTML, you can add a HEAD and a BODY:

<mjml>
   <mj-head>
   </mj-head>
   <mj-body>
   </mj-body>
</mjml>

Other elements can then be nested in these tags, for example you can declare custom fonts in your head using:

<mjml>
   <mj-head>
     <mj-font name="Raleway"
       href="https://fonts.googleapis.com/css?family=Raleway" />
   </mj-head>
   <mj-body>
     <mj-section>
       <mj-column>
         <mj-text font-family="Raleway, Arial">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </mj-text>
       </mj-column>
      </mj-section>
   </mj-body>
 </mjml>

As you can see tags will also accept a bunch of attributes, just like HTML, that allow you specify fonts, sizes, colors, padding, etc. More information about all standard HEAD components can be found here.

As for the body of your email message, when using MJML, it will boil down to two basic tags:

mj-section

A tag that generates a horizontal section in a email message.

mj-column

A tag that will denote how many columns are inside a section.

In practice, here's an example of a template using one column:

<mjml>
  <mj-body>
    <mj-section>
       <mj-column>
          <mj-text>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Adding another column is as easy as:

<mjml>
  <mj-body>
    <mj-section>
       <mj-column>
          <mj-text>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </mj-text>
      </mj-column>
      <mj-column>
          <mj-text>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

As you can see, the syntax is very similar to HTML, there is a opening tag and closing tag. Additionally, MJML provides other components like a text component:

<mj-text font-style="italic"
         font-size="20px"
         font-family="Helvetica Neue"
         color="#626262">My Awesome Text</mj-text>

Or an image component:

<mj-image width="200px"
          src="https://example.com/assets/images/logo.jpg" />

And a button component:

<mj-button background-color="#F45E43"
           href="https://example.com/more">Learn more</mj-button>

There also other components like <mj-divider>, <mj-spacer> or <mj-social> and other more advanced components like <mj-accordion> or <mj-carousel> that might not be supported by all email clients. For more information about all the BODY components available for you, please check their documentation here.

Ultimately, depending how you are using MJML, it will basically generate a fully responsive email template that you can easily use in Notificare or any other ESP.

Conclusion

This is just a small preview of what you can do with MJML. Eventually, as you get comfortable with this tool, you will find how you can create more complex templates using all the features at your disposal. For those of you that need to create fully customize responsive email messages, MJML can save you a huge amount of development time.

As always, we hope you liked this article and if you have anything to add, questions or suggestions to this post, we are available via our Support Channel.