Introduction

[00:00:00]
>> Jason Rodriguez: Well, welcome everybody to HTML email v2. This Frontend Masters workshop. We have a fun day filled with email delights aplenty. I'm excited to kinda dig into some more modern approaches to email development, hopefully show you a couple of new tricks and interesting things you can do in email.

[00:00:22]
It should be a pretty quick workshop because all we really need for an email is this, right? You just need an image dumped into some HTML and then we send it on our way. Now, we'll get in a couple of reasons why this is a terrible idea. And hopefully, you're not sending emails that are all image-based.

[00:00:40]
>> Jason Rodriguez: To kick things off, I'm Jason Rodriguez. I work for a company called Litmus. This is our logo. Sometimes gets mistaken for like weird Ironman logo or something like that. I'm the email evangelist there. I basically go around and teach people about email design, development, marketing practices. I've written a couple of different books on email development.

[00:01:00]
You can check out my website rodriguez comma j dot com, or follow me on Twitter. But I spend most of my time thinking about email. I like to say that I've lost most of my hair because of that fact. Usually dealing with Outlook and Gmail. Until recently, Gmail's gotten a little bit better in the last couple of years.

[00:01:16]
We'll look at how that's affected email design development historically, and kind of moving forward here. So today, we have a couple of things planned. Pre-lunch, we're gonna be looking at just the foundations of email design and development. So we're gonna be looking at what HTML you're gonna use, what CSS you're gonna use, and how to make those emails accessible to you, the widest range of users out there.

[00:01:37]
After lunch, we're gonna dig into more about layouts and responsive design. And then, we'll touch a little bit on adding some interactivity to any any email campaigns. We're not gonna go super deep into that, but I'll show you some basics of how interactivity in email actually works. Because you don't have the luxury of something like JavaScript in the inbox, so we have to do a couple of hackier things to get interactivity in email working.

[00:02:01]
>> Jason Rodriguez: To get started, you don't really need anything very fancy. We're not gonna be installing any frameworks or JavaScript libraries or anything like that. You can use the editor of your choice. I'll be using Visual Studio Code today. But literally, anything you can write HTML and CSS in and see a preview works for you, which is nice.

[00:02:18]
The tooling for email development is super easy. The one add-on I usually like to have in my editor is Emmett, which allows you to just quickly expand code based on shortcuts. So if you do have that, it's nice, especially when we start using things like tables for our development, because that'll save you the trouble of writing table tr td, table tr td a million different times.

[00:02:41]
So Emmet's a good thing to have. A lot of times, as you start getting deeper into design development, you'll start creating some well-worn kind of battle tested codes. So you'll wanna save those as snippets or partials, and most editors allow you to have that functionality in there. So that's a good thing to have, too.

[00:02:59]
When it comes to previewing our emails, we're just gonna be using a browser. I'll be using Chrome. We will look at another tool called Litmus, which is obviously the company I work for. But we have an extension for Chrome that allows you to preview your email campaigns in almost 100 different email clients.

[00:03:17]
Which is really at the heart of email development is figuring out what works across all these different email clients and knowing what HTML to use, what CSS to use, and what breaks where. So we'll see how that kind of works out so we can preview those email campaigns, make sure it's working as intended.

[00:03:33]
But really, browser works for you. If you want to, you can set up an Outlook account or a couple different email addresses and send your test emails in there. It's always handy to test on real devices, but Litmus kinda eases the pain for that. The code up there I put in both CodePen and GitHub.

[00:03:52]
The GitHub repo is nice because it has a read me with a bunch of different resources, links out to tools, things we're gonna be talking about today. So definitely check that out. But if you do wanna see the CodePen stuff and have that kind of interactive environment, it's up there as well.

[00:04:06]
But github.com/rodriguezcommaj/frontendmasters will get you that repo with all the kind of finalized examples of what we're gonna be looking at today.
>> Jason Rodriguez: So anybody know who this guy is?
>> Jason Rodriguez: It's not my dad. It's nothing like that. So this is Ray Tomlinson. Does anybody know what he did?

[00:04:28]
>> Jason Rodriguez: No? He invented the modern concept of email. I'm curious what year do you think the first email was actually sent?
>> Jason Rodriguez: Anybody?
>> Speaker 2: 1969.
>> Jason Rodriguez: 69.
>> Jason Rodriguez: No, close. 1971 was the first use of an email with that at symbol. So prior to that, people were using things like the ARPANET, a precursor to the Internet, and leaving messages on servers.

[00:04:55]
But Ray Tomlinson invented that idea of using the at symbol for an email. Who knows when the first kind of marketing spam email was sent?
>> Speaker 2: '91.
>> Jason Rodriguez: '91.
>> Speaker 2: Early '90s.
>> Jason Rodriguez: Early '90s. 1978, actually. Yeah, there was a guy named Gary Thuerk who worked for DEC, D-E-,C the Digital Equipment Corporation, which built like massive mainframe computers and stuff.

[00:05:23]
So in '78, he actually emailed a list of 400 people. It was a message about DEC's new whatever their mainframe was at the time. So at this point, though, the ARPANET was controlled by the government, so it was the defense communications agency, I think it was, that was overseeing this network of computers.

[00:05:46]
So when that happened, some military guy contacted Gary Thuerk's boss and was really pissed off about that email campaign. But it actually worked out really well. He ended up generating somewhere between 13 and $14 million in sales from that 400 person list. But since then, we've kinda redefined and seen how that definition of spam has progressed over the years.

[00:06:11]
So in the last couple years, it's something like 180 billion spam messages are sent everyday, which is insane to think about. That's a lot of email that's sent that nobody wants. But it's interesting to see how that's developed over time.