Testing Emails

[00:00:00]
>> Rodriguez: So I wanted to end up just going through some of the tools, some of the resources that I found really helpful as I've gotten deeper and deeper into email design development. And remind you of a couple of things that you should keep in mind as you start progressing and in this journey of email development.

[00:00:18]
The first one is really about testing your emails. Obviously, I have work for litmus. I used litmus for a long time for years before I joined the company. There are other services out there. Regardless of what you do, what service you end up using, I would highly recommend that you test all of your email campaigns before you send them.

[00:00:37]
We saw earlier that chart that had the Gmail's on Android and iOS, and Outlook on Android and iOS. Over a three month period, they made 45 updates between them that could potentially break your email campaigns. And that's just stuff we knew about. So like webmail clients, a lot of times will push updates to their service.

[00:00:57]
It's that continuous integration. You're constantly updating those clients and your apps and services. And all those updates could potentially break your email campaigns. So regardless what you're doing, using some sort of testing service is essential as an email developer. Litmus gives you close to 100 different email clients you can test in.

[00:01:17]
We have a code editor that allows you to test in there. If you're not using a dedicated service still send yourself test emails. So I know there is a question around, how do you send an HTML email? So if you can, get your hands on an email service provider like MailChimp or Campaign Monitor, Salesforce Marketing Cloud, IBM Watson, whatever you happen to be using that'll allow you to send these test campaigns to yourself.

[00:01:44]
If you can't get your hands on that, if your company kinda locks that down to your manager or somebody else on the team, there's this website called puts mail.com litmus. It started before litmus, we acquired it. We keep it running. It allows you to add up to ten email addresses so you could have different email addresses for Outlook or AOL or Gmail.

[00:02:05]
You can add those in there, you add a subject line, you dump your code in there and then you can send that test campaign. So if you're not using a dedicated service to test across all these different clients, at least set up as many free test addresses as you possibly can.

[00:02:19]
Send yourself those email campaigns, interact with them and see how they work in those different e-mail campaigns. Cuz that'll allow you to make sure you're not sending these broken emails to your subscribers, creating these really terrible experiences that nobody enjoys. And hopefully you won't get marked as spammers or something like that with your subscribers.

[00:02:37]
Troubleshooting is, I know there are a couple of questions about how you determine what works where. Is there a good reference for figuring out where these things are working across these email clients? This one is brand new. It got released, I think a week or two ago. It's called Caniemail.com.

[00:02:57]
So similar to the HTML version can I use which is a massively valuable resource. Caniemail.com allows you to either look through a list of features in CSS and HTML and see where there supported crafts these clients. Or you can search for them. So we can look at what that looks like here.

[00:03:16]
I think I have it pulled up, yep. So Caniemal.com, so something like font-face. If you're using web fonts, you would include that using the app font-face property inside of your CSS. You can quickly see that its supported in Apple Mail, no surprise there. It's not supported in Gmail.

[00:03:32]
Has limited support in Outlook. That limited support means that it doesn't show the Web Fonts but it will by default fall back to Times New Roman, regardless of what your fallback fonts happen to be. There is some fixes for that. But you can see where these things are supported.

[00:03:50]
You can see any notes about the rendering support across those email clients. And then there is even links to resource about actually implement that. So this is a super helpful, brand new thing that just got rolled out. You can go in if you're wondering if media queries work across email clients.

[00:04:08]
You can see that Apple Mail, they work beautifully. Gmail has a couple of limitations. And then the Outlook's no surprise. The older versions of Outlook, or the desktop versions of Outlook, don't work very well with media queries. So it's a super handy resource. I would definitely suggest checking that out and bookmarking it because it's one of the quickest ways to figure out what works where.

[00:04:31]
Similar to that Campaign Monitor has maintained this for, god, over a decade at this point. It's campaignmonitor.com/css. And again, this goes through and lists. It's not quite as searchable or easy to use as caniemail.com, but it's still really useful and it goes a little bit more in depth to what properties it actually tests out.

[00:04:52]
But if you go over there you can see different types of the email campaign. So you can look at, sorry I'm gonna go back to, we'll go to beginning here, different aspects. So whether or not style in the head is supported, whether style in the body is supported.

[00:05:12]
Different selectors, different media queries on different properties that you're testing for. How different types of fonts or SVGs are supported. It's a really in-depth way to look at what's supported across these e-mail clients. So you can pop open each of those see where it's supported on desktop, mobile and web mail.

[00:05:30]
But this has been kinda the go to resource for most email developers over the years. It started out small, it's been growing and they've been, they did a good update of this maybe about a year ago. It's this new design that's pretty easy to use and find what you need.

[00:05:45]
I think you can search through here. But I do like I have to say like that, this kind of view this caniuse.com type view that caniemail calm has.
>> Rodriguez: Freshinbox.com is a blog that's run by a guy in the industry named Justin Khoo who does a lot of work to help document, especially around interactive email what you can and can't do.

[00:06:11]
So fresh and box.com resources is another great tool for you to see what supported where he calls a kinetic email. It's another term for interactive email. So he has this chart that looks at the different properties. We would use when building interactive emails. So things like CSS transitions or animation.

[00:06:31]
The checked pseudo selector, where forms are supported things like that, to show you can reliably make these interactive e-mail campaigns. He has a couple of notes too which are helpful to figure out how troubleshoot some of those issues. One of the great things too is that he has.

[00:06:49]
All these examples and different techniques listed so if you want to look at how to do a hamburger menu, but he has that code available. He has a description or a tutorial about how to implement something like a hamburger menu. So Freshinbox.com is another great resource for figuring out specifically where interactive emails are supported.

[00:07:12]
And then seeing more examples of interactivity inside of email campaigns.