Notes from the Dev: Essential Advice on How to Use MJML
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)
Table of content
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, Sinch Mailjet 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:
- MJML documentation: Find a bunch of guides, tutorials, and more. Nicole says it’s really good.
- MJML Slack Community: Get answers from email experts.
- Getting Started with MJML: Check out this Email on Acid article from Trevor Rawls who’s a big fan of using the markup language.
- Check out the Smashing Magazine article: “How to Make Responsive Coding Easy”
Use Mailjet’s MJML tutorials:
- How to code a welcome email with MJML
- How to code a holiday email with MJML
- How to code an email receipt template with MJML
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 Sinch Email on Acid 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.
