Īfter this we find an mj-preview tag that contains some text. But some do and they get rewarded with prettier typography.
Of course, given the state of affairs, not all email clients support this. If you look at where the href links to, you'll quickly figure out that all this does is load in a font hosted on Google Fonts. Īs the very first child of our document head we have a mj-font tag. Now let's look at all the weird stuff in the mj-head and demystify it a bit. The mj-head is a pretty exciting place where you define all of your styling and meta data! It's probably the most fun part of writing an MJML-based email. So the standard structure looks like so: Inside this root element you have the same sections you're used to from a regular HTML document. As such, each MJML document begins with a simple root tag: It is after all a markup language that tries to spit out HTML. The most complex part is probably right at the beginning in mj-head, but let's start from the very beginning: the root element.
MJML EMAIL CODE
Okay, that was a lot of code and if you're not running yet, I'm proud of you. If the button up doesn't work, you can use this link: Somebody requested a log in from your account. Ĭlick the button inside to log into your account First, let's take a look at the entire template as it stands and then let's take it apart bit by bit. It's not particularly complex, so I think it's a perfect fit for a first go at MJML. It's a magic link email I'm using for a meeting tracker app I'm currently building. Mjml -config.minify email.mjml -o email.htmlĪs an example email to build I will pick one made by yours truly. # Watch an MJML file for changes and recompile automatically
MJML EMAIL HOW TO
To learn how to use the command-line tool in detail, be sure to check out the excellent documentation.īut as quick summary here are the commands you will most likely want to use # Compile the MJML file and save it to an HTML file I admit that I mostly use that one, simply because it's super convenient to see your email right next to your code.
If you're not part of the web crowd and don't have MJML or if you just want to try it out and save some time, you can also use their online playground. You need only run the following command and you're good to go. Installing MJML is quite simple if you have npm or yarn installed. And this is your whirlwind guide to building HTML with it! So let's get started. It came a bit too late for my mainstay in email marketing, but I still use it for transactional emails. But a while ago, thanks to I learned about one framework that stood above all others. But they're either terrible to set up or still require you to remember a good few pitfalls in HTML email. Of course for a while now there's been solutions like Foundation for Emails, emailframe.work and many others. No really, here's a list of CSS support in email. And funnily enough Google, the company responsible for one of the most advanced browers, is one of the worst offenders. We're talking inline styles, table layouts, transparency hacks, and so and so forth. The amount of tiny, obscure things you have to remember is incredible. Building HTML email was one of my responsibilities at my first job before I got into freelancing and I feel like in those three years I aged by at least a decade. I wish I was kidding about this, I really do. HTML email is like the Wild West of web technologies. The amount of work that has to go into these magical creations can be absolutely mind-numbing. If you count yourself among those that have never built an HTML email before, count your blessings. So I assume that if you're reading this article, you belong to one of three categories of people: The type which has never built HTML email but wants to get into it, the type which has built HTML email before and wants to find a better way to do it and then the type who just reads everything I write for some reason.
0 kommentar(er)
