Building Emails: Tools

[00:00:02]
>> Jason Rodriguez: I tools. There's a couple of different tools out there that can help you build these campaigns, a lot easier than you typically would if you're just coding from scratch. Litmus Builder's our own dedicated, essentially an ID and a build tool for email developers. You can code directly in your browser, and you can see all those previews on the right-hand side which makes testing those things really quick.

[00:00:23]
But one of the couple of things that I really like about Builder that you can mimic in other platforms, but it's sometimes not as easily is we have the concept of partials and snippets built in. So it acts as this build tool, you can pull in partial in, code blocks from this library that you build up over time and just have that.

[00:00:42]
It'll say curly brace, curly brace, header, and it'll just pull that in. So if you're building a lot of different emails then you can update that in one place, that header partial. And that'll propagate across all those different campaigns. You can sort those snippets so as you're starting to use more of these code snippets, you don't have to recreate the wheel every time.

[00:01:00]
You don't have to code them from scratch. A lot of other cool things, we integrate with PSP, stuff like that, but definitely a helpful tool that says I think behind Dreamweaver which is select the number one tool for email developers. This the number two tool that people are using for email development which was good to see.

[00:01:20]
You might be surprised that people are using Dreamweaver but I think it's that design view that they have, they have the code view and the design view. So people are kind of clicking around that wizard type editor, seem to enjoy that for building email campaigns. I know there are a couple of questions about like frameworks to try to abstract away some of the like boilerplate stuff or some of the hacks that we have to worry about in email.

[00:01:43]
So there are a couple of tools that are out there out there that are really polished, really cool for developing campaigns faster. My favorite is this MJML, which stands for Mailchimp markup language. So mail is an ESP. So they do send me emails, but they've invested a lot in the tooling of their ESP.

[00:02:02]
So they came up with this MJML framework that allows you to abstract away the underlying HTML and sometimes the CSS of your campaign. So you can see on the left here on the code editor, this is the kind of playground on their website. They have great documentation, it has ton of cool features, but you can see it uses these MGMM or MJ tags to build out this email so they have a lot of different components.

[00:02:28]
Those modules we were talking about, already built in and it's kind of like an free email but this will compile down to actual HTML and CSS that you can send with anybody. So that's the beauty of it, it abstracts away some of that stuff. But you still get HTML and CSS that you can send to anybody using any tool at the end of the day.

[00:02:48]
It's cool that you can extend those tags and create your own components so you can still work with that underlying code that's generated and build your own components. By the thing about any of these tools these frameworks is that you're kinda stuck into how they build email campaigns.

[00:03:04]
So you don't have full control over what it's actually generating and what that output happens to be. So this is good for a lot of uses but if you're building something that's really like bespoke and customized version of an email, hand coding is still probably the way to go.

[00:03:19]
Similar to MJML is Foundation, so is anybody familiar with Foundation? It's like a log framework, pretty popular, kinda like a Twitter Bootstrap. So they have an email version of this. It used to be called Inky. They still have their templating languages called Inky but it's all about doing a similar thing where they abstract away a lot of that underlying code and make it easy for you to develop campaigns really quickly.

[00:03:44]
So Inky is our template in language. It's very close to MJML format or those amp tags that you would see, but it just does it in the foundation's own way and it's very similar to you, the web framework version of Foundation. So if you're familiar with it, using Foundation for emails is a pretty lightweight, easy way to go.

[00:04:03]
One of the newer ones that I'm super impressed with and wanna play around more with is called Maizzle. So Maizzle is similar to those other frameworks, but it takes things a step further and takes it closer to that web world. So it's like this entire build process. You can have JavaScript config files, you can pull in different packages from NPM, stuff like that to automate a lot of this building and work at more into your typical web tooling.

[00:04:31]
It's interesting too because they use tailwind CSS which is a really cool functional CSS framework, that allows you to really abstract away a lot of this styling, and use classes to build out these custom styles for your components. But Maizzle's relatively new, I think it was released maybe a year ago, if not less than that.

[00:04:53]
But, it's super interesting because it's super powerful, and has a lot of these kind of head on since they can all do really cool things with. By any three of those are really interesting. There's other tools out there as well that are similar, but I would definitely say that, MGML, Foundation and Maizzle are kind of the pinnacle of these frameworks that you can use for developing email campaigns.

[00:05:18]
Tons of resources, you're all officially email geeks now because you sat through, what, eight hours of me talking about email design development. So it's time to go congregate with your fellow email geeks, and the best place to do that today is this email geek slack channel. So just go to email.geeks.chat.

[00:05:35]
You have to submit a quick invitation, but I think there are automatically allowing people into this point. But there's thousands of different peaks in there all talking about email, there's channels for literally anything your career stuff your code Your Design different events out there. You can obviously private message with other fellow email geeks, but this is an amazing super active resource for email developers when you run into some of those issues or trying to troubleshoot a problem.

[00:06:06]
You want to talk about a new technique or something like that. This is usually the first place people go to discuss that kind of stuff. A lot of people in there try to be active in it. I definitely lurk as much as I possibly can and try to jump into conversations when possible.

[00:06:21]
But tons of smart people that are knee deep in email every single day, that are ready and willing to help you out with any issues you might have. Similar to that we have our own community, our sort of forums and resources on Litmus that are free to use, free to access columnist.com/community.

[00:06:38]
So there's tons of discussions about, there's thousands of different discussions about troubleshooting issues, different design techniques, industry news, opinions on tools, stuff like that. There's a lot of code out there, too, that you can access for free. So we have these snippets that just collect specific things. So if you want an example of a bulletproof button, you can go on there and search for buttons and see those different examples.

[00:07:02]
There's templates up there that are full fledged templates, fully designed that you can download for free and use and adapt as needed. And then if you're looking for a job in the industry, we do have a free job board. It's free to post. We have a bunch of different cool companies posting there, trying to target the email geeks community and get some smart people on there.

[00:07:21]
So there's definitely some cool opportunities up there. And I'm always surprised when we see really interesting companies like Twitter or somebody like that will be posting jobs for Email Geeks, which was really cool to see. I have my own set of resources. It's at TheBetter.Email/resources. So The Better Email is of the books that I publish and of course that I published a few years ago at this point.

[00:07:47]
So it's the better email on design. But I try to maintain this list of resources that you can access for free. It's kind of my personal bookmarking site for anything email related. So I have categories for people on the. I have categories for code examples, tools, ESPs, articles, books and courses.

[00:08:05]
So it's a good place to go if you wanna dig deeper into some of these topics, especially from, I talked a little bit about how email's cool because it's forgettable and we don't have a lot documented for posterity. But this is a good place to go. I have a bunch of articles and stuff that discuss these different techniques.

[00:08:24]
We've seen like hybrid coding, like interactive email, and it has a bunch of older articles that go into the first inklings of how this stuff was developed through to modern techniques. So it's pretty cool, I try to update it as much as I possibly can as I come across new resources and try to add them to the list there.

[00:08:43]
TheBetter.Email/resources, definitely check that out. All that stuff is linked to that GitHub repos balls, bunch of as well as a bunch of other stuff. And then again, grab the code. We saw this earlier. It's up on codepen as a collection you all have access to. Definitely check that out it because that's a good way to dig deeper in this code and then tie it right back to what we've been discussing throughout this workshop today.