How to create a responsive email template using MJML
When it comes to email marketing, you have seconds to catch the user’s attention, deliver easy-to-digest content, and finally, drive them to click on that CTA and visit your website or blog.
What is MJML Anyways?
As described on its Website, “MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase.”
In a few words, MJML will save hours coding our emails for multiple clients, make responsive emails a reality, and ensuring our brand and message is consistent.
Getting Started
Enough talk, the first step is to create a polished cross-client email template is download MJML on this link https://mjml.io/download. You can install MJML on OSX, Linux, and Windows using npm, there’s also The MJML Desktop App which provides a visual experience, compile files into HTML, minify, and even send test emails to your favorite desktop or mobile client
At this point, you might be asking what these bunch of lines of code represent and how do they make my job easier and better. Well, MJML converts simple tags into cross-client responsive email templates. To illustrate this visually, We’ll compare MJML before and after compiling into HTML
When it comes to email marketing, you have seconds to catch the user’s attention, deliver easy-to-digest content, and finally, drive them to click on that CTA and visit your website or blog.
What is MJML
As described on its Website, “MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase.”
In a few words, MJML will save hours coding our email for multiple email clients, make responsive emails a reality, and ensuring our brand and message is consistent.
Getting Started
Enough talk, the first step is to create a polished cross-client email template is download MJML on this link https://mjml.io/download. You can install MJML on OSX, Linux, and Windows using npm, there’s also The MJML Desktop App which provides a visual experience, compile files into HTML, minify, and even send test emails to your favorite desktop or mobile client
At this point, you might be asking what these bunch of lines of code represent and how do they make my job easier and better. Well, MJML converts simple tags into cross-client responsive email templates. To illustrate this visually, We’ll compare MJML before and after compiling into HTML.
Creating our first responsive email
Now that we’ve seen the benefits of using MJML, we’ll start by mentioning the basic tags to create your first email template:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>
<h1>Hello World!<h1>
</mj-text>
</mj-column>
<mj-column>
<mj-image src="https://via.placeholder.com/300x300" />
</mj-column>
</mj-section>
</mj-body>
</mjml>As you can see in the example above, the syntax is very similar to HTML, you can save hundreds of lines of code, email client conditionals, and media queries for mobile devices are no longer required.
Here’s a short description of the very basic MJML tags, If you want to learn more about the universe of tags available for you to use, visit https://mjml.io/documentation/
- MJML: As most of the web documents, you need to start with the tag related to file type, in this case <mjml> at the beginning of your document and </mjml> to finish
- mj-body: Just like every HTML document, the body tag contains the content of our email that’ll be displayed when you open the email
- mj-section: this is the backbone of your email content, sections allow to insert columns, and within columns, tags like text, image, and many more. If you’re familiar with responsive frameworks like Bootstrap, consider this tag a row
- mj-column: This tag allows you to horizontally divide your content, and the placeholder of your content, you can specify the size of columns by percentage and pixels. Keep in mind these columns will stack on mobile and turn into full with.
- mj-text: Pretty obvious, Text! you can use this tag to insert any text you may want, h1, h2, p, ul, li tags are some of the allowed tags, and you can define styles to every tag within the mj-text
- mj-image: Add responsive images with attributes like alt, href, and many more
Compiling
MJML Desktop provides a simple approach to this, simply click on the Copy HTML button and paste it on your preferred email composing and/or digital marketing tool.
There’s also features to export HTML, generate screenshots, and even send test emails, these are great tools you can use to gather feedback and usability tests from collaborators.
If you like this story and want to check how to unleash the power of responsive email marketing, testing across devices, integrate with tools like MailChimp, Pardot, and Hubpost, please follow and recommend this story to any friend or colleague.
