Important information about using MJML

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

Writing code takes time. This is also true for coding responsive HTML emails. A good developer writes clean, concise code that gets the job done. Some would even call it elegant.

What if there was a faster way to write much less code and make campaigns responsive on any email client and device? That's the promise of MJML, a markup language designed to make work faster and easierIn this episode of Notes from the Dev: Video Edition, Nicole Hickman joined me to explain some of the basics of MJML (Mailjet Markup Language).

I came across MJML when I first started developing email. I know a lot of email geeks who swear by it, but I never had the chance to try it out myself, so I was super excited when Nicole told me how she uses it and why she prefers it for coding email.

Check out our second episode of Notes from the Dev: Video Edition below, and be sure to subscribe to the Email on Acid YouTube channel to keep up with future episodes.

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

What is MJML?

MJML is one of the most popular email frameworks out there. A team of developers at Mailjet developed this markup language back in 2016 with the help of other members of the open source community.

Before making it available 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 use MJML to create their own responsive email templates.

Built on ReactJS, MJML uses a 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 bit like magic if you ask me.

The result is that email developers can create emails faster and with fewer lines of code.

You might think that responsive design would be an absolute necessity for most email marketers by now. But a 2020 study by CRM SuperOffice found that 1 in 5 emails examined were not optimized for mobile devices. I bet you've spotted some of these in your own inbox.

No one on the email team wants to send campaigns that look terrible on mobile. And who doesn't want to develop emails faster and easier? So let's look at Nicole Hickman's tips for getting started with MJML.

The basics of using MJML

Nicole currently works as a Direct Marketing Developer for Fishawack Health in San Diego. In addition to being an experienced email developer, she has 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.

(Look for the second part on advanced MJML techniques coming soon.)

Nicole showed us her MJML email boilerplate to start with. If you want to create your own, you can find some simple MJML code snippets and basic advice in our Email Coding 101 tutorial.

Nicole explained that the tag acts as a DOCTYPE. There, it defines the language of the email using the “lang” attribute, which tells screen readers how to correctly pronounce words in the language identified in the code. This is an important point to consider when coding accessible emails.

The Tag contains all the information you would put in the header section of an HTML email. Nicole gave us a quick look at how MJML is parsed into HTML. At this point in the interview, Nicole's cat was getting very excited. Maybe that was because cats love that MJML automatically targets Outlook to solve the email client's DPI scaling issues for you. This is a huge time saver.

MJML sections, columns and components

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

The text of an email is divided into sections which can contain one or more columns which you can then fill with different components. Nicole said she uses most common as this is obviously used to display email copies.

There are many other useful components that come standard with MJML. These include tags for images Keys and tables . 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 create your own MJML components.

Remember that each section of your email should And Tags that are closed at the end. Here is an example of what this looks like:

Hello World

So if you need a two or three column email layout, just add another and add the components and content you want to this column. On mobile devices, the columns are automatically stacked.

You can also style the email components by defining CSS with in the header of the email with the And Tags. Here is an example of what this might look like:

.blue-text div { color: blue !important; }

.red-text div { color: red !important; text-decoration: underlined !important; }

I am red and underlined

I'm blue because of inline

I am green

Want to play around with MJML code? There is a “Try it Live” feature on the website.

Learn more about getting started with MJML

Of course, this is just the beginning of the many ways you can use MJML to code responsive HTML emails. I'm sure you have some questions at this point, so we'll work with Nicole on the second half of this discussion.

In the second part, I will ask Nicole some of the questions developers ask me about MJML:

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

This is a video you don't want to miss, so be sure to subscribe to Email on Acid on YouTube.

In the meantime, here are a few other places you can learn about MJML:

Use Mailjet’s MJML tutorials:

A large Thanks to Nicole Hickman for sharing her expertise on MJML with us. If you would like to get in touch with Nicole, you can find her on Twitter and Linkedin.

And finally, no matter how you develop emails… Don’t forget to test! Use Sinch Email on Acid to test and preview how your code will render on all major clients and dozens of devices. Fix problems before you hit send and deliver perfect emails.

Author: Megan Boshuyzen

Megan is a graphic designer and email developer who has dabbled in all aspects of email marketing. She believes that good emails for good causes make a positive difference in the world. Megan currently works as an email developer for Sinch Email. Visit her website to learn more at megbosh.com.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps