Create Responsive Emails I Under 10 Minutes

Create Responsive Emails I Under 10 Minutes

By

Email is one of the best ways to engage with your audience. Therefore it’s never to early to begin building your brand’s email list. However the tasks of creating emails that render correctly in your reader’s inbox, regardless of what email client they’re using is not a straight forward task, until now.

In this tutorial I will show you how to create simple responsive HTML emails which will work in every email client, including all new smartphone mail clients and apps.

Listen to me mispronounce MJML with MGML for 10 minutes.

  • 1:35 What is MJML?
  • 2:12 Getting Started
  • 3:31 Creating The Responsive Email
  • 5:12 Converting MJML Into HTML
  • 7:07 Uploading The Email Template
  • 8:05 Bonus: Adding MJML Components

What is MJML?

MJML (Mail Jet Markup Language) is an open source framework that abstracts away the complexity of responsive email. The idea behind it is pretty simple. MJML abstracts the low-level ‘hacks’ for responsive emails with an easy syntax. MJML is responsive by design! No longer are responsive emails only accessible to a handful of experts.

Getting Started with MJML

Official getting started documentation here. You can install MJML on OSX, Linux and Windows using npm. Open up your terminal and run the npm install command forOSX.

sudo npm install -g mjml

Awesome now you have MJML installed.

Creating The Responsive Email Template

Let’s get a boilerplate for our new email template so we can get up and running fast! Get your MJML official boilerplate here. Click on the boilerplate template you want. Then copy the markup code from the editor.

Open up your favorite desktop editor and paste the markup code into your favorite text editor. I use Sublime Text 3. So even though this MJML markup looks like HTML your text editor doesn’t recognize it’s syntax, so fortunately Sublime Text 3 has a MJML Syntax package.

On OSX in your Sublime Text 3 editor, click on the application name in the top left next to the Apple logo, click preferences and select Package Control. When Package Control pops up type ‘install’, select the install package and type MJML then select the MJML package.

Example MJML boilerplate template:

<mjml version="3.3.3">
  <mj-body>
    <mj-container background-color="#F4F4F4" color="#55575d" font-family="Arial, sans-serif">
      <mj-section background-color="#C1272D" background-repeat="repeat" padding="20px 0" text-align="center" vertical-align="top">
        <mj-column>
          <mj-image align="center" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1h3k4.png" width="128px"></mj-image>
        </mj-column>
      </mj-section>
      <mj-section background-color="#ffffff" background-repeat="repeat" padding="20px 0" text-align="center" vertical-align="top">
        <mj-column>
          <mj-image align="center" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1h3s5.gif" width="600px"></mj-image>
          <mj-image align="center" alt="Happy New Year!" container-background-color="#ffffff" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1hlvp.png" width="399px"></mj-image>
        </mj-column>
      </mj-section>
      <mj-section background-color="#ffffff" background-repeat="repeat" background-size="auto" padding="20px 0px 20px 0px" text-align="center" vertical-align="top">
        <mj-column>
          <mj-text align="center" color="#55575d" font-family="Arial, sans-serif" font-size="14px" line-height="28px" padding="0px 25px 0px 25px">
            New dreams, new hopes, new experiences and new joys, we wish you all the best for this New Year to come in 2018!
          </mj-text>
          <mj-image align="center" alt="Best wishes from all the Clothes Team!" padding="10px 25px" src="http://gkq4.mjt.lu/img/gkq4/b/18rxz/1hlv8.png" width="142px"></mj-image>
        </mj-column>
      </mj-section>
      <mj-section background-color="#C1272D" background-repeat="repeat" padding="20px 0" text-align="center" vertical-align="top">
        <mj-column>
          <mj-text align="center" color="#ffffff" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding="10px 25px">
            Simply created on <a style="color:#ffffff" href="http://www.mailjet.com"><b>Mailjet Passport</b></a> Application
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section background-repeat="repeat" background-size="auto" padding="20px 0px 20px 0px" text-align="center" vertical-align="top">
        <mj-column>
          <mj-text align="center" color="#55575d" font-family="Arial, sans-serif" font-size="11px" line-height="22px" padding="0px 20px">
            [[DELIVERY_INFO]]
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Great so now you have MJML code in your editor. Save this file as email-template.mjml anywhere you’d like I would suggest creaeting a folder on your Desktop called Email-Templates so the file is easy to find.

Converting the MJML into HTML

We are almost finished creating our responsive email template, but right now our MJML is unusable, email clients don’t understand MJML and this MJML needs to be compiled into HTML, we convert MJML into HTML with a simple terminal command, run this command.

Navigate to your Email-Templates folder

cd ~/Desktop/Email-Templates

Convert MJML into HMTL

mjml -r email-template.mjml -o email-template.html

Awesome now you’ve created your email-template.html

Upload Your Template to Your Favorite Email Marketing Platform

Congratulations now you have an awesome responsive email template using the power of NPM & MJML! You can now upload this email-template.html file to your favorite marketing platform like MailChimp.

Login to MailChimp. Go to templates. Click Create Template. Click Import HTML. Select email-template.html give it a title and you’re good to go!

Bonus: Add Awesome Components

You can see all the amazing things you can do with MJML by checking out their documentation. For example you can add a awesome carousel that can scroll through multiple images! I have never before seen this in an email builder, so it’s really exciting. Below is the markup code for a carousel, just replace the src attribute values with the images links you want.

<mj-section>
  <mj-column>
    <mj-carousel>
      <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />
      <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />
      <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />
    </mj-carousel>
  </mj-column>
</mj-section>

I hope you enjoyed this short tutorial on how to make awesome responsive emails, if there is anything I left out or anything else you’d like me to cover please leave a comment below! Thanks.