Home Email Marketing Getting started with MJML: How to program responsive emails

Email Marketing

Getting started with MJML: How to program responsive emails

January 4, 2025

https://blog.5gigbucks.com/create-your-very-own-auto-publish-news-blog-site-and-earn-passive-income-in-just-4-easy-steps/

No matter who is on your list or what industry you are in, statistics show that a significant portion of your subscribers open emails on mobile devices. This shouldn't be surprising since mobile devices do almost everything for us.

However, we have all opened an email on our cell phone and been frustrated by its “mobile unfriendliness.” Designing and developing responsive emails is no longer just an option, but absolutely essential.

It can be quite easy to find responsive email templates provided by your ESP. But what if you have an idea that you need to implement from scratch?

As long as you have some basic programming knowledge, MJML is an intuitive open source framework that can help you get the job done.

What is MJML?

MJML stands for Mailjet Markup Language and was created by a group of developers at Mailjet (now Pathwire) who wanted to help developers code email more easily and efficiently. That's why they developed a markup language that simplifies and automatically generates the complexities of responsive HTML.

Since 2015, MJML has been a leading email development framework that has personally saved me hundreds of hours of email development time.

What do I need to know to use MJML?

To use MJML effectively, it is helpful to have basic knowledge of HTML and CSS. The syntax is very similar to HTML (with opening and closing tags) and you still use CSS syntax and declarations to style your email.

There are numerous courses to help you learn HTML and CSS. W3schools and Codeacademy have excellent beginner programs that will get you up to speed.

Install MJML

There are several ways to set up MJML on your computer:

If you are a software engineer or developer and are familiar with a CLI (command line interface), you can install MJML with NPM to use it with NodeJS or the CLI

You can also use a plugin or package with your favorite IDE, text editor, or task runner:

There are a lot more you can explore here, but the ones mentioned above are the most popular and some of these options are actively managed by the MJML team.

If you don't know anything about the above programs or methods, you have two options:

Where do I start with MJML?

MJML.io has an excellent getting started tutorial that explains the basics of the framework.

You should also visit the MJML documentation in a browser, as this is the sacred reference document for whatever you want to achieve.

The responsive email template consists of two basic “blocks” that you use to create an email:

– The tag that identifies a horizontal section of an email template
– The tag in one that indicates how many columns are in each section.

Example: Here is an email template with one column:

Hello World

Here is a “Try it Live” example of this: https://mjml.io/try-it-live/X2PkY8n5Taw. Click on the arrow right side to preview the email.

And here is an email template with two columns:

Here is some text

Here is a “Try it Live” example: https://mjml.io/try-it-live/OUEKlwUUcxG

You can see how this template is responsive and automatically adapts to smaller screen sizes by clicking the mobile icon at the top of the Try Live preview.

Once you have the structure in place, all that's left to do is design and customize to ensure your template is optimized and accessible.

Creating a simple MJML email template

Here is an example of a basic MJML template and its various components. You can find more examples of MJML templates on their website.

Step 1: Creating a top navigation device

First, we can start by adding top navigation to our template: https://mjml.io/try-it-live/WikDMWFA582

Some things to keep in mind:

It's important to set the width of each individual element, otherwise spacing inconsistencies may occur. We typically use a width of 600 pixels for emails. So if you set the first one with the logo to the logo size (200 pixels) and then the second one to the remaining space (400 pixels), you can better define the spacing for it
and have default padding, so you'll need to adjust this or set it to padding=”0px” to fit everything.
Adding vertical-align=”middle” is necessary to keep the text links in line with the logo, but you may need to add additional spacing to keep everything centered and aligned.

Step 2: Creating a Main CTA/Hero Section

Next, let's create a main CTA area with a background image: https://mjml.io/try-it-live/Q8Qs8tofE0x

Important things to note:

