How Using MJML Simplified Our Email Marketing Development - Brevity Digital Design & Branding

We Love MJML

How Using MJML Simplified Our Email Marketing Development

We recently started using MJML to develop our emails, and we’re pretty excited. Let’s face it, developing emails is usually a chore. Between all of the tables, inline CSS, and conditional code for different clients, email development is slow, and the code is usually inefficient to edit. MJML is a wonderful solution to this problem.

What is MJML?

MJML, which stands for Mailjet Markup Language, is a framework designed to make coding responsive emails easier. Instead of wading through countless nested tables, MJML allows you to write simple, semantic code which is then converted to HTML. The output HTML is responsive and compatible with the vast majority of email clients. Writing MJML looks a little something like this:

mjml-section
A snippet of an MJML section

What Makes it Uniquely Useful?

Creating modular code for emails has never been simpler. Thanks to the MJML function “mj-include”, we can build out independent, single-purpose sections that can easily be added or removed. This functionality saves dev time and keeps the code to smaller, more easily digestible files, making it easier to maintain and debug.

MJML also has a components library that further reduces development time and makes it easier than ever to generate compliant, responsive HTML emails. Some examples of standard components are buttons, invoices, hero images, maps, and an interactive carousel. MJML even gives you the opportunity to create your own components, which we’re looking forward to diving deeper into.

Why We Love It

EASY SETUP

There is an online editor, an app, and the ability to set it up locally on your computer. All it requires to get set up is Node/NPM, so after just a few terminal commands we were up and running. MJML’s app, Sublime, and Atom allow you to view the output email right next to the MJML, making life even simpler (plus Atom has a linter, too!).

mjml-view
MJML with live preview in Atom

 

FANTASTIC DOCUMENTATION

MJML’s documentation is accessible and easy to understand. Finding information is straightforward and examples were illustrated well. The community surrounding it is super helpful, and it’s clear the team who is building it is really listening to their users and care a lot about the project.

LIGHTWEIGHT AND FLEXIBLE

One of the reasons we are integrating MJML into our email workflow is that it is super lightweight and flexible. It doesn’t add any bulk or unused code to the project. It simply makes things more efficient and understandable.

MODULAR DESIGN

The library of components allows us to offer our clients more advanced features in their emails without sinking extra time and testing into them.

REDUCED TESTING TIME

The basics of MJML have already been thoroughly tested across all major email clients. Using components reduces our testing time significantly, and debugging is much simpler when the code is so easy to comb through.

 

The only issues we encountered are:

  • The default width of 600px is not configurable, so we have to adjust it in the resulting HTML.
  • The maximum number of columns is four, which isn’t an issue now that we know to design within that parameter. We also have the ability to write raw HTML if more columns are truly necessary.

The pros of developing in MJML far outweigh those minor cons for us. It makes developing responsive emails significantly easier, faster and… dare we say it… fun! We’re looking forward to integrating these new capabilities into our email strategies and learning more about building custom components.

Interested in having Brevity send out some beautiful, responsive emails to your contacts? Let’s get in touch.

  • This field is for validation purposes and should be left unchanged.
START A PROJECT
Back Close

SEO doesn't have to be such a mystery.

Achieve better SEO on your own, by learning to create easy to find and easy to read content. Download our content strategy guide.
Get The FREE Guide
Close