A beginner's guide to creating responsive emails using MJML (Updated for 2026)

Responsive emails have quickly become the standard for email design. With more and more people opening emails on their mobile devices, it’s essential that your email campaigns look good no matter what device they’re viewed on. But this can be difficult to accomplish when coding primarily with HTML and CSS.

That’s why we recommend MJML for anyone who’s interested in trying their hand at email design because it makes creating responsive emails so much easier. In this blog post, we’ll introduce you to some of the benefits that come with using MJML and even give you an in-depth tutorial that you can use to design your first email with MJML. 

What is a responsive email?

A responsive email is an email that automatically adjusts to the device it’s being viewed on. Nowadays most emails are optimized fairly well for both mobile and desktop but occasionally you’ll run into one that isn’t. And what will you notice? For one, if an email has only been optimized for desktop viewports, the text will be too small to read, which means you’ll have to zoom in and scroll from left to right constantly in order to make sense of it. Another problem could be that the pictures appear too tiny which means more zooming in, or if the images are formatted awkwardly, some of them may get cut off. There are a wealth of issues that can arise when emails aren’t optimized, making responsive emails a must. 

How to build a responsive email

Of course, the issues with formatting and sizing are a pain for any email viewer, but in this digital day and age where most companies have caught onto the importance of responsive design, an email that isn’t optimized can look spammy, unprofessional, or outdated. 

There are so many free or inexpensive tools out there that can help with creating beautiful, responsive templates. You can use a well-known ESP like Mailchimp or Hubspot, an email design software like Figma or Sketch, and, of course, you can go the old-fashioned way by coding emails from scratch. But you’ll also want to take into account your needs when it comes to email design. 

Using Mailchimp can be great for a small company that is fine with adding their logo or their brand colors to an existing template. However, if displaying your brand’s unique identity is important to you, which is the case for most companies as they grow, you’ll want more flexibility to customize your templates.

Email design software offers a lot of customization. Today, Figma has become the undisputed industry standard for email layout and UI design. You can design your templates pixel-perfectly and use specialized plugins like Emailify or translation platforms like Cannoli to convert those designs into responsive code in mere seconds. But if you’re looking for complete control over the structural logic of your templates, or you want to learn how to actually develop emails efficiently, you should look into MJML.

What is MJML?

MJML is an acronym for Mailjet Markup Language and it was created by a group of developers at Mailjet who saw how necessary it was to have a simple, cohesive method of designing responsive emails. This is because, unfortunately, coding emails isn’t as straightforward as coding for the web. 

Web development is much more standardized than email, and coders have a lot more tools at their disposal with the help of HTML, CSS, JavaScript, and other languages that can work together to build impressive websites across the board. While the email landscape is finally modernizing (with Microsoft actively phasing out classic Outlook for a web-and-Chromium-powered "New Outlook"), email clients still aggressively strip external stylesheets, ignore advanced layout CSS, or run quirky post-processing scripts that warp your design. This forces you to do heavy inline styling within a single HTML document, opening you up to clunky, error-prone code.

This is where MJML comes in to save the day.

Why use MJML?

Companies both big and small use MJML to build custom email templates everyday because it greatly simplifies the process of creating responsive emails. Instead of having to write hundreds or even thousands of lines of code in HTML, MJML condenses the code so that it's much easier to write and read. In addition to optimizing for both desktop and mobile, MJML makes your emails render properly across multiple email clients. You can also convert MJML to HTML with the click of a button when you use official MJML platforms or a plug-in.

But the benefits of learning MJML don’t end there. Here are some other reasons why you should consider it:

• You can learn it quickly

MJML is based on HTML and CSS, so if you already know how to use those, you’re halfway there. For those who still have yet to try their hand at coding, MJML is very beginner-friendly. With great documentation through mjml.io and a robust community of experienced email developers, you’ll be in good hands as you start using MJML.

• MJML is open source

MJML has been created to be accessed, modified, and distributed by the public so that you and millions of other email designers out there can benefit from consistent improvements to the framework. 

• There are multiple ways to use MJML

You have plenty of flexibility when it comes to your workspace. You can use MJML’s web-based online editor, download their official desktop app, or integrate it directly into your current setup. Today, the MJML extension for Visual Studio Code (VS Code) has become the definitive go-to for local development, providing a seamless live-rendering preview right next to your code. If you are comfortable with the command line, you can also install the framework locally onto your machine via Node.js and NPM.

How to get started with MJML

While MJML's official website has excellent documentation for all the basic components that make up MJML, it doesn’t hurt to have a step-by-step guide to help you as you build your first email. Fortunately, we have an in-depth tutorial here where we built a basic email template, explaining each step of the process and including each line of code used.

If you'd still like some additional assistance, don’t hesitate to reach out to us! We can answer any questions you have about email design and even code custom emails for you.