Intro to MJML: Responsive HTML Email Coding Made Easy

We’ve delved into the basics of coding HTML emails from scratch and weighed the differences between web design and email design, however, now we’re going to dive even deeper into the world of email development with MJML. 

You may have heard of MJML before or it may be completely foreign to you, but MJML has become a staple in email development and could be the solution to many of the common email design woes you may be struggling with. In this post, you’ll learn about what MJML is, how it can improve your email design processes, and you’ll even get to code your own MJML email. Let’s jump right in.

What is MJML?

We’ve discussed before how chaotic the world of email design can be. Unlike web development which has been molded over the years by standards and guidelines that are almost universally used, email development has been left to the mercy of email clients. This has created inconsistency across the board when it comes to rendering and less flexibility for email responsiveness, especially when creating emails from scratch.

But this is where MJML comes to the rescue.

MJML stands for Mailjet Markup Language and was originally created by a team of developers at Mailjet back in 2015 to simplify the process of designing responsive emails. Since then, the MJML framework has become a popular tool for creating emails in an efficient and painless manner. If you’re worried you’ll have to learn an entirely new coding language to use MJML, don’t be. MJML is quite similar to HTML and will be very easy to pick up for those already familiar with web development.

What are the advantages of using MJML?

• MJML has well-documented components that are related or identical to those in HTML, such as images and buttons, but you also have the ability to build your own components within the framework to suit your needs.
• MJML combines an easy syntax with responsive behavior, which means you don’t have to risk getting lost in a maze of table nesting or implementing numerous amounts of CSS to appeal to various email clients. This saves a whole lot of time and coding space.
• MJML is open-source, which means the wider community of MJML users can contribute to making the framework better and come up with more solutions to any updates email clients introduce.

How to install MJML

You have various options available for installing and using MJML. Here are a few:

• On the MJML website, you can code directly inside your browser: https://mjml.io/try-it-live. This is also a good option to try out MJML if you’re a beginner.
• Download the MJML app – you’ll be able to use it without internet access and it comes with a live preview function.
• Atom Plugin – This contains a bundle of packages, which include error-spotting and a live preview feature like the MJML app.
• Visual Studio Code plugin – This plugin has all the features from the options above, including the ability to send emails with Nodemailer or Mailjet.
• Sublime Text Plugin – Simply highlights MJML code.
• Node.js – For those a little more experienced with web development, you can install MJML using npm.

Scalero’s platform also supports MJML so our users have the flexibility to use it when creating templates.

How to get started

It helps to already have basic knowledge of HTML and CSS, but it’s a fairly smooth process to learn MJML with practice. So, let’s try our hand at coding a basic email.

Start with the <mjml>, <mj-head>, and <mj-body> tags:

By default, all MJML components have padding, so it’s good practice to set padding for each of your components to 0 in the head. This gives you the flexibility to later add custom padding to each component inside the body.

There are a couple of other useful components we’re going to use in the head. One is <mj-preview>, which enables you to set the preview text that will be displayed in your recipient’s inbox. The other is <mj-breakpoint> and it’s used to control the point at which the email layout should change from desktop to mobile.

Let’s now introduce the two main building blocks that will be used to create a responsive email, which are <mj-section> and <mj-column>.

<mj-section> creates horizontal sections within emails.

<mj-column> sits within <mj-section> tags and allows you to split your section into multiple columns.

Let’s go ahead and add these two components in:

You’ll notice we have all of these tags, but no visible content yet, so let’s add a logo. The tag we use for images is—you guessed it—<mj-image>. Since this is an email, we want the logo to be the first thing subscribers see. To position the logo at the very top, create another section and column above the sections with text and insert your image url within the image tag.

Depending on the original size of your image, it may appear too big or small initially, so let’s also add some styling. Similar to HTML, you can change an image’s size using the width attribute, and if you use the “href” attribute with an <a> tag, you can make the image clickable. 

You’ll also notice that by default, the image is aligned to the center, which is where we’ll keep it for this email, but you can also align it to the left or right.

Now it’s time to add some words. To do this, we’ll use the <mj-text> tag. Within this tag, you can use various headings like the usual <h1> through <h6> tags as well as the <p> tag for longer text. For this email, let’s use an <h1> tag for the greeting and the <p> tag for our main message.

You’ll notice that the default size of the paragraph text is not ideal because it’s too small, but we can change this with the font-size attribute. We’ve discussed the importance of using email safe fonts in our blog a few times before and email-friendly fonts are just as necessary in MJML, so let’s go with Tahoma. For this email, we want to keep the font the same throughout, so instead of adding font styling to each body component, we’ll just add the overall specifications in the head.

Depending on the original size of your image, it may appear too big or small initially, so let’s also add some styling. Similar to HTML, you can change an image’s size using the width attribute, and if you use the “href” attribute with an <a> tag, you can make the image clickable. 

Let’s now play around with the H1 greeting. To change the color of the text, we’ll use the color attribute and to make the text pop a little more, we’ll bold it with font-weight. If you’re familiar with HTML, you’ll notice that all of these styling attributes are identical to the ones you’d normally see in web development.

Finally, for the call-to-action, let’s create a button. For this step, we’ll use the <mj-button> tag and insert our CTA phrase. To decorate the button, you can change the color using the background-color attribute and use a hex code of your choice. To manipulate the size of the button, we’ll use the width attribute. In our example, we used a percentage to keep the button responsive according to the viewport, but you can also use other sizing units, such as pixels. As for the actual text, changing the font size, font color, and font weight are all the same as before.

Converting MJML code into HTML. 

After converting your MJML into HTML, whether you copy or export the code, you’ll also notice that there are many more lines of HTML code than there are MJML code. The email we coded above was only about 20 lines long while the HTML is almost 200. But why? When you look closely through the HTML, you’ll notice all the extra styling and nesting that you would’ve had to do if you had been solely working with HTML. However, all of this additional HTML is nestled snugly within the simple lines of code you just created with MJML.

Another great perk of MJML is the ability to minify your code. Certain email clients will cut off emails if the size of the email is too big (for Gmail, the limit is 102kb), but you can avoid this by making the file size smaller, which is also known as minifying the code. MJML will give you the option to do this when you’re ready to export to HTML.

Conclusion

This was only a taste of what can be done with MJML. Once you get the hang of it, you’ll be able to build complex, innovative, and even interactive emails in less time, with less code, and, as a result, with less frustration. If you would like some more tips on how to create your own emails with MJML or if you need templates built for you, check out our post of MJML examples and everything you need to know about MJML. Finally, reach out to our team at Scalero to get started!

Full code as explained above: