Notes from the Dev | Episode 2 Part 1 | MJML Basics with Nicole Hickman
Every email developer has their own unique way of coding. But it’s always interesting to see how other people in the email geek community take on that task.
In our second episode of “Notes from the Dev: Video Edition”, I met up with Nicole Hickman. She’s a direct marketing developer for Fishawack Health. And when it comes to email frameworks, her go-to is MJML, which is a markup language that was created to make coding responsive emails easier.
Watch the episode and read the full transcript below. For more advice, show notes, and code snippets from this episode, visit our blog.
Megan [00:00:00] Hi. I’m Megan Boshuyzen. And you’re watching “Notes from the Dev: Video Edition.”
Megan [00:00:18] Hello and welcome to today’s episode of “Notes from the Dev.” I’m Megan. And with me today is Nicole Hickman. And she’s the Direct Marketing Developer from Fishawack Health. Today, Nicole will be talking with us about MJML, which is a super awesome framework to help you build really responsive emails. It’s short for Mailjet Markup Language. So it’s been built by Mailjet, which you may not know, and you can do really, really awesome things with it without having to deal with, you know, the Outlook stuff and get these really beautiful responsive emails. Nicole uses it in her every day and has some really awesome examples to show us. So, Nicole, I am going to throw this over to you to show us some really cool MJML things.
Nicole Hickman [00:01:07] Great. Megan, good to see you. I’m going to pop over to what I use for my boilerplate real quick. So this is an example of how I start every project. Let me just navigate over it so I can get the code to update if I make any changes. I pretty much pull this into every new email that I create. So and this is some of this is work process stuff as opposed to code process stuff. But so for example, we always do include a title for our emails, which is usually the subject line of the email. It’s just a work process thing. But as you can see up here, we’ve got the MJML is kind of like equivalent to DOCTYPE if you did it in pure HTML. And here is where you would put your language, for example. So for accessibility, you would want to put your language within this tag. Obviously, in my case, it’s English, but any of the you know, the acceptable language tags would work here.
Nicole Hickman [00:02:18] Then moving down everything within this <mj-head> section here is essentially what you would expect to see in regular HTML it’s just within enclosed within your head tags. To take a look at some of the things that the way this comes out looking like in once it’s parsed to HTML. Sorry my cat. You know it puts all the standard stuff that you would normally see within any typical HTML email. So it does a really nice job with all that. Automatically puts in the zooming 120 DPI problem. And then you know, it puts you in any style tags that you specified as well as some default MJML style tags that are included just as part of the standard port to HTML. So just to take a look and see how it parses out to the HTML here.
Nicole Hickman [00:03:23] But going back to my MJML file, I also, based on something I learned somewhat recently from Mark Robbins and from Remi Parmentier, is that it’s also good to have not only your language in the DOCTYPE and <body> HTML tag, but also to try and include it as well within your first <div>. So this whole string here enables that to happen. So you can see when I put in this code here for the MJML, it’s called HTML attributes. You can specify that your path is going to be language, the name is going to be language, and then it’s going to automatically pop in this “EN” to make that work. You just need to go down to your <mj-body> tag and specify CSS class equals quote lang. And then you can see in the index HTML file that your very first <div> will have this language class, which means that it will put in lang=”EN” for the email clients like webmail clients when they strip out some of the DOCTYPE stuff. This prevents the language from being stripped out entirely. So this is like the initial wrapper tag for the email. Any questions so far?
Megan [00:04:58] No, this is awesome. I can see in your index-dot HTML how we can see that MSO specific code that you don’t have to deal with in the MJML file. So that makes coding way cleaner for you and less (inaudible).
Nicole Hickman [00:05:12] A lot less. A lot less typing. And. Yeah, it’s just it’s a timesaver more than effort, you know, time and effort saver. So essentially what happens is when you start so within MJML you have sections, columns, and then depending it’ll be… <mj-text> tends to be the workforce of the group just because a lot of emails are just text-heavy, right? So I do a lot of stuff within MJ text, but in order for this to work, you have to have your section first within there, then you establish a column, and then from there, everything else is just individual content. So there, for example, there’s <mj-text> which would take care of any text formatting needs. But you can also do things in here like write your own tables, which I’ve done quite often when I need something a little bit more specific than <mj-table> will allow me to do.
Nicole Hickman [00:06:16] You can put it in any pretty much any HTML you can put within an MJ text wrapper. And then as you can see, the section, text and column all get closed off, the tags get closed off. And you can have multiple sections within an email. So for example, you might have a section where you want to have a background color that’s different than the rest of the email. So you would pop that up in here with just the standard background. Let’s just call it red. And if I save that, it took this section and made the background red. So if I remove that just to show the default is white, which you can actually change as well. Save that. Go back over to my local host. Give it a second. And it is automatically, you know, switches that.
Nicole Hickman [00:07:06] So every section of your email is going to have a section or column or two columns or three columns that will stack in mobile. But you must have at least one section / column before you start doing things like <mj-tect> or <mj-image>. And then you close off your text or image or it could be a divider, could be a spacer, or whatever. You close all that stuff off and then you close your column, you close your section, and then you’re ready to either be done with your email or you can add another section if you have that you want to add.
Megan [00:07:42] Hey, this is awesome. Yeah, this is a great overview of MJML. I didn’t really know a lot about MJML when I first started developing emails. I looked at it very briefly, thinking, I’m going to be like just coding divs and whatnot. I didn’t know. I didn’t know anything about developing emails at the time. And I kind of looked at I was like, Peace out. I’m going to go look at like full code. And like I started learning from there. And now that I know more about email development, it feels like getting up and running with something like MJML is actually quite easy. Once you look at it and dive into it and it seems like a really elegant solution to get up and running on those emails like really, really fast. So I thank you for coming on today and showing it to us. I hope other people have found it really helpful. So with that.
Nicole Hickman [00:08:40] Yeah, and there’s just an additional link. So I would just say two things.
Megan [00:08:45] Yeah.
Nicole Hickman [00:08:46] Just highly recommend the Slack channel for MJML and also their documentation which I pulled up here, as you can see is really, really thorough. I probably visit this site probably every single day because, you know, I forget the syntax or something. Or wait does it have that property? Or you know, stuff like that. So they keep it really, really up to date.
Nicole Hickman [00:09:16] So two awesome pairs of tools to use if you do want to explore with MJML. And also last emphasis point is that you can pretty much do anything in MJML that you would do in a pure HTML file.
Megan [00:09:32] Hey there. Thanks for watching. Today’s episode of Notes from the Dev. Nicole has brought us so much amazing information. We’re splitting this up into two episodes. Come back to see how Nicole uses advanced MJML techniques in her emails. Be sure to like, follow, and subscribe to our channel to know when part two drops.
