 Alright, so hi everyone, I'm Ben. Today I'm going to be talking about modern tooling for taming HTML emails. So the idea of that is just to make email easier. And I'll just go into at the beginning of the presentation as to why email is a hard thing if you're not aware of creating HTML emails before. But firstly, can everyone hear me okay? Yeah. Yeah. Cool. Everyone on the back? Yeah. Alright, cool. So, hi. My name is Ben. I'm from Australia. I've been working in front-end web development since 2012. I've been living in Singapore for the past two years. And I'm currently working at the company Money Smart, which if you don't know, Money Smart, they do kind of like a blog, but they also have some kind of like credit card and mortgage comparison tools. And they've got a lot of interesting stuff coming in that space. So they're in Singapore, Indonesia, and Hong Kong. And I'll have a little bit more of Money Smart after this as well. So as front-end developers, which I'm just assuming that a lot of people here work in the front-end development space, or at least web. So there are times when you're often asked to tackle all sorts of problems. So when you're a front-end web developer, you're not just working in the browser, creating a WordPress site, and you work in Chrome, and that's it. There is a lot of complexity involved with being a front-end developer. And sometimes even the simple kinds of tasks can end up being a whole lot more complicated than you think that they might be. So after being working with HTML for a while, you think that you know everything that there is to know. There are times when somebody says, hey, can you make me an email template? And I'm like, yeah, sure, that sounds fine. But then when you actually get into that, some more requests come through. Can you make it responsive? It doesn't work in Lotus Notes. What's Lotus Notes? Okay, Outlook 2007, Outlook 2003, Outlook 2010, they're all different. So they're just little things, little gotchas that kind of come up when you're working with HTML and email. This is just a little example of some of those things which you might take for granted, but then you go in and you think, yep, I'll do this, but then you're looking like, wait, Yahoo app on Android? Do people use that? Well, it's on this list. Maybe they do, but it doesn't support the thing I need. What do I do? And there are all these kind of like little tricks and hacks and everything out there that will allow you to make email templates that work on a variety of different devices and email clients and on your mobile phone and on your Windows phone and all kinds of things that people use. But in order to learn and know all of that, that can sometimes get a little bit overwhelming and it's a lot to take in when you just thought that this would take about an hour and now you need to learn and figure out what Yahoo app on Android does. Another example is, this is just something I pulled off a theme forest page where I think it was like an email template, but they're just showing you here that that email template works in a variety of different browsers, different email clients. So because we can't read all of this, I squinted a lot and I found out just in this list, I've got the AOL, Gmail, iWork Express, Thunderbird, different versions of this, all your Outlooks, your web-based clients, your desktop clients, your desktop clients on Mac, desktop clients on Linux, but the same way that when you're building for a website, you need to test on Internet Explorer, Firefox, and Chrome, Safari if you want to as well. They are all different browsers where we go through and we test our code to make sure it works on all of those different platforms. When it comes to email, there is a heck of a lot more platforms out there and it's something as well that it's a little bit less understood than the browsers. So there might be things where you just think, yep, this design should work and it'll be fine, but it gets a lot more complicated as we just try to work through all of these different things and usually a client will just want to make sure that it works on everything. So as I was saying, if you want to satisfy all of these different things then your HTML code, it doesn't look very nice. So table layouts, sure, that's the only way. Inline styles, absolutely. Let's do it. 17 nested elements for a single word. Sometimes you just need to go there because it just won't work if you do not have all of this nesting and padding and other things going on. So I hope you like tables. But there is an alternative. So when we look at the kinds of tools that have been created in the last five years or so for front end web development, we are absolutely living in this really nice golden age where everything is becoming a lot easier and we can just be a lot more productive without really being bogged down and doing all of this just kind of stuff that you really don't want to do. So tonight I decided to introduce and go over this tool that I found called MJML, which stands for Mail Jet Markup Language. I'm not affiliated with them in any way, but it is just a, for a task that I needed to do at MoneySmart, it is something that I used and it just made my life a lot easier. So just a little background like Mail Jet, I mean MJML is built from React components. So that's how they've been able to create their own markup language. And the main idea really is to create responsive email templates and it just is, the point of it is to abstract away a lot of the complexity that comes with writing email that works in email clients. So that is the end of the slides and now I'm just going to do a presentation about just how you would set it up and just get it to work. So I'll try and do this one handed as I hold a microphone. We'll see how that goes. Okay, so first of all Mail Jet, I mean MJML website, so as you can see their main objective is just to make responsive emails easy. So responsive emails itself is something that is, has always been kind of difficult in email clients. It still is difficult because it's not supported everywhere, but they do their best to make it work in every scenario which it possibly can work. So some email clients do support media queries, but they're very modern and you definitely cannot trust that. But there are other kind of things you can do just with the way that you structure your tables and kind of certain parameters you put onto them to make them wrap in a way that makes a email template responsive. But that's just how it works under the hood and that's kind of some of the complexities which it takes away. So with any good new tool, the first thing you do is jump to the documentation to get an idea of how it works. Sorry, I just need a drink. So with MJML, the documentation, everything you need to get set up is here. The documentation is quite comprehensive. It goes through all the things which MJML can and cannot do and it also has a lot of good examples here and some real step-by-step stuff just to get started. Some of the main things that we'll be looking at tonight is just some of the body components and some of the stuff you can do in your head. So it just shows what MJML is like. So I'm just going to show you a little project that I set up using MJML. So it's just like a standard node project. We need MJML as a dependency but you can also install a, this will just enable you to do a bunch of MJML commands from the terminal and you can also install a MJML plugin. So I use Visual Studio Code. They've also got plugins for Sublime that I know of but I think they've got a couple of more. So I'm just going to go through the VS Code ones tonight. So you've got your brand new email that you want to set up. First step, we need to go and install MJML. So that is this package here, install that, reload page. There's also like an MJML syntax highlighter that I've already installed because I'll just show you the examples once. So as a first kind of set, this is like an email template that I've already made up and it just looks like, the thing that I like about, it just looks like normal HTML. There are tags, there's a few different things like why is there a font in the head like that. But from what you can see it's like, all right, I've got sections, I've got columns, I've got an image, I've got some text, I've got some more sections, a group, a column. It's all fairly like, it's stuff that you'd be used to seeing if you worked in HTML. The thing that I'll show you first is that with MJML, we've got 111 lines of code here. Sorry, I just can't reach the keyboard shortcut like this. So the first thing I want to show Okay, so the first thing that I want to show is if we export this HTML, so this is kind of like a compile step where just taking all the MJML and converting it out to actual HTML. So when we do that, MJML runs its thing and I get this new HTML file here. So when you look inside here, this contains all of the really nasty stuff that we don't want to write. And if I just go and do file this out to normal HTML formatting, you can see that it's gone up to 388 lines. So that just gives you an idea that this has increased before fold and that's just all the extra wrapping and stuff that it needs to do. Another example that we can do with this with the MJML tooling is when we have the MJML tooling, I'm just using the command palette in VS Code and that just opens up all of the different commands which I can run. So another one is from the MJML plugin that we just installed is the screenshot. So that will go and compile my email template at the width that I specified. So 650 is pretty standard for emails. It compiles it, screenshots it, and now I know that, oh, this code looks like this. Okay, that's pretty nifty. And you can see here, very money smart base. This is a project from work, but it's just sign up and you'll see the same thing. So that is a couple of examples of what the tooling can do. And lastly, I just want to show you the really nifty, powerful tool is the fact that we can have a live preview with everything that we're doing over here can show up over here. And just to show you very quickly that it's all live and stuff. So I delete that and that's that line. So you can pretty much be coding in here and then just see it instantly updating over here. So some of the nice features of this, I'll just show you one of the things. So one of the things with HTML email is that in order to get to work in a lot of clients, you need to inline a lot of the styles. So that is a lot of the stuff that you're seeing here. But we all know with inline styles, if you need to change something that's rather global, can make it really kind of not fun, not quite complicated, but a good way to learn regex. So if one of the features that mjmail allows you to do is you can create style sheets. So you just create a mj style block, tell it that you want these styles to be inline when the code gets compiled. So now for each time we use an h1 tab, all of these styles will get in inline on that tab. So I've just got like a few here, if we just go and delete some of those, we'll just see certain things change and that's what we've got here. So yeah, you can just see that this is kind of like one of the nice things that it does because it just allows you to work in a way that you'd be a little bit more used to. Other things that you can do is just setting up an mj attribute. So this will just go and inline this style on everything. So every time you have a tag, it will go and append this font family onto it because where email works, it just doesn't cascade in the way that you would normally like that it would. Some other things going on in here that I'll just try and quickly show is that if we wanted to create all of this, the main basic building blocks of mjml is just you've got your mj body, much like the html body, then you've got your sections for creating each of your distinct sections of the email. It's kind of like just doing rows if you're used to like a bootstrap style grid system. And then the columns are equal kind of spacing columns. So if you put two of them together, then you get things that sit together like I have down here. So if I take out one of these, then they just kind of adjust. But I think I've got them inside a group so we can have our, in this one I've got two groups going on. So then when these actually, when you're using a group, when they stack, then these two sections here will stack on top of each other with two per row. So then I can just go drag this in and see how that works there. So other things that I'd encourage you to do is if you're interested in this, something just jumping like the, once you've installed the plugin in BS code, that's pretty much your setup step done. And then from that you can get HTML out. So that is that the main thing they actually need to put this into a production site somewhere. And in here, I just, if you're wanting to get started with this, the main thing you start to look at is the way that you do the layouts. This is the totality of their components. So pretty much if you just go through and have a look at what each of these ones do, that should pretty much get you to a step where you're like, all right, I know how to use this now. My first email template that I made up was probably spent about an hour and a half from not knowing anything to getting all of this out and putting it into production and ready to go. So other things that they have up here is that they've got a few little starter layouts to try out. And this is, like for myself, the way that I find working best is just to start with something whole and then just break it apart and see how all it's all put together, everything like that. So a few other interesting bits in here. So just more examples and pretty much everything you need for all of that. And lastly, whenever you're doing HTML email, you still need to test it really, really well. So MJML will take away a lot of the complexity for you, but there are still some things that just might not work the way that you think of all email clients. So a good way to be able to test out your email once you've actually done it, there's this tool called Putsmail from Litmus. So Litmus also make another email testing suite where they will go and send your email to a bunch of different email clients and render it and they give you a screenshot back. That costs a lot of money, but this one is free and all it allows you to do is just send out your HTML where you know that it hasn't been broken or changed in any way. So you can just paste in your HTML here, enter in some email addresses. So that might be a Gmail and Outlook send it to someone that uses Yahoo and just go and register a bunch of sites and then you can just keep sending this out and getting an idea of what it looks like in actual clients. So you need to send it to an Android phone, an iOS phone, Outlook, Yahoo, Gmail, Desktop, and then you're kind of covered maybe a few more. Just talk to some people who are also doing this or who are going to actually use this template and you should get an idea of what you need to test in. So I think that is pretty much everything. That is just, yeah, a little wrap up of MJML. If you do need to do an HTML email, it just makes your life a lot easier. So yeah, I've been Ben. Thank you. Speak. I don't even have chocolate in my house myself, so I'm pretty much happy. On, at least iOS is a five-size limit for iOS for managing renders or email. How hard is it to do that in practice? How hard is it to what say? Make sure your email fits inside of that. Not very hard. Just test it. Test it and test it across all the different things and just make sure that, like, I don't think that this tool can really help you with that. That's just one of those lessons that you need to learn. Also one of the things, so if you want to look at what are some of the limitations of different email clients. So if you want to get into this and you're setting out a large, like, catalog style thing, that's when you might end up hitting that limit. I don't think it's as small as 40KB, but yeah, it is something that I've definitely seen at people that haven't tested and then email just gets chopped off halfway through and it's like, oh well, I'm sure that last line didn't matter. And also just general writing principles, put all the good stuff up the top. Any other questions at all on this? Do you like implementing email at the back end? So implementing email on the back end. So if you're using something like, there's a lot of tools out there which are for sending out bulk, the email blasts and everything, but some of them don't really provide a very good way to actually make up the template. So just, oh no, don't do that stuff there. Okay, so over here, just where I had the HTML snippet that was generated here. One second. Okay, so this HTML that was generated out, this is what you would copy and paste and put into your thing that's actually going to send out the email blast. So in MGML, you just would have seen here, I'm just doing things like putting in the curly braces first name. So once it's actually in the thing that's actually sending out, doing the send out, that's where you can put all of these little tags to be replaced by your mail merge kind of stuff. So this HTML is set up to be copy, paste into campaign monitor into whatever else you use to send it out, but it needs to be something that supports HTML, like raw HTML going into, which I think most of them do if they're like a large-scale commercial email sending out thing. Any more questions? Have you used a combination of emails? No, I haven't. So yeah, I've just, I haven't had to do much email, but this was just something that I came across and made it really like easy for me to get something, get it done, get it out there. So there's also a foundation for email if anyone else wants to look at that and come and do a presentation. There's always an expert. Cool. All right. So that was everything there. All right, thank you very much everyone.