Create Confirmation & Notification Mails , The MJML Way

Creating Confirmation & Notification E-mails, Even Newsletters Using old school.. will make you really go crazy… As we all know Newsletter Emails need to be Written in “Table HTML Markup” in which you have challenges to convert the design created by a talented designer that knows this is a newsletter so he starts to put all of his creativity :(, in the end, you need to go through using Table Markup.

Issues come one by one through testing on the different mail servers, Outlook, Yahoo Mail, Gmail, Apple Mail….etc

There is no standard way that all email clients render HTML based on… Also sometimes you get stuck, you don’t know how to debug for example “Outlook(2000)” or other applications mail servers. Front-end developer suffering from such issues & compatibilities cross browsers & cross different mail servers.

Here comes the role of the amazing MJML. Comes to solve most of these issues and to make your life easier when it comes to creating confirmation emails or newsletter emails.

What Is MJML?

MJML is an open-source framework that abstracts away the complexity of responsive email. The idea behind it is pretty simple. Just as jQuery normalizes the DOM & abstracts low-level interactions & animations, MJML abstracts the low-level hacks for responsive emails with an easy syntax.

MJML is responsive by design. This means you can forget about nested tables, conditional comments and more generally, about making your email responsive. MJML does it for you.

MJML is built in React, a JavaScript library developed and maintained by Facebook, It leverages the power of React’s components. The component names are semantic, starting with mj-,so that they are straightforward as well as easy to recognize & understand: mj-text, mj-image, mj-button, etc.

So Why MJML?

Easy to Learn, Quicker to Implement:

Write less code, save time, code more efficiently with MJML’s semantic syntax.

Responsive By Default:

MJML is responsive by design on most-popular email clients, even Outlook.

Component Based Structure:

Write a high-level code thanks to reusable and extensible components.

What Is New In MJML V4?

Gutters For Columns

As a common layout style, the option to add gutters between columns was a popular request

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <!-- Your first column --> 
      </mj-column>
      <mj-column>
        <!-- Your second column -->
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

A New Syntax For mj-social

While mj-social is easy to use, the component can quickly get messy when you add several social networks. To solve this, the component now follows the standard XML syntax like the other MJML components. Here is how you need to use mj-social now:

<!--  Start Social Icons -->
  <mj-section padding="0">
    <mj-column>
      <mj-social icon-size="30px" mode="horizontal" padding-top="0">
        <mj-social-element href="#" src="#">
        </mj-social-element>
        <mj-social-element href="#" src="#">
        </mj-social-element>
        <mj-social-element href="#" src="#">
        </mj-social-element>
      </mj-social>
    </mj-column>
  </mj-section>
  <!--  End Start Social Icons-->

Include .MJML file

The MJML engine now supports the mj-include component, & better yet, will validate all files included, including nested includes.

<!-- include Header-->
    <mj-include path="./header.mjml" />

Customizable Breakpoints

You can now easily override the default breakpoint (480px) of MJML. To do so, you can simply use the new dedicated head component calledmj-breakpoint & specify the desired breakpoint as a value of its widthattribute

<mjml>
  <mj-head>
    <mj-breakpoint width="320px" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
         Customizable breakpoints        
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

mjml-hero

Display a section with a background image and some content inside (mj-text, mj-button, mj-image …) wrapped in mj-hero-content component.

<mjml>
  <mj-body>
    <mj-hero
      mode="fixed-height"
      height="469px"
      width="100%"
      background-width="600px"
      background-height="469px"
      background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg"
      background-color="#2a3448"
      padding="100px 0px">
      <!-- To add content like mj-image, mj-text, mj-button ... use the mj-hero-content component -->
      <mj-text
        padding="20px"
        color="#ffffff"
        font-family="Helvetica"
        align="center"
        font-size="45"
        line-height="45px"
        font-weight="900">
        GO TO SPACE
      </mj-text>
      <mj-button href="https://mjml.io/" align="center">
        ORDER YOUR TICKET NOW
      </mj-button>
    </mj-hero>
  </mj-body>
</mjml>

Any Cons?

At some point… when you got you compiled .html file, and start Testing your output on litmus you will find issues That Appear across Different Mail Servers that you need to Fixed yourself in HTML

Which means that the version of .MJML file are not usable anymore, whatever this issue, it is always good to start Creating your Confirmation, Notifications and Newsletter mails using…MJML

References

1-The First Alpha For MJML 4 Is Here.

2-An interview with MJML.

3-How MJML let personal newsletter service.