Basic HTML Email

[00:00:00]
>> Jason Rodriguez: So let's look at what a base document for an email campaign looks like. So literally nothing very fancy going on here, which is nice. It's pretty easy to get an email. It doesn't get super-hard until you start getting into layouts and stuff like that. But a couple of things going on here.

[00:00:19]
We're using the HTML5 DOCTYPE, which is nice and short and succinct. We used to rely on the most popular DOCTYPE used to be the XHTML Transitional 1.0 from, what, a decade ago at this point. It tended to force different email clients to render that HTML a little bit better.

[00:00:41]
But HTML5 came out and it's nice and short, and things render really well using the stack type. So I usually push people to use that. We have our HTML tag up here. One thing to notice, that we are including the language attribute on it. Right now it's set to English since I'll be coding and writing things in English.

[00:00:59]
But if you are sending to different audiences, you want to make sure you localize that campaign for those audiences. So this lang attribute is really important, especially for people that are using things like screen readers or assistive technology. Because that will tell the technology to drop into whatever language profile it needs to.

[00:01:19]
So a good example of this is [COUGH] if you are sending an email that has Spanish and it says hola. But you still have English as the language, then it might pronounce it hala instead of hola. Which is absolutely not what's intended unless you're getting a little cheeky with your email copy.

[00:01:35]
But this is important to have in there for accessibility purposes. And the lang attribute can actually be used on pretty much any tag, any HTML tag. So common use of this would be if you have multiple languages and an email. So your main document might be English, but then you could have disclaimer for French users or Spanish users.

[00:01:53]
So you can go in there and set that on whatever that container element happens to be, whether it's a table or div. An old towel assistive technology to drop into that language profile. So you make sure accents and pronunciation are correct. We have the head up here, we're gonna be playing a lot in there when we get to styling certain elements of our email campaigns.

[00:02:13]
But a couple of things in here, I like to include the title in an email. This won't be used in most email clients but we've actually found through our research that a lot of people will triage their emails and the browser. So you'll see something like that view and browser link at the top of your email campaign.

[00:02:30]
And people will pop that open in a browser tab and they'll use it as like a read it later type service. So if you include the title in there, then you can have that populated in the browser tab. So people know exactly what that tab is, and they can come back to it, it's a nice little reminder for people.

[00:02:45]
Nice thing to do is kind of just either have your company name in here with a quick message. If you have a cool subject line or something like that, you could pull it in using a merge tag for most the SPS. But it's definitely one of those nice to haves and it helps to with people that are using screen readers.

[00:03:01]
Because they'll read out that title of the document when it starts going through it. There's first meta tag, we're just setting the UTFA to make sure that all of our character and coding stuff are good. And all those character render properly, especially if we started using HTML character stuff like that.

[00:03:18]
The second one is all about helping out with making our emails responsive. We'll be looking at that later this afternoon when we start digging into different responsive approaches. But this is just setting that width, the device width, and that initial scale of one. I would encourage you not to disable zoom settings which you can do using this.

[00:03:37]
But we don't wanna do that because a lot of people will zoom in on content to make it more readable or adjust their zoom settings. And we don't wanna disable that behavior cuz that's not our right to do that, we don't wanna override those user preferences. The second or this third one here is all about just making things a little bit more compatible for Microsoft products for anything using IEE or IE Edge.

[00:04:02]
This'll just help out with random little bugs and stuff, it's kind of like a boiler plate thing to keep in there just so we don't have to worry about weird edge cases. And then we have a style tag which is where some of our CSS will go. But we'll talk about in a little bit where we should be placing most of that CSS in our email campaign.

[00:04:19]
We do have something on the body here, we have an idea body which we can use if we need to target that. But this inline style just overriding margin settings and padding settings. We wanna just zero those out so that email clients are adding anything around our email.

[00:04:36]
Introducing that extra space that they might do by default. This is important to have here on the body instead of up here in the style block. Because some email clients will strip out the embedded styles or the head of our document and just display the body. So if we included there, that helps ensure that it's consistent across the widest range of email clients available.

[00:04:57]
Any questions about any of this stuff? Pretty basic. There's not too much going on until we actually start adding some code and seeing how that renders across email clients.