A beginner's guide to creating responsive emails using MJML

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. For example, you can use Figma to design emails just the way you want and export those designs as code. In fact,  there is a tool called Cannoli that can convert those designs into responsive HTML code for you in mere seconds. But if you’re looking for even more control over the look and feel of your templates and you want to learn more about how to actually code emails, then you should consider 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. On the other hand, you’ll quickly learn that using HTML and even CSS can be quite difficult when it comes to email design. Most email clients don’t allow external CSS sheets, which forces you to do all of your styling within a HTML document. When you throw in the necessity to code for responsive design, you open yourself up to making mistakes or having clunky 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 multiple ways to use MJML

You have the option to use MJML’s online code editor, download their web app, download a variety of plugins that can be used with your existing code editor, or install MJML locally onto your computer if you’re familiar with Node.js and NPM. For a full list of available ways to use MJML, check out our MJML FAQs post.

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.