Responsive Email Made Easy with MJML

In the past few years, building email newsletter was one of my expertise. I could nail all the inconsistencies in different email clients easily, I could do complicated layout without any problems. Until these recent years, the Internet has brought responsive layout into email. That's when thing getting much more complicated.

This isn't a fun project for beginners, you need to know the basic of HTML and experience will help you a lot. Responsive layout is much harder especially there's different approach go to around it. It's difficult to ensure the layout appear identical in different email clients, but now, you need to ensure it responsive in mobile email client too.

This is when this cool framework comes to rescue - MJML. MJML was created by Mailjet developers in early 2015 while working on a project. The main objective is to simplify the development of responsive email into a new markup language that will produce good quality responsive email.

MJML Markup Language

All the complex HTML is encoded in its own language. It's look like HTML and CSS but using its own prefix <mj-*> and attributes (which is actually will be parsed into CSS). Example:

<mj-body>
  <mj-section>
    <mj-column> 
      <mj-image src="/assets/img/logo-small.png"></mj-image>
    </mj-column>
  </mj-section>
  <mj-section>
    <mj-column>
      <mj-image src="/assets/img/easy-and-quick.png"  width="112"></mj-image>
      <mj-text font-size="20px" color="#595959" align="center">Easy and Quick</mj-text>
    </mj-column>
    <mj-column>
      <mj-image src="/assets/img/responsive.png" width="135"></mj-image>
      <mj-text font-size="20px" color="#595959" align="center">Responsive</mj-text>
    </mj-column>
  </mj-section>
  <mj-section>
    <mj-column>
      <mj-button background-color="#F45E43" font-size="15px">Discover</mj-button>
    </mj-column>
  </mj-section>
</mj-body>  

Documentation

MJML has an extensive documentation on how to use the markup and components. With HTML and CSS background, I was able to pick up the new markup language quite fast because it's pretty similar. By using vertical split view, the documentation is easy to use and understand.

Installation

MJML engine is written in Node.js and ReactJS. You can install it and use it to compile MJML code and generate responsive HTML code out of it.

Unfortunately, MJML is not available yet on Windows, but you still can generate code in browser using the online MJML editor. Have fun trying it out!

• TAGS:
• CSS
• EDM
• HTML
• Responsive
• Tools