Notes from the Dev logo red

Notes from the Dev: Essential Advice on How to Use MJML

0

Writing code takes time. That includes coding responsive HTML emails. A good developer writes clean, concise code that gets the job done. Some might even call it elegant. 

What if there was a faster way to write a lot less code and make campaigns responsive on every email client and device? That’s the promise of MJML, a markup language that was created to make the job faster and easier. In this episode of Notes from the Dev: Video Edition, Nicole Hickman joined me to walk us through some of the basics of MJML (Mailjet Markup Language)

I encountered MJML when I first started developing emails. I know a lot of email geeks who swear by it. But I’ve never had the chance to dive into it myself. So, I was super excited for Nicole to tell me how she uses it and why it’s her preferred way to code an email. 

Check out our second episode of Notes from the Dev: Video Edition below and subscribe to Email on Acid’s YouTube channel so you’ll be sure to see future installments. 

(Visit our Resource Center to view the full transcription of this episode) 

What is MJML? 

MJML is among the most popular email frameworks out there. A team of developers from Mailjet created this markup language back in 2016 along with the help of others in the open-source community.  

Before it was released to the public, Mailjet used it for a year as an internal engine to generate responsive email designs in the drag-and-drop email builder, Passport. And today, Mailjet by Sinch customers are using MJML to design their own responsive email templates

MJML is built on ReactJS and uses semantic syntax to help email developers code responsive designs more efficiently. MJML’s open-source engine translates (or parses) the markup language into HTML. It’s a little like magic if you ask me. 

The result is that email developers are able to create emails faster with fewer lines of code. 

You’d think that responsive design would be an absolute necessity for most email marketers by now. But a 2020 study from the CRM SuperOffice found that 1 out of 5 emails it examined were not optimized for mobile devices. I bet you’ve encountered a few of those in your own inbox. 

No one wants to be on the email team sending out campaigns that look horrible on mobile. And who wouldn’t want to develop emails in a faster, simpler way? So, let’s dive into Nicole Hickman’s tips on how to start using MJML. 

The basics of using MJML 

Nicole is currently working for Fishawack Health in San Diego as a Direct Marketing Developer. Besides being an experienced email developer, she’s also worked as a print production artist. Nicole had a lot to say about using MJML, so we’re releasing her episode in two parts. 

(Watch for part two on advanced MJML techniques coming soon.) 

Nicole got started by showing us her MJML email boilerplate. If you want to make one of your own, you can find some simple MJML code snippets and basic advice in our Email Coding 101 tutorial. 

Nicole explained that the <mjml> tag acts like the DOCTYPE. That’s where she defines the language of the email using the lang attribute, which tells screen readers how to properly pronounce words in the language identified in the code. That’s an important thing to include when you’re coding accessible emails

The <mj-head> tag includes all the information you’d put in the head section of an HTML email. Nicole gave us a quick look at how the MJML gets parsed into HTML. At this point in the interview, Nicole’s cat got very excited. Maybe that was because cats love the fact that MJML automatically targets Outlook to address the email client’s DPI scaling problems for you. That’s a major timesaver. 

MJML sections, columns, and components 

There are a few basic types of “building blocks that you’ll use to code an email with MJML.  

The body of an email gets broken down into sections <mj-section>, which can contain one or more columns <mj-column>, which you can then fill with a variety of different components. Nicole said she uses <mj-text> the most often as that’s what’s obviously used to display email copy. 

There are plenty of other useful components that come standard with MJML. That includes tags for images <mj-image>, buttons <mj-button>, and tables <mj-table>. As you can see, MJML is a very straightforward and intuitive markup language. There are also MJML components for social media sharing, navigation bars, hero images, and much more. Plus, you can also build your own MJML components.  

Just remember that every section of your email will need to start with <mj-section>  and <mj-column> tags that get closed out in the end. Here’s an example of how that looks: 

<mj-section> 

   <mj-column> 

      <mj-text> 

         Hello World 

      </mj-text> 

  </mj-column> 

</mj-section> 

So, if you need a two or three-column email layout, you’d just add another <mj-column> and include the components and content you want in that column. The columns will automatically stack on mobile. 

You can also style the email components by defining CSS with <mj-attributes> in the email’s head section using the <mj-class> and <mj-style> tags. Here’s an example of how that might look: 

<mj-head> 

    <mj-attributes> 

      <mj-class name="mjclass" color="green" font-size="30px" /> 

    </mj-attributes> 

    <mj-style inline="inline"> 

      .blue-text div { 

      color: blue !important; 

      } 

    </mj-style> 

    <mj-style> 

      .red-text div { 

      color: red !important; 

      text-decoration: underline !important; 

      } 

    </mj-style> 

  </mj-head> 

  <mj-body> 

    <mj-section> 

      <mj-column> 

        <mj-text css-class="red-text">I'm red and underlined</mj-text> 

        <mj-text css-class="blue-text">I'm blue because of inline</mj-text> 

        <mj-text mj-class="mjclass">I'm green</mj-text> 

      </mj-column> 

    </mj-section> 

  </mj-body> 

Want to play around with MJML code? There’s a “try it live” feature on their website. 

More on getting started with MJML 

Of course, this is only the beginning of the many ways you can use MJML to code responsive HTML emails. I’m sure at this point you’ve got a few questions. That’s why we’re working on the second half of this discussion with Nicole. 

In part two, I’ll ask Nicole some of the questions I hear developers asking about MJML: 

  • How does MJML work with dark mode emails? 
  • How do you manage to code overlapping elements? 
  • How do you set up image swapping for mobile? 

You don’t want to miss that video, So, make sure to subscribe to Email on Acid on YouTube

In the meantime, here are a few other places to go and learn about MJML: 

Use Mailjet’s MJML tutorials: 

A big thank you to Nicole Hickman for sharing her expertise on MJML with us. If you want to connect with Nicole, you can find her on Twitter and Linkedin

And finally, no matter how you choose to develop emails… don’t forget to test! Use Email on Acid by Sinch to test and preview how your code renders on all major clients and dozens of devices. Fix issues before you hit send and deliver email perfection. 

Do More in Less Time with Email on Acid

Stop switching back and forth between platforms during pre-deployment and QA. With Email on Acid you can find and fix problems all in one place. Double check everything from content to accessibility and deliverability. Plus, with accurate Email Previews on the most popular clients and devices, you can confidently deliver email perfection every time.

Start for Free

Author: Megan Boshuyzen

Megan is a graphic designer turned email developer who’s worked on all aspects of email marketing. She believes good emails for good causes make a positive difference in the world. Megan is currently working as an email developer for Sinch Email. Visit her website and learn more at megbosh.com.

Author: Megan Boshuyzen

Megan is a graphic designer turned email developer who’s worked on all aspects of email marketing. She believes good emails for good causes make a positive difference in the world. Megan is currently working as an email developer for Sinch Email. Visit her website and learn more at megbosh.com.

Leave a Reply

Your email address will not be published. Required fields are marked *