Email Template Solution

[00:00:01]
>> Jason Rodriguez: So hopefully you don't have any trouble adding a couple headings and paragraph of text and an image to your email. But let's look at what that looks like if I'm coding something like that. So we have our starter document in here. We added in that CSS reset to just cancel any of that default behavior, override that link styling but still maintain that auto-linking behavior for people that need it.

[00:00:26]
So what I like to do is usually use comments to scaffold out what's gonna be under my email. So for this, it's gonna be pretty simple single column thing. I'm gonna have a logo image in here. Let's say a headline of some sort. We wanna have a hero image.

[00:00:49]
We'll make it look kind of like a simple marketing message that a lot of people are sending out, some body copy.
>> Jason Rodriguez: Since it's email, we wanna put it to work and make sure that it has some goal associated with that campaign. And that's usually we're trying to get people some place.

[00:01:06]
We want them out of the inbox and onto our website, onto our product page, in our app, something like that. So we usually wanna include a call-to-action of some sort. So we'll add a button down here. And then since you're sending email, there are legal requirements when you're sending those campaigns.

[00:01:22]
And a lot of that is tied up in the footer of the email. So this is where we'll add in things like an unsubscribe link, which every email campaign should have. Unless it's a transactional email, it's not required, but sometimes it is handy to have those depending on what type of transactional campaign that actually is.

[00:01:40]
You'll wanna add in something like your address in there. So people know you as a sender, where you're sending from. That's actually required by the CAN-SPAM law that dictates how we can send email messages for marketing purposes and transactional purposes in the US. There's newer laws too that you should probably be aware of, even though if you don't wanna like dig in too deeply, but Canada has CASTLE.

[00:02:04]
I forget what it actually stands for. But that's their law. That's kinda like CAN-SPAM, but it's a lot more strict than that. And then, have most people heard about GDPR? So the general data protection regulation. Which is a European law that dictates what you can and cannot do when you're collecting email addresses, when you're sending messages.

[00:02:29]
But it's super strict compared to something like CAN-SPAM. So there's a lot of things we have to account for. And a lot of that ends up in the footer of your email. So just be aware of those things. Definitely, if you have any questions about any of that stuff or wanna dig into other resources later on or during break, then I'm happy to do that.

[00:02:46]
But yeah, this will be a pretty basic email. We'll have the logo in the top here. So, for our purposes, let's add just an image tag. And then I have some images in a folder here. We'll use the logo. We won't do anything beyond that. We're gonna look at what a good image tag looks like for email later on.

[00:03:07]
The headline, since this is the main heading, we're gonna use an h1 tag.
>> Jason Rodriguez: The hero image, again, we're just gonna use the image tag, pretty bare bones,,
>> Jason Rodriguez: jpg, body copy, since it's gonna be a paragraph text, we'll add a paragraph tag in there to make it semantic for anybody that needs that additional help.

[00:03:34]
The button, I'm gonna get to a little bit later. Right now we'll just put a link in there. We'll have it go to frontendmasters.com
>> Jason Rodriguez: I should probably mention that these should be absolute URLs. you don't really wanna use relative pads for the purposes of this. We're doing it for our images, but when you're sending an email campaign and the client downloads it, it essentially goes into a temporary directory somewhere.

[00:04:04]
So we don't really have this concept of relative path, it's just dumped somewhere. We don't know where that happens to be. So if we're using something like images/logo.jpad, we're hopefully not sending all those images as attachments or as a ZIP or something that you expect them to open up and extract.

[00:04:22]
So we wanna make sure that we're using those full URLs, not those just relative links, to make sure that those all render properly, you're sending from. Especially with images you're sending using a publicly accessible server, you don't have some weird read rights restrictions on that. So make sure all that works properly.

[00:04:42]
For links, most email clients will generally allow you to leave off that protocol. But it's nice to have it in there just for peace of mind. For anything that doesn't respect that, people will still be able to get to where we want them to go. The footer down here, again, we're gonna add in a paragraph.

[00:05:04]
So you might wanna say, Feel free to unsubscribe.
>> Jason Rodriguez: Let's make that a link so they can actually do that.
>> Jason Rodriguez: Just use a placeholder here.
>> Jason Rodriguez: And then usually, you wanna add in your address too, so we'll just make something up.
>> Jason Rodriguez: And then a lot of times people use that photo for any legal disclaimers.

[00:05:40]
They'll have that view in browser link down there. You might have a reminder. It's nice to remind people of how they got on your list. So before we do unsubscribe, we can be like, you signed up because you wanna learn more about HTML email. Or you showed interest in this product, you're coming to our event, or something like that.

[00:05:59]
But this is pretty basic. The one thing I did mention before we started, that it's good to wrap all this content in some sort of container element that we can do certain things with. So I'm gonna grab all this and just open up a div and dump it all in there.

[00:06:15]
And we'll see where this div comes into play in just a minute when we start talking about styling our content. Yeah, question?
>> Speaker 2: Do you usually, if there's any logic around this, go one div deep, or would you ever wrap the footer in a div as well?
>> Jason Rodriguez: You totally could, yeah.

[00:06:30]
So a good example of that, we could actually do that. And I think I might do it later on in examples. The footer is a good example of that, cuz a lot of times you'll want to have that smaller copy or something like that. So when we start styling this, our divs are really to house the universal styles for that content section.

[00:06:50]
So for the main part of our email, we'll see how we style things, the text styling for the most part. But since that footer tends to be a separate little component, we'll house that in its own div too. So we'll just add that in there, and we can manipulate that bottom content a little bit differently too.

[00:07:10]
That is a good point though, is, anytime you need to do something wholesale to a section of content, then you can use something like a div to wrap that. When we start talking about layouts, too, I'll talk a little bit about how we should be building things. Thinking modularly and using modular components.

[00:07:27]
And using things like divs or table rows, table cells, is a good way to do that, cool.
>> Jason Rodriguez: So we can say that, let's open it up, and nothing too great here. We have a couple of images. My fun little avatar there. Our hero image. We can see our link down here to unsubscribe.

[00:07:50]
But nothing fancy. It looks like garbage right now because we haven't done any styling. So that's kinda the next step. We have some basic HTML in here. We haven't really introduced tables yet. We'll talk about that a little bit later on when we start wanting to structure this a little bit more.

[00:08:06]
But for the most part, this is what you're going to be using, just simple HTML elements like the image tag, like heading tags, like paragraphs. If we wanted to target something specific in here, that's where we would use something like the span tag or the m tag, depending on what you need it for.

[00:08:23]
I forgot to add some copy in here.
>> Jason Rodriguez: So let's show that link. This is a link down here. I've apparently already visited that link. So it's purple. And then our footer down here with all the additional legal requirements, all that information that we want in there. So nothing fancy going on.

[00:08:43]
We'll get a little bit fancier when we start manipulating the layout, introducing multiple columns, looking at different responsive techniques.