Simplifying email template creation through the use of MJML framework
I have been helping the eCRM(email marketing) team in Smartbox with technical issues when it comes to HTML emails.
When I started out assisting with HTML emails I considered myself well versed in HTML/HTML5 & CSS/CSS3.
However, I have quickly learned that when it comes to HTML emails, most of the new progressive techniques used in developing for the web need to be reversed when addressing template creation for emails.
The archaic table layout that has long been replaced by div based layouts, layouts with flexbox and CSS grids for normal web design still prevail as the standard by which the email newsletter structure should be built.
This structure is used for the purpose of achieving consistency of aesthetic across all email platforms. Outlook is notoriously difficult to get consistency across all versions and conditional statements are often utilized to ensure performance is similar across platforms.
Example of Outlook conditional statements:
In the above code through use of the conditional statement, Outlook is targeted specifically.
It is important to understand HTML and how tables are structured. It’s been a while since they’ve been used in normal web layouts so those with an interest in developing emails could refresh on the basics of creating HTML tables.
In this article, I’ll aim to take you through an example of how we quickly created an HTML newsletter with the MJML framework. MJML simplifies the newsletter build by generating the responsive code for mobile and desktop view on the fly. With knowledge of only a few MJML tags and a basic understanding of HTML/CSS and the old table layout, responsive mails can be generated quickly with minimal effort.
You can see below the structure of the mail using the MJML templating language.
Commonly used tags are:
- <mjml>
- <mjml-body>
- <mjml-section>
- <mjml-column>
- <mjml-text>
- <mjml-image>
As with HTML, any opened tags in MJML must have a closing tag. The template tags are intuitively named and armed with images and content a mail can be created with a minimum of effort, however, if further explanation is needed the documentation can be referenced.
This link will direct you to this online editor: https://mjml.io/try-it-live
The documentation is excellent and description of tags can be accessed here: https://mjml.io/documentation/#components
There are, however, tags like <mj-carousel> and <mj-accordian> which are tempting to use but they do not appear to perform well on all browsers so it is important to research the tags to see if they are supported across all.
MJML also provides pre-built and starter templates, however, it is a very quick process if you start your own build. The starter templates are a good pointer on how to structure your code at the beginning.
You can toggle between mobile/desktop/raw HTML which is user-friendly as you don’t need to view in a separate tab.
You can also view the plain HTML as illustrated below:
Comparing the length of each file will identify significant time savings. As can be seen below, the length of the MJML is circa 8 times less than that of the generated HTML file:
Desktop View
Mobile View
So far all looks ok and was generated with little difficulty. The next step is to run a test in the CRM package of choice. At Smartbox we use the Cheetah suite as a CRM tool.
After the test is run, we can preview the result on emailonacid (www.emailonacid.com) to see if it’s a viable option. We need to assess the look and feel to ensure that it is consistent across email browsers. Some are more important than others but it is essential to have it previewing well on most, if not all.
Mobile
Pick Device/Screen size (iPhone X)
Desktop
Pick Device/Screen size (Gmail Chrome)
There are great blogs out there which will guide your learnings on building for email, however, this is a particular favourite: https://litmus.com/blog/
As referenced from this blog, below is a list of the current top 5 browsers that need particular attention. This allows us to be extra careful that we are being as closely aligned to the design as possible for these top performers:
It is great that this simplifies the build and significantly shortens the length of time unnecessarily coding mails, however, it is important to state that this is only viable if it’s tested and performs well across email browsers.
With this in mind we tested our generated HTML file. Running this through emailonacid produced positive results (as seen in screenshots above). It performed really well across most platforms.
There was a minor issue with Outlook 2007 (this is not essential in terms of performing well on this platform) however, this could be addressed if needed. We now have the possibility of creating a new responsive email from scratch with a quick turnaround (less than one day) if content and image assets are at hand.
There is not much of a learning curve with MJML. It is very self-explanatory and can be of great benefit when trying to avoid the perils of creating an HTML email template with pure raw code.
It is a great tool to quickly build newsletters that work responsively.
I also work with the eCRM team on exploring animated/more complex interactive effects that may be achieved within the confines/constraints of email development. This involves more complex coding and is beyond the functionality of MJML at present.
I think for the most part that MJML is a tool that should become an essential part of an email developer’s toolkit to accelerate the development process and I recommend that you explore this and with minimal effort, you’ll be impressed with the effects that can be quickly achieved.
References:
