How MJML let personal newsletter service Revue develop a new email theme that just worked

Martijn de Kuijper
Revue
Published in
4 min readMar 14, 2017

--

Every web developer loves to try out new stuff and use the latest technologies. Unfortunately, that does not apply to HTML email. Far from keeping up with the astonishing pace of regular web development, it often reminds us of snail mail delivered by the postal service. Implementing an email newsletter is like getting out of your Ferrari and stepping into an old three-wheeler.

Luckily, we make newsletters our main business at Revue. Our users choose to work with us so they can focus on the content of their email digests instead of spending valuable time on coding templates.

During our first two years, the intricacies of HTML email were not an issue. We offered one simple and clean template that people could use to get their thoughts and content into people’s inboxes.

But this changed recently, when it became time to introduce Revue Themes. We foresee developing more templates in the future and each needs to work well in all major email clients. To help with this task, we decided to take MJML for a spin.

We wrote this article to share how we saved time when implementing a beautiful design that works in all email clients. I recommend Nicolas Garnier’s tutorial “Making Responsive HTML Email Coding Easy With MJML” for a complete overview.

MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. It compiles markup into HTML that is compatible with email clients. It offers a set of components that you can use as building-blocks for your newsletter (e.g. text, images, columns, etc.). This makes the whole process of creating an HTML email a breeze, and a responsive one at that!

For example, I always found creating columns that wrap on mobile challenging, but here’s an MJML example that just works:

You see what I mean with “a breeze”?

One of the few downsides is that MJML doesn’t support media queries yet. This is unfortunate since all email clients do since Gmail’s announcement to support them. The creators of MJML assured me they’re working on a new release that does support media queries.

Creating the theme

At Revue we aim not to be just another email marketing service. We help people get their thoughts and ideas out there via email without having to worry about things like design, deliverability etc.

One of Revue’s core features is a visual editor. Authors drag and drop articles from various content sources like Twitter, Facebook, or Pocket to compose a newsletter.

Other than that, we keep the design clean. There is a limited set of “content types”, i.e. links, images, headers and (free-form) text. And we keep the feature set intentionally limited.

At the beginning of the project, we laid out all the different elements of the newsletter and created a consistent set of guidelines for them.

Grid and typography

It was straightforward to translate these guidelines into the appropriate styles in MJML. The markup language offers a<mj-style> tag to add custom CSS. A caveat is that everything you include here will end up inline (hence the limitation of not being able to use media queries). You can also use the <mj-attributes> tag to change the default attributes on any <mj-tag> or add a <mj-class> attribute to them.

As the example below shows, these were the perfect tags to use in our case. We were able to reset styles where needed (not sure why they add default paddings and such) and to define the style of every element in our template:

This made it easy to create every element in our newsletter. The only thing left to do was to define the layout of the elements and we were set.

Testing
You know what the best part was? Aside from some minor “bugs” the template immediately worked in all email clients! I used my Litmus account (talk about services that solve a certain pain 😱) to test the template. And lo and behold, even the first version I sent worked with all the Outlook versions. I didn’t expect this even though the template isn’t complicated.

It was cool to try out MJML. It’s a great framework that does indeed make responsive email easy and worked very well for our new theme. Now the gap between the three wheeler and the Ferrari is much smaller and that is big progress for the world of email!

--

--

Founder of @revue – Get your thoughts into people’s inboxes. Previously founded Fosbury and Yunoo. @Techstars alum.