If you use a button with a background image, you must set padding-left=”0px” and padding-right=”0px” to center it in Outlook.(This is capitalized as an important reminder as it is not mentioned in the documentation.)
Even if you use a background image, always set a background color that highlights your text so that your text continues to appear in email clients that don't automatically enable images (like Outlook).

Step 3: Create a body paragraph

Next, we'll create the supporting copy section. Here you can do other fun things like add more columns, more images, etc:

https://mjml.io/try-it-live/R8Dsmh8o7vn

Step 4: Creating a Footer Section

Here we can use MJML tag. If you don't like these icons, you can simply use your own images.

https://mjml.io/try-it-live/RRz85Fr-8CB

The finished product

After making some adjustments to font sizes and spacing, this is what we came up with: https://mjml.io/try-it-live/RRz85Fr-8CB

From here we can take the MJML code we created and compile it so we get responsive HTML! All we need to do is click on the “View HTML” link above and we can copy/paste the HTML code to use with our ESP. The next step is to run this HTML via email in Acid's campaign precheck to make sure everything is optimized correctly.

Interactive MJML components

Now that you know how to create a basic template, you can use some of the other cool, interactive built-in features that MJML offers:

– An interactive carousel that you can use with different images. (May not work with Yahoo and Outlook)
– A clickable drop-down menu that allows you to stack content into tabs. (May not work with Windows based clients and Gmail app)
– A “hamburger” menu option that hides menu items on mobile devices. (May not work with Outlook and Gmail app)

Since there is no universal support for these interactive email components, it is important that your content is structured so that the “fallback” for these components continues to work and look good. That's why it's important to test every email before sending!

Email design and development tools

Here are some helpful tools I've used with MJML that have aided my email development workflow:

Atom.io – Great text editor with an MJML plugin that allows you to preview the email in the editor
Zeplin.io – This tool is invaluable if you work with creative people designing emails. This pulls designs directly from Adobe, Sketch, and other design tools and shows you accurate dimensions, spacing/spacing, and image exports, saving a ton of time so the email looks exactly like the design.
Adobe Illustrator, Adobe
Email on Acid Account – A shameless plug, but fully testing your emails is an essential part of the email development process. Unlimited email testing is also a huge benefit for email developers.
Reallygoodemails.com Collection – A great design resource that also shows you the code of each email template.
ezgif.com – Really quick and useful tool for resizing and compressing GIFs you want to use in emails. Especially if you're trying to keep the GIF size under 3MB.

9 helpful MJML development tips

If you have problems with buttons on a background image, set padding-left and padding-right to 0px for buttons with a background image. This ensures that the button is centered in Outlook.
Always use a fallback color for a background image for clients that do not automatically display images.
Always specify a line height, especially for larger font sizes where Outlook tends to truncate text. allows you to define default values for components so you can set a specific row height.
You can't “nest” it. If you think you need to insert two columns within a column, maybe try one within a . Might also be another option you can consider.
If you need more than 4 columns in a given section, consider using this instead. Using this feature doesn't work on mobile devices, so using it is probably best for smaller content only.
Basically, there is a standard spacing for each MJML tag (, , etc.). So if you have problems with the spacing, try adjusting the spacing to 0 pixels first.
If you don't want your columns to be stacked on mobile devices, use before the “s”.
Minify HTML is recommended when exporting your HTML code for use with your ESP. Try this option if you have issues with stacking on mobile devices.
Always test before sending! Use campaign pre-checking to ensure links are valid, your spelling is correct, your email is accessible, and displays correctly in all inboxes.

Discover everything MJML offers email marketers

This is just the tip of the iceberg for MJML. There is much more you can do. A possible next step could be to set up reusable attributes in “s”, “s”, “s”, etc. so that you can save even more development time. Hopefully this gives you a good starting point and at least some basic knowledge to build on.

Author: Trevor Rawls

Trevor is the Digital Marketing Manager for Email on Acid. Before joining Email on Acid, he developed marketing strategies for companies in the technology, education and e-commerce sectors. Trevor owns two cats that he walks on a leash in the Denver metro area.