Just like in HTML, our MJML document needs a head and a body # Watch template.mjml and auto-compile on every change. html, you need to open a terminal in the working directory and run one of the following commands: # Compile template.mjml into output.html Since we are making an email template, any external dependencies (mainly images) have to be included via CDN. It will contain all our markup and styles. This is the only file we will be working on. Create a new directory and add a template.mjml file.
#Mjml section install#
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.
#Mjml section download#
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
#Mjml section code#
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.
#Mjml section how to#
In this tutorial we will show you how to use the excellent MJML framework to make your own unique email templates.ĭisclaimer: This tutorial contains images of delicious food. 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. Sort of like Planet PHP or PHPDeveloper, except this site doesn’t look like it’s from the ’90s.Īll feeds Building Responsive Emails With MJML Interested in having Brevity send out some beautiful, responsive emails to your contacts? Let’s get in touch.This website aggregates the latest news and articles regarding PHP, and presents it in one place. It makes developing responsive emails significantly easier, faster and… dare we say it… fun! We’re looking forward to integrating these new capabilities into our email strategies and learning more about building custom components. The pros of developing in MJML far outweigh those minor cons for us.
We also have the ability to write raw HTML if more columns are truly necessary. The maximum number of columns is four, which isn’t an issue now that we know to design within that parameter.The default width of 600px is not configurable, so we have to adjust it in the resulting HTML.Using components reduces our testing time significantly, and debugging is much simpler when the code is so easy to comb through. The basics of MJML have already been thoroughly tested across all major email clients. The library of components allows us to offer our clients more advanced features in their emails without sinking extra time and testing into them. It simply makes things more efficient and understandable. It doesn’t add any bulk or unused code to the project. One of the reasons we are integrating MJML into our email workflow is that it is super lightweight and flexible. The community surrounding it is super helpful, and it’s clear the team who is building it is really listening to their users and care a lot about the project. Finding information is straightforward and examples were illustrated well. MJML’s documentation is accessible and easy to understand.
0 kommentar(er)
