This is the only file we will be working on. Create a new directory and add a template.mjml file. If you are using Atom or Sublime Text, there are also various helpful plugins that you can install if you want. Once you have that covered, open up a terminal window and install MJML globally, providing access to the mjml command. To install it you will need to have Node.js on your machine, preferably v6.6.0 and above (we are using v6.9.5). The easiest way to get started with MJML is using the framework's CLI. In real scenarios you want to have a template and some sort of system to generate newsletters every time you want to send one. The layout consists of four major sections:įor the sake of this tutorial we will fill the email with static dummy data. The finished MJML template, as well as a compiled HTML version can be downloaded from the Download button near the top of the page. The Designįor a tasty example we will be making a simple pizza-themed newsletter. By constructing our template out of MJML components, we make sure that we won't use any non-email-proof CSS properties or HTML tags. The framework offers a rich set of standardized components with various customization options. MJML on the left, Email-ready HTML on the right This way we don't have to manually code entire layouts out of tables and legacy in-line styles. MJML provides a simple XML-like language that can be compiled to email-ready HTML. Disclaimer: This tutorial contains images of delicious food.
MJML TUTORIAL HOW TO
In this tutorial we will show you how to use the excellent MJML framework to make your own unique email templates.
One way to make email development easier is to use a framework which will take care of most of the above-mention issues. So yeah, just like making websites, only infinitely worse. The only difference is that layouts have to be constructed using, CSS styles have to be written inline, and you have to support clients so out of date, they use Microsoft Word for rendering. Making HTML emails is just like building websites.
0 kommentar(er)
