Building Responsive Email Templates with MJML
As someone who loves web development, the one thing that I dread the most is coding email templates. The need to strictly rely on HTML tables is extremely frustrating, considering the fact that web is now at a place where it’s able to take advantage of responsive frameworks, such as Bootstrap.
Why Are Emails So Hard to Deal with, Even in 2022?
A huge factor for these limitations are, in fact, email clients, with the most notorious candidate being Outlook. Building your custom email template through code is an exhaustive task due to the lack of support clients provide for CSS and HTML code, along with their standards set for rendering emails.
For example, using responsive CSS techniques, such as Media Queries, are not viable options since they are only supported by a limited number of email clients. This makes the task of developing a responsive email template a nightmare that I often like to avoid.
So What Would Be the Ideal Solution?
Great drag-and-drop builders like Hubspot, Stripo and Email Octopus makes creating responsive emails a lot more convenient.
But building a custom email template from scratch is often a task developers run into, especially if drag-and-drop builders are not able to cater to specific requirements.
After hours of research trying to find a more ‘developer-friendly’ approach, a quick tour through Reddit lead me to discover this fantastic framework called Mailjet Markup Language (MJML).
A Modern-Day Savior for Responsive Email Design
MJML is a framework, developed by MailJet, that is used for building responsive email templates. It eliminates most, if not all, blockers that are present when it comes to coding responsive emails.
The framework was built with developers in mind so that coding email templates can be just as quick and easier as using a drag-and-drop builder.
Think of it as Bootstrap for email clients, making it much easier for you to develop the perfect email template through responsive layouts and reusable components.
It only takes about five minutes to power through the basic tutorial and it’s more than enough to get you started.
The documentation is very thorough and to make things easier, there are pre-built templates to jump-start your development. You can even customize these templates through their Live Code Editor, which is quite convenient for anyone trying to test out the framework.
Why MJML Is a Game-Changer
Here’s a few key reason why this framework will change the way we develop responsive email templates:
1. Custom syntax that’s easier to code with
Writing HTML can be tedious when coding email templates. MJML offers a much better alternative with their very own markup language. It helps you to write less code and do things more efficiently.
As for the final output, the framework will convert the MJML syntax into a usable HTML file that is compatible with all email clients. To give you a perspective of how much of a difference it makes, take a look at the screenshot below.
With just a few blocks of code, you’re able to create a simple email layout, which would not be the case if this were to be done using traditional HTML.
2. Responsive grid system
Similar to Bootstrap, MJML offers its very own responsive grid system that includes Rows and Columns. This makes structuring the layout a lot easier and enables you to build a responsive email template that reacts dynamically to all screen sizes.
3. Email client support
When building custom emails, it’s important that the template functions well across all email clients. This is a painstaking task that developers have to tend to, which often leads to compromises that would hinder the vision we set for a good email design.
With MJML, you never have to worry about email client optimization. The framework will make sure the template you build is optimized for all available clients, including Outlook.
Furthermore, the framework is able to keep up with client updates so we never have to worry about our email templates breaking with new changes.
4. Component driven development
MJML provides an extensive list of components that we can use to build the perfect email template. Instead of wasting time trying to recreate layouts and designs, we can make use of components that are readily available in the framework.
For example, if there’s a need for a navbar on your template, instead of developing this from scratch, you can use a component called <mj-navbar> to easily create a functional and responsive navigation.
5. Custom component support
MJML goes a step further by allowing us to build our very own custom components that we can use on our templates.
Community-driven components are also available in the documentation. Right now, it’s only a handful of options but the ability to design your very own component is something that would help your email designs to stand-out.
Let’s Talk About the MJML App
There are many ways to setup and use MJML, including a package option and a VS Code plugin that contains the framework. Tools built by the community are also available to help you set everything up and even expand the use of the framework.
But the one approach I’d like to highlight is the MJML App, which is a desktop application that comes with the framework and other features built into it.
Think of it as an IDE designed specifically for MJML development.
The app is the quickest option to setup and start using the framework without having to worry about pre-requisites or knowledge outside of the official documentation. I’ve been using it for a while now and it’s much easier to maintain everything related to email templates on this single app.
Not only can you code the markup language right out of the box, it also gives you the option to send out test emails as well. Although this requires you to sign up to MailJet to grab an API key, it makes things much more convenient for developers.
The Future of Responsive Emails
Looking at the current state of email, it’s obvious that email clients are still out of date and has made little to no advancement over the years in terms of bettering the way they render email templates.
While we can argue and point fingers at Outlook for being a big reason, we can all agree that frameworks, such as MJML, are a major win for responsive emails. It’s great seeing these solutions come to life as it helps us, the developers, to look at coding email templates in a more positive way.
Being an open-source framework, I cannot wait to see how the community expands MJML so that it could reach it’s full potential and become a go-to solution for developers looking to build responsive email designs.
Thank you, Reader!
I appreciate you taking the time to read this story. I hope it was insightful and valuable! Please feel free to leave your thoughts, feedback and suggestions in the comments below.
Have a great day!
