Intro to MJML: Responsive HTML email coding made easy
Kristina Lauren
September 20, 2021
If you have ever wrestled with coding HTML emails from scratch or wondered why building for the inbox feels so different from designing for the web, you are not alone. Email development comes with its own set of challenges, and that is where MJML can be helpful.
Whether the name is familiar to you or completely new, MJML has become a go-to framework for developers and marketers. It simplifies responsive email design, solves many of the common rendering issues across clients, and allows you to focus more on content and creativity instead of complex tables and inline CSS.
In this post, you will learn what MJML is, why it matters, and how it can make your workflow easier. By the end, you will even get the chance to code your own MJML email. Let’s dive in.
What is MJML?
The world of email design can often feel chaotic. While web development has matured under widely adopted standards and guidelines, email development is still shaped by the quirks of individual email clients. The result is inconsistent rendering and limited flexibility when it comes to building responsive layouts, especially if you are coding from scratch.
This is exactly where MJML helps.
MJML, short for Mailjet Markup Language, was created in 2015 by the Mailjet development team to simplify the process of designing responsive emails. Since its release, it has become one of the most popular frameworks for building emails quickly and reliably. The best part is that you do not need to learn an entirely new coding language to use it. MJML is very similar to HTML, which makes it easy to adopt for anyone with a background in web development.
Why use MJML?
At its core, MJML is a shorthand framework that takes simple, readable code and turns it into robust HTML built to work across all major email clients. Instead of spending hours writing complicated tables and inline CSS, you can write a few lines of MJML and let the framework handle the heavy lifting.
The advantages are clear:
Shorthand syntax: Write less code while keeping it clean and easy to understand.
Responsive by default: Layouts automatically adapt to mobile and desktop without extra work.
Email-safe output: The compiled HTML follows best practices for maximum compatibility.
Customizable: Extend MJML with your own components when you need more flexibility.
Community-driven: As an open-source framework, MJML is constantly improved to keep up with changes in email rendering.
The result is faster development, fewer headaches, and emails that simply work.
How to use MJML
Using MJML is straightforward. You write your email in MJML, compile it into HTML, and then load that HTML into your ESP.
Choose where to code
The easiest option is the MJML online editor.
Write MJML
Try this to start. More on this later.
Copy and paste the rendered HTML
You should see in the editor an HTML output. Copy this HTML and paste into you ESP where you normally upload HTML templates.
Now that we know how to use MJML, let's give you a little more help on how to really use it to create great emails.
Creating a great template with MJML
Okay here we go, you should be able to have a beginner's understanding how to write a great MJML template by the end of this.
It helps to already have basic knowledge of HTML and CSS, but it is 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 are 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 is 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 will notice that we have all of these tags but no visible content yet, so let’s add a logo. The tag for images is <mj-image>. Since this is an email, we want the logo to be the first thing subscribers see. To place it at the very top, create another <mj-section> with an <mj-column> above your text sections, and insert your image URL within the <mj-image> tag.
Depending on the original size of your image, it may appear too large or too small. You can adjust this by adding a width attribute. Similar to HTML, you can also make the image clickable by adding an href attribute inside <mj-image>.
By default, images are centered. For this example, we will keep it centered, but you can also align it left or right if needed.
Now it is time to add some words. To do this, we will use the <mj-text> tag. Inside this tag, you can include headings such as <h1> through <h6> as well as the <p> tag for longer text.
For this example, we will use an <h1> tag for the greeting and a <p> tag for the main message.
Finally, let’s add a call-to-action button. To do this, we will use the <mj-button> tag and insert our CTA text.
You can customize the button with a few key attributes:
Use
background-colorwith any hex code to set the button color.Adjust the
widthto control the button size. A percentage keeps it responsive across different viewports, while pixels give you a fixed size.Style the text with
font-size,color, andfont-weight, just as you would with other<mj-text>elements.
Once you’re finished, you should have something like this:
Once again: converting MJML code into HTML
After converting your MJML into HTML, you will notice that the output is much longer. The email we just built was around 20 lines of MJML, but the compiled HTML is closer to 200 lines. Why the difference? All of the extra table nesting, inline styles, and formatting that are normally required to make an email render properly across clients are automatically added during compilation. Instead of writing all that by hand, you get to work with a clean, simple MJML file, while the framework produces the fully compatible HTML for you.
Another advantage of MJML is that you can minify the exported code. Some email clients cut off emails if the file size is too large (for example, Gmail clips messages at 102kb). By choosing the minify option when exporting, you reduce the size of your HTML, which helps you stay safely under these limits and ensures your full email is delivered.
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!
