Notes from the Dev | Episode 2 Part 2 | Advanced MJML with Nicole Hickman
In the first part of this installment of Notes from the Dev: Video Edition, Megan Boshuyzen spoke with email developer Nicole Hickman about the basics of the MJML email framework.
But Megan knows a lot of email geeks with specific questions about how to do more complex development tasks that don’t have a clear method in MJML. So, in the second half of this discussion, we’re finding out some advanced MJML techniques Nicole uses for things like dark mode emails, image swapping, and overlapping content in email layout.
Watch the episode and read the complete transcription below. For code snippets, check out the Email on Acid blog post.
Megan [00:00:00] Hi. I’m Megan Boshuyzen. And you’re watching Notes from the Dev: Video Edition.
Megan [00:00:18] Welcome to part two of our MJML walkthrough with Nicole Hickman. Now we’ll look through some advanced techniques she has used while creating email campaigns. Enjoy.
Megan [00:00:26] So, like, what other things have you done using MJML now? Like, have you done image swapping and how do you handle dark mode and, you know, that sort of thing. Especially with dark mode, I don’t see anything here that like automatically puts that sort of thing in.
Nicole Hickman [00:00:44] With dark mode. And I have this example right here. Unfortunately, I have to do all that typing. So here I have a file. This is kind of set up. All right, so this is a file that’s set up for dark mode. So here’s what it looks like in light mode, and here’s what it looks like in dark mode. So going to the code. Again, a lot of this stuff is going to be taking place up in the <head>. So the scroll scrolls role. So here we’ve got the meta tags for content. So this tag is also kind of a little bit of a workhorse as well, this MJ raw and it means exactly what it seems to imply, which is when you wrap anything within here, it’s going to just sort of bust out of the box of the MJML framework and let you just put your stuff in just like you would in a normal HTML file.
Nicole Hickman [00:01:50] And so it’ll still parse the contents of this. It just won’t parse it with the restrictions of, say, like needing a section or a column, for example. So here’s, you know, just my regular styling from my boilerplate. Classes that I use a lot for this particular layout, just going bopping back over there to show you again. And then from there is where I start the dark mode styles. And again, this all works just like a regular style would. So here’s my code for switching. Oh, I should scroll down to the bottom. So, for example, if you want to switch, if you’re working with an email client that allows you to switch your logo from a dark image to a light image, you would simply. You can see how it switches the logo from a dark mode version to light mode version. So that’s basically literally the code that I think I pulled this from Alice Lee’s initial presentation about dark and light mode, image swapping, and then all this stuff here is just what triggers the actual dark mode classes.
Nicole Hickman [00:03:08] So the thing with MJML that is important to know is that the way MJML passes out the HTML, you need to know how to specify CSS selectors. So for example, I’ve got this right-angle bracket going to <table> because that is what happens when I go to my first section. So here I’ve got this section tab right where my background color for light mode is white. But I want it to switch to a dark mode background that I’ve defined in the styles above. So if I look at the way this parses out, so this is how. Oh my gosh, the dog has decided to get excited.
Megan [00:04:01] I love it.
Nicole Hickman [00:04:02] You know, it’s great. She’s such a funny girl. So you can see that actually the dark mode colors, the class goes into a div, but where the colors actually get applied is in the first <td>. So that’s why I have that, why I have in the MJML that target <td> so that it’ll apply it the actual class there instead of to the <div>. Because it wouldn’t override the backgrounds on the table. Sorry. Yeah.
Megan [00:04:44] That’s really cool. I might have to rethink how I target things on dark mode. I know this is about MJML, but now I’m rethinking about how I target on dark mode. Oh, that’s awesome.
Nicole Hickman [00:04:57] Yeah. I mean, I end up because I’m using MJML and because I, you know, after a little bit of trial error and also a lot of learning about how to establish specificity, that’s something that was kind of new to me up until about a year ago. Anyway, lots of YouTube tutorials later. And also there’s also a really great MJML Slack channel. So I, you know, just a lot of experimentation to get it to work. And this is the method. So that’s how we get our dark mode swapping. So yeah. So really when I see people saying things like, well, how do you in my Gmail, how can you, you know, target things like dark mode or even Ganga or swapping images from desktop to mobile? I say, “Why, let me show you.”
Megan [00:05:55] And here we are.
Nicole Hickman [00:05:56] I have an example for that.
Megan [00:05:59] I love it. So show us how image swapping would work, because I think we’ve seen questions about that before.
Nicole Hickman [00:06:05] Yeah, for sure. Let me come out of this guy and.
Megan [00:06:09] Ha, this is so cool
Nicole Hickman [00:06:15] I’m glad you’re liking it. Here’s the image swap example.
Nicole Hickman [00:06:15] So as you can see here, I’ve got an image in regular desktop view. I’m going to go over to inspect, and show you that once I go into- – let’s go fullscreen works. So when I look at this in desktop view, I’m getting this 600 by 400 placeholder image. But when I go down to say a mobile, it automatically switches it to a different image. To look at how that’s done in the code. It’s a little bit tricky, but I did this again as I was telling you, I think before I do code for everything for mobile first. Something that I’ve kind of evolved over the few years that I’ve been doing this. So essentially what happens is I have my first grouping of styles that are going to essentially create any of the Stuff in line to the tag. And the reason I do that is for GANGA specifically. Because Ganga, of course, as we know, doesn’t support media queries or even style for that matter. So I do this seemingly counterintuitive, but it works, technique where we’re when I want an image to show on desktop, I put a class of show on it, but I don’t want it to show on mobile.
Nicole Hickman [00:07:55] So here the inline style gets applied, which is display call and none when I go down to where it’s actually. Well then I also apply these same two class names with display, colon, block as you would expect and display colon, none as you would expect. But by doing the important right after them, they override, you know, anything in the desktop view because I had this media query here established. So let’s go take a look at the images. So this is the code. So this is the desktop view. You can see I have the text classical show and then I have my MJ raw tags to hide the mobile content from Outlook for Windows. I just grabbed an <mj-raw> and then I have my mobile image with a CSSclass of hide.
Nicole Hickman [00:08:50] So if we look at the HTML. We can see that initially, it’s showing. Well, in this case, it’s moot because we want it to show. But if we actually I should have done this. Yeah. So you can see that in line the class says display none. But since in my classes for desktop, I’ve got display colon block with important that overrides this inline setting. So essentially what that means is that no matter what email client you’re viewing this in, it’s going to work properly regardless of media queries or lack of support. So there we have it.
Megan [00:09:48] Awsome that is really cool. Yeah, that’s awesome. I say awesome and then cool a lot. I’m sorry.
Nicole Hickman [00:09:55] You’re fine. I live in San Diego.
Megan [00:09:57] It is what it is.
Nicole Hickman [00:10:01] So that’s the example for that. Again, a lot of this stuff I kind of didn’t invent on my own in terms of technique. There’s a really awesome MJML Slack channel, but for those who are interested in learning more about MJML I’d highly recommend that you visit. And you know, it’s kind of the same kind of awesome support that we get on Email Geeks Slack. So, the same level of friendliness, nobody judges anybody and you know, lots of really good people in there. So I highly recommend it if you’re interested in delving into MJML.
Megan [00:10:42] Awesome. I know one other thing that we’ve talked about before is overlapping content, which I feel like would maybe be really hard in MMJML with how it’s structured. But I know you’ve done it. So…
Nicole Hickman [00:10:54] I have and I have an example. So this technique came from again from Mark Robins and Stephen Sayo. So I’m going to turn off the inspect just because it’s hard to look at. So this is an example of overlapping an object onto another object. So this image here is the one that’s doing the overlapping this. And I have this background. So the idea is that I wanted this to I didn’t want this whole thing to be an image. I wanted to be able to independently click a CTA. I wanted the text to be live. If images were turned off, this was not the most important aspect of this from a meaning standpoint, although obviously this is Greek copy because I anonymized it.
Nicole Hickman [00:11:58] So I just basically used the technique that the two of them had come up with. Take a look at the code for this one. So a lot of, you know, heavy lifting on the MJ raw tag there, by the way. But essentially these styles came directly from the code that Mark and Stephen had posted. And it’s just going into a regular style. But I decided in this case I could have kept it within the MJ style tag, but I decided I wanted this code to be. So what happens in MJ style is that everything you put in there kind of gets nested. And I wanted this to be its own separate style string, so easy enough to accomplish. I just wrapped it in its own style tag and within the MJ raw. So that way it just kind of I just felt it was a little bit more organized for me since I was experimenting with the technique. So this is all the stuff that does it. I’d be foolish to say that I fully understand everything that’s going on here. But, you know, just with some trial and error and of course, the source code that Mark and Stephen provided, I was able to get this to a place where I could get this overlap happening.
Megan [00:13:24] Awesome. That’s awesome. I keep saying awesome. That’s awesome. It sounds like that when somebody is like, well, MJML can’t do blah, blah, blah, blah, your answer is to use this MJ raw tag – or element. So put your stuff in there.
Nicole Hickman [00:13:43] There are a lot of things that MJML can do just all by itself. But if you have the need to do something a little bit more, something that would be cumbersome to try and do within the MJML itself. You can certainly bust out and just wrap things in MJ raw. That’s what it was developed for. So, for example, I will sometimes, you know, it depends on the use case, obviously, but you know how Gmail, particularly mobile, if you have one thing wrong, everything gets kicked to the curb. So sometimes when I have code that I think Gmail will not like, I will do that style tag separately and then that way it’ll still work even if Gmail throws it out because. So, yeah, so it’s really a use case kind of thing. But MJ raw is your go-to if you need to do something outside of what the normal MJML framework accommodates. So that’s it in a nutshell.
Megan [00:15:01] All right. So again, thank you for coming on, Nicole. This was amazing. I’m sure people are going to get so much out of it, you know, with just the dark mode stuff alone and that image switching and all that. I think it’s going to be really helpful. Why don’t you tell us where people can find you?
Nicole Hickman [00:15:23] Oh, okay. Well, I’m on LinkedIn. In addition to that, I’m on Twitter. That one’s maybe a little bit more friendly. So on Twitter I’m Missinfo_SD.
Megan [00:15:40] Awesome. I like that one. That’s a fun handle. My handle’s boring, yours is fun. Awesome. Awesome. Well, thank you again for coming on. And thank you people watching for watching. I hope you watch more. Stay tuned for more episodes and be sure to like, follow and subscribe to our channel for more later on. Thanks. Bye.
