Developing Responsive Emails With MJML Framework
Emails play an important role in any business, Whether it’s marketing or an IT company; emails helps everyone to engage with customers.
Being a front-end developer, I know that every developer at some point suffers in the development of the responsive email; which have to be consistent on all platforms whether its desktop, tablets or mobile.
65% of emails email is being opened on smartphones
Why we migrated from typical HTML emails to MJML framework?
The main reason for migrating from typical & boring HTML emails to MJML framework was that the HTML emails template structure was difficult to handle. As we all know that the emails are based and developed on tables sometimes the structure get disturbed; writing inline CSS for each tag is quite hard and difficult to manage.
On the other hand; MJML manages all the hard work for you. You don’t have to worry about writing the inline-CSS for each and every tag, MJML takes cares of that plus it makes the entire email structure responsive.
Introducing MJML for Developing Responsive Emails
MJML stands for Mailjet Markup Language is an open-sourced markup language. MJML is the framework which reduces the pain of coding the responsive emails. MJML have the similar syntax like HTML.
MJML offers a lightweight app that makes the developer life easy to develop responsive emails within 15 minutes. Yes! you read it right; now you can easily develop responsive emails within 15 minutes (if you have previous experience with email development). You can download the app by clicking here.
Developing your first email on MJML
MJML document starts with the <mjml> followed by <mj-head> or <mj-body> tag or it can include both; this will serve the purpose of head and body of a HTML document. Below is the example of basic structure of MJML.
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>Hello World!</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>MJML Container
<mj-container> is the starting point of the email. All the email components should be included inside <mj-container>
<mjml>
<mj-body>
<mj-container>
<!-- Your email goes here -->
</mj-container>
</mj-body>
</mjml>MJML Sections
<mj-section> helps us to divide the email template into different section. In the below mentioned code snippet; we divided the email template into 6 sections.
<mjml>
<mj-body>
<mj-container>
<!-- Company Logo -->
<mj-section background-color="#f0f0f0"></mj-section>
<!-- Image Header -->
<mj-section background-color="#f0f0f0"></mj-section>
<!-- Introduction Text -->
<mj-section background-color="#fafafa"></mj-section>
<!-- 2 columns section -->
<mj-section background-color="white"></mj-section>
<!-- Social icons -->
<mj-section background-color="#fbfbfb"></mj-section>
<!-- Footer -->
<mj-section background-color="#f0f0f0"></mj-section>
</mj-container>
</mj-body>
</mjml>MJML Column
<mj-column> helps you to manage the content horizontally in your email. <mj-column> must be included under <mj-section>. <mj-column> can be upto 4 times in one <mj-section>.
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<!-- Your first column -->
</mj-column>
<mj-column>
<!-- Your second column -->
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>MJML Image
We can display a responsive image in emails by using <mj-image> tag; it is similar to HTML <img> tag.
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-image width="300" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>MJML Text
<mj-text> allows you to add text in your mjml email template.
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
<h1>
Hello World!
</h1>
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>Developing a basic email template
I have develop a basic template for the readers of this post to give your email project a kick start and to understand the basic structure of MJML email template. You can download the template from my github repo click here. Below is the design of the basic email template.
Conclusion
My main reason for choosing this topic is to give you the basic idea of MJML which can be helpful for every person who have to develop email templates.
