HTML & CSS in Email

[00:00:00]
>> Jason Rodriguez: So let's look at kind of the basics of why email design and development it consists of. So this is all about the bare bones, HTML and CSS that will be using in an email campaign. So in this section, we're gonna look at some of those basics, how to apply them to email campaigns, some of the HTML attributes you need to know, the CSS properties that are reliable across these different email clients.

[00:00:23]
And a lot of this is gonna be kind of an up front lecture, and then we'll start looking into some code. I have a couple of challenges throughout the day for you guys, too. Dig in and get your hands dirty with some code here. But yeah, we talk about email clients, we talk about all of these guys up here.

[00:00:39]
So we have some of those classics like Thunderbird, which is still in pretty wide usage. All those different versions of Outlook, Gmail, Apple mail, Yahoo, AOL. There are dozens and dozens of popular email clients out there and each one of them essentially uses its own rendering engine to render our HTML or CSS.

[00:01:01]
So that can be good or bad, things like Gmail and Chrome. They use WebKit for rendering which is awesome. Apple Mail relies on WebKit. So that rendering is really solid. It supports a lot of HTML. It supports a lot of CSS. And our emails look really good in those email clients most of the time.

[00:01:18]
But then you have older versions of outlook that are using well, even newer versions of Outlook. Back in 2007, I think it was, they switched from using Internet Explorer as the rendering engine for HTML and CSS, to using Microsoft Word for rendering HTML and CSS. Which is kind of mind blowing to think about because Word is not intended to render code, at least well.

[00:01:44]
And the reasons they did that were, I mean, in my mind, they make sense because they were trying to make a rich email editing experience for their users. So they weren't really thinking about markers in the Enron, they were thinking about their users. They wanted to provide this rich editing interface similar to working and word by and outlook itself.

[00:02:05]
So the user experience I get that that's awesome. You can add Excel tables and images and crap like that into your email between, even the person sitting next to the desk. But for email marketers that rely on HTML and CSS that's generally a nightmare because, Word is not like a lot of HTML and CSS.

[00:02:26]
So that's what we have to keep in mind that's like that foundational thing. We have to know, what HTML and CSS works. Were across all these different email clients. The big ones are generally the Outlooks, though because they don't like a lot of different things, so we have to kind of cater to them there, they're that edge case that we need to worry about.

[00:02:44]
And it kind of sucks because we still have a lot of people using various versions of Outlook from 2002 on. So it's just something to keep in mind. But that essentially means there are zero email standards out there. While we're using HTML and CSS. Similar to how you would on a website.

[00:03:04]
There aren't any agreed upon standards. There's no one set of standards that every email client follows and implements. So we have to kinda shrink down our HTML and CSS and only use certain things. And that takes me to my next point. The web and email are completely different things.

[00:03:24]
While we use those same technologies, we can rely on the web using modern standards. So we can use things like semantic elements, and newer HTML5. We can use CSS 3 reliably and know that it works pretty well across all these different browsers. But most people, when they're building a website, they're only contending with a handful, four or five different browsers.

[00:03:49]
But email, we have to deal with dozens and dozens fo different email clients. So what you're used to on the website of things, aren't gonna apply to email. So things that work in email are pretty basic slim down versions of HTML and CSS. Largely table based designs will look at kind of like it, I like to call it nearly table free email.

[00:04:11]
And then simple semantics so we should include semantic for accessibility reasons which we'll get into this morning. By you can't really rely on like the full suite of HTML5 semantic elements in your email campaigns. What doesn't work and email for the most part certain clients will support some of this stuff by.

[00:04:31]
If you are sending to wide enough audience, you're not going to be using this stuff things like flow based designs. CSS grid is kind of off the table. Unfortunately, it does work and things like Apple Mail which use WebKit and can render that CSS Grid or something like flex box pretty reliably by most other email clients will just completely ignore it.

[00:04:52]
JavaScript, out of the question, pretty much every email client is gonna strip that out of the org campaign for security purposes. The one exception is that Gmail started implementing something, is like their new promotional tabs that allows you to provide some sort of like offer information with your email split in the inbox.

[00:05:11]
So that uses JSON in the head of your document. So Gmail specifically, if you have that structure JSON in there, it will pull that in and use it to enhance that email in the inbox for Gmail users. But outside of that, any scripting and stuff is a no-go in email.

[00:05:29]
And then a hell of a lot of CSS is just off the table for email, which we'll get into. Couple of resources for identifying what CSS works, what CSS doesn't work and kind of get new speed on what you should be using your emails.