MJML for email is what React Native is for mobile
React Native has changed the way we do mobile apps. We absolutely love it. But there is another technology that deserves an award.
It’s MJML by Mailjet.
Email tech is bad
I don’t know a front-end dev who enjoys creating templates for emails (they rather hate it). It’s just the dark ages again. There are many poorly written email client engines in the wild (e.g. Microsoft Outlook) and that’s even worse than browsers in the hardcore times of IE6–9.
Look at the advert below:
This is how a popular email testing service advertises itself. When they say there are many email clients they really mean it.
Styling is a nightmare
Do you want the layout to look nice? You have to use <table>.
Responsive? Well… better put the whole layout in 600px wide box and do responsiveness through tables.
Global styles? Nah, put everything inline.
Showing images in a nice way? We shouldn’t even start this conversation.
Yes. It’s just difficult with a lot of quirks and you can forget about modern development with semantic approach etc.
But there is a solution
Or even better “the solution”! MJML is a component-based framework (finally a modern buzzword 😏) and folks from Mailjet open-sourced it.
The premise is “Write less, save time, and code more efficiently” and we found that being accurate. The component approach makes a lot of sense here. Instead of trying to make the whole email layout perfect, they try to provide a perfect implementation of bricks like a button, divider, image, column, row, or even a carousel! In an email!
Perfect bricks are not a guarantee of a perfect email implementation but it increases the chances for one. The documentation is pretty cool as well so we recommend giving it a try!
We don’t use it in a typical way
When it comes to us, it’s not about sending emails to our clients. It’s about our clients sending emails to their clients.
We aim to provide salon owners not only with software to manage their salons but to also run marketing campaigns and appearance/brand online.
So we created an email editor for them. With lots of templates ready to use that cover topics around the hair&beauty industry, as well as for special occasions like client birthday, before Christmas fever, Black Friday, etc.
MJML lets us do it in a very predictive way. We can (kind of) follow their documentation and convert options into interactive elements. Like here with adjusting button’s appearance:
We operate on a set of defined properties and then it is translated to real HTML via the MJML library. Speaking of the button from the video, take a look at generated markup and CSS:
That’s a lot of inline styles to make sure a button looks ok, but would you ever thought of setting mso-padding-alt? I would not.
It’s a declaration of an alternative style for Microsoft Outlook and I can only imagine how much of a hassle it can produce.
But we don’t have to worry about it.
Hey, it’s responsive! 🎉
Can you imagine how many people use their phones when commuting or sitting in a waiting room? Well, we probably use phones everywhere and probably too often. So it’s not a surprise that they read email on smaller screens.
It’s super important for us to provide responsiveness to the emails our clients send. In the majority of cases, they are not aware of responsiveness, mobile-first, and how many pixels we have for our disposal. We need to do it for them.
MJML again helps us a lot with that. Take a look at our real email previews:
The main image gets re-scaled nicely, column layouts get into individual rows, everything is readable without our users even knowing how to do that.
That’s not a crazy difficult layout for web standards but it can be a headache for email.
Summary
That only scratches the surface of our email editor’s functionality but we know that all the goodies would not be possible without MJML. It would cost us much more work and lots of trials and errors.
Despite our advanced use case, next time you have to cover email templating in your application give MJML a try. You won’t regret it 💌.
Tomek Nieżurawski writes also on his own blog — tomekdev.com.
We are always looking to speak to amazing engineers about joining the Phorest team. You can check out open roles here.
