The newsletter is a trend that is coming back into fashion at the moment. A few years ago we thought it had been replaced by social media, but it is still here and its popularity keeps on climbing.
This growth is mainly down to the practice of marketing automation and therefore to the automation of tasks (including emailing). This week, the Numendo editorial team invites you to discover the MJML framework: a tool that will allow you to create beautiful newsletters optimised for all types of screen!
A framework that meets the needs of the newsletter
Whether you are a developer, a communications officer or a community manager, you have certainly sent newsletters — but above all you have all run into the same problem: compatibility. It is complicated to send a newsletter that displays correctly across all clients (Gmail, Outlook, etc.) or on all types of device. That is exactly the problem MJML set out to tackle!
Easy to get to grips with
The language is very intuitive and easy to learn: it is very close to HTML and is used via an API. A newsletter built with MJML looks like an HTML page (with a few exceptions); here is a preview of a basic DOM:
See the Pen eKrqOZ by Aaron (@leox47) on CodePen.
This code displays a header with a background and a title, all in colour. At first glance we can see many similarities with HTML but also with CSS. We can also see that there are various tags that make it possible to structure the newsletter better, but also to insert components you won’t find elsewhere.
Which components are available in MJML?
They can be used in two places: in the head and in the body. Here are a few features that caught our attention.
The components of the head tag
These modules are in fact fundamental elements that we use in HTML/CSS. Here they are presented in a simplified form. Here are some of these components:
mj-breakpoint: makes it possible to insert a breakpoint as in CSS (desktop/mobile)mj-font: makes it possible to call fonts embedded in the filemj-preview: displays a preview of what will arrive in the recipient’s inboxmj-style: makes it possible to define the CSS style that will subsequently be applied to the HTML
The components of the body tag
At last, modules that make it possible to build original, well-designed newsletters! Here are the body components we find most interesting:
mj-accordion: makes it possible to create a small customisable box, with the option of inserting textures or text into it.
Example of the accordion module in use. (source: mjml.io)
Here is the code corresponding to the module (source: mjml.io):
See the Pen mKLNJG by Aaron (@leox47) on CodePen.
mj-carousel: as the name suggests, makes it possible to display a carousel of images. You then have the option of scrolling through photos either via arrows or by hovering the mouse over the image thumbnails below.
Demonstration of the carousel (source: mjml.io)
The corresponding code (source: mjml.io):
See the Pen aKGedw by Aaron (@leox47) on CodePen.
mj-wrapper: a module that makes it possible to wrap several sections together. You can insert background images or border styles, as in CSS.
The corresponding code:
See the Pen zajgBZ by Aaron (@leox47) on CodePen.
A community that contributes to improving the framework
Like most web development tools, the project is open source and you can contribute to it via the project’s GitHub and npm pages. This community work has made it possible to improve the framework and even to create new components, such as mj-chart, which makes it possible to display charts as images in emails.
As you will have gathered, MJML is a framework that makes creating newsletters far easier. We encourage you to try it out and send us your creations!
You can always follow our blog to keep up with the latest web development trends.
