Transcripts
1. Welcome to the class!: Your inbox is probably stuffed full of emails, promotions, sales, birthday ecards, you name it. But have you ever wondered what makes those emails tick? Hi, I'm Vanessa of Bios creative company. By the end of this class, you will have the skills in your toolbox needed to develop HTML emails without a drag and drop editor. Having prior knowledge of HTML and CSS will make this class easier, but does not a requirement. For the class project, you'll develop an HTML email, marketing your hometown or a city you would like to visit. Each video in this class will build on knowledge gained in previous videos, and each video will provide new steps for your class project. Now, let's get started.
2. Free tools for this class: First and foremost, you will need a source code editor. As a Mac user, I prefer Atom, which is an open source and lightweight application that is extremely customizable. A free option for Windows users is Notepad ++. Feels very similar to Notepad, but it has features made for writing code. If you already have Adobe Creative Cloud, you can use Dreamweaver, but any source code editor will serve your purpose. Of course, there are many more options available, but these are where I have experience in using and feel confident recommending. Graphics in your email will drive engagement and brand retention. I use Illustrator and Photoshop for my day-to-day work. But you can use a free tool like Canva or Adobe spark creating your graphics if you don't have access to Adobe tools. If you don't already have a source code editor, download and install one of the free options that are compatible with your computer to use for this class. Links to all the mentioned tools, plus a few more, are available in the class notes.
3. How does email work?: So, the first step to coding emails is understanding how they work. Non-text based emails are built using HTML, CSS, and images. It's like receiving a specially created webpage in your inbox. However, there is a difference, Webpages are structured using Divs and Semantic HTML. Emails are structured using tables. If you're familiar with the history of web design, you probably know it in the mid to late 90's, designers would use tables to lay out their websites. But this isn't the 90's. So, why the heck are we still using tables for email design? Email clients are what you use to receive your emails, such as Gmail or Outlook or other ones you may not have heard of such as M Client or mailbird. There are so many different clients available for users but not all of them interpret HTML the same way. Older email clients or even some of the most recent ones don't support newer HTML, such as Divs. Without being 100 percent sure how your recipient will be receiving the email, it's best to be on the safe side and use what you know works in 100 percent of email clients.
4. HTML emails explained: Okay, so there's three components that you all need to know to create a table design. You have your table, that's the opening and closing table tags. Then you have table row or TR, and then you have the table data, and you nest that inside of the table row to create cells or columns. So, that's one row, and if you want to create another row below that, you can either rewrite it again, or just paste it. Let's add a Hello World, refresh, and you can see it added another row below it. But it doesn't look like much. So, you can use certain HTML attributes to enhance the appearance of your table. So, one HTML table attribute that we'll add right now, usually you want to have border set to zero, but we're going to add a border of one pixel for now. That way you can see what all the other html attributes are doing. So, we're going to refresh. So, you can see it added a border around the two rows and the two cells. Let's just add another cell to each row here, so there's a little bit more to play with. So, another important attribute that you want to use is cell padding. So, if cell padding is set to zero, it's pretty much the default. I like to use a cell padding of about zero. It gives a nice amount of space. So, this is kind of like the padding attribute in CSS. So, you can see it added 30 pixels all the way around the content within the inside of the cell. You can also use cell spacing which works a little bit like margins, it will actually add padding between the cells rather than from the content. So, if you're familiar with the box model on CSS, this is like using a margin. That's a cell spacing of zero. You add a cell spacing of 30. You can see it pushing the cells further away from each other. Let's change that back to cell spacing of zero. Background color. If you want to change the color of your table would be BG color. Let's just make that a nice soft grey and refresh. You can see it changed the background color. There are other attributes that are important. You won't see the effect of it now because this is just one table, and if you had nested tables, these would be more important, but you'll have valign which will vertically align however you want it to be. Then you have a line which will horizontally align. It's also important to note that most, if not all of these are not supported in HTML5, but they still work in email design. You can also apply inline CSS, but you might want to stick to HTML attributes at least until more email clients start using inline CSS.
5. How to nest tables: Okay. So, let's say you want to have an email that has two rows, and the first row has one column that stretches all the way across, full width. The second row has three columns that are evenly spaced, they take up 33 percent of the width that they're allowed. So, it might seem like you can just do one column row here and then another row here with three cells inside. So, unfortunately, you can't do it that way because some of the widths get funky if you have a row that has one cell and then another row right beneath it that has three cells. So, there's two options for fixing this. You can either place one table right after the other one, or you can nest a table inside of another table cell. So, we're going to try out both of those options because they both achieve different looks, but very similar. So, if we go back here, let's start off by closing this table. So, this is going to become the row that is a full width row. Then we're going to turn this into a separate table, so we're just going to copy this entire line here, the opening table tag, that way you don't have to rewrite the entire thing. We are going to paste it and then just hit tab to get that over. We are going to save and go back and reload. Now you have a full width column and three columns underneath it. However, it does have a little bit too much padding in here and that's because this does have a cell padding of 30. So, that's going to add 30 all the way around the table, but then it's going to add 60 in between each of the columns and that's because it's adding 30 on each side of the cell. So, what we could do to get rid of that, we can't just get rid of the cell padding here because that will just get rid of the padding all the way around. But, if it's fine with you to have that extra padding in there, then you can go ahead and use this method. If you don't want the extra padding, and you just want to have three columns, you can nest a table inside of another cell of this table. So, we're going to try that option. So, let's just go in and we're going to cut this out. Then we're going to delete this table since we don't need it anymore. We are just going to delete all the extra space we don't need. So, I am going to add another table row in here right below the original one, the full width table row. Then I'm going to create another table data cell. So, there's a row in a row, and a cell in a cell, so it's even. Then we're just going to create another table, and this table doesn't need any attributes, you can add attributes if you need them, but this one is just going to be a blank table. We're going to paste what we just cut into it. Hit save and go back to the browser and hit refresh, and you can see it still has a 30 padding around it, but doesn't have that extra padding between the columns. So, that's one of the benefits of nesting a table inside of a cell is that it takes on the attributes that are applied to the original table such as the cell padding around the entire table, but it doesn't have the 30 cell padding applied to each of these columns. You'll get used to seeing nested tables as this is how you'll create more structured designs. But now that you have a grasp on email structure, let's design the email template.
6. Other tips: Here's a few more quick tips before we get started. For this class, you can use the images I provided in the project file or check out the links I provided and the project notes to get the most out of your email graphics. A large chunk of your mailing list will open the email on their phone or they might be on a slower data connection. Be conscious of your users and make the image file size as small as possible. I have a link in the project notes with more information on optimizing your images. A lot of designers will build their emails in Photoshop before they start coding your email. If you can't build a mock up in Photoshop, make a sketch of your email to determine where everything goes. We won't be covering mobile responsive emails and this particular class, but that is something that can be done. More information and links are in the project notes.
7. Project: Getting started: So, let's get started with the actual project. So, in your project notes, there's going to be a few downloads that I've added in there. There's going to be an email template which is just the empty template that we're going to be starting this project with. There's going to be another HTML file that has all the images and content and everything already added in. I'll also have the copy and images available for download in there if you want to follow along step by step. If not, you can use your own content and your own graphics. So, this is the template we're going to start with and this looks like this right now, in a browser. So, as you can see, there's no logo, there's no photographs, there's no content, no headlines, no links, nothing. I did leave this footer in here. You can swap out the links for your own content, or you can just leave it as it is, but you do want to be CAN-SPAM compliant and use your own unsubscribe links and view online links and all that fun stuff that's required by law. When you're done with it, it will look something like this. So, as you can see, we can change the background color, we added a hero image, headline, an introductory paragraph, three columns all the way across, and then two column row at the bottom. So, let's get started.
8. Project Part 1: One-column row: So, let's jump right in. So, everything that's going to be a head tag and this HTML doctype, you're going to want to keep all of that the same. These are just some client specific styles and some things that help make the content look a little bit better inside e-mail clients. So, just doing a quick run through, we've got some notes that I've added in specifically for you, The Skillshare students. This will I'll just tell you, where to put certain content, where certain things should be changed within the footer for you to be spanned compliant. All that good stuff just to make things a little bit easier if this is your first time playing around with an HTML email. So, we're going to start off with this first row. So, this first row has a graphic headline and an entire paragraph with a link. So, let's start off by adding the image, and this is just going to go onto this main table here. So, inside of this empty table data row, there's nothing inside. So, let's start off by opening an image tag, and then adding the source, so it's inside of the images folder, and then this is called email hero, very rightly so. We're going to add an alt tag to the email hero. The alt tag is just going to be the same text that is on the image. You want to add all texts all the time because sometimes you're going to have people that might be using a screen reader to have the screen read to them, and then it'll give them an accurate description of what the image actually is if they can't see it. You also want to add it, just in case you have people who have images turned off in their e-mails that way, they can see the images without having to download them. Sometimes, people turn them off for security reasons, sometimes they turn it off to save on data. So, save that. Go back to email template and load, and you can see it added the image in here. Now, we're going to add this headline and paragraph. So, I'm going to add a line break. Let's have three line breaks just for good measure, and we're going to start off with a span. You can't use headline tags in HTML design or paragraph tags for that matter, you want to use font tags or span tags, because that is what email clients can all understand. So, we're going to add some inline CSS to style this span tag, and we are going to change the font family. You can change it to whatever you want, but I am using Arial, Helvetica, it's pretty good, Helvetica, San-serif, and let's make the color of this, let's make it, let me try this blue, let's see what this blue looks like. Then let's make the font size of this span, let's make it 30 points. Let's add a line height to it just to give it a little bit extra breathing room. Let's do 140 percent. Refresh. Go back. Reload. Why is that not working out? It's because I didn't put anything inside the span tag, that would help. So, the headline is discover your new favorite city, period. Save, refresh, nice. Now, let's add another span tag below it. Actually, so we don't have to retype everything out again. Let's just copy the opening span tag and paste it, and then we're going to change the font size to something a little bit more readable for a paragraph. Let's do 10 points, and then let's change the color of this. This is going to be the opening paragraph, you want it to be readable, we don't want a full blue paragraph. This is going to be a 25272e image is my favorite like charcoal black color to use, and we're going to close that span tag. Then from the word document that I provided you, let's copy-paste the paragraph in, and then we're going to add a learn more link. Now, let's go back here refresh. So, as you can see, because these are two span tags, they're showing inline with each other. Unlike the paragraph tag and a headline tag, it's not adding in a line break on its own. So, we're going to do that. So, after the headline let's just add two line breaks, save, refresh, cool. Something I want to do with this before we add a link, we're going to add an HTML entity or a special character that is an a row that looks like this. This little right facing arrow adds a little extra pop to the link as some people like say, and makes it just a little bit more clickable looking. So, this is called the right arrow, but it is great in using &rarr, or rarr, whichever that we call it. Go back. Refresh. So, as you can see it, the cute little arrow in there, and we're going to wrap this learn-more inside of a link. So, we have anchor tag, and then the reference. It's working great, now let's close that anchor tag, and we're going to make this the link that is inside of the word document. Paste it, and we're going to add inline CSS for this link to change the color of the link because right now it's just the default, like deep purple or whatever it is the default anchor tags are in browsers these days. So, we're going to do a style check, just like on the span and then we're going to say color, and let's just use the same blue in the headline, semicolon, close that, refresh. Now we have a nice blue link that links out. We're also going to want to make this image clickable. Most people, when they click in an e-mail, they aren't going to click on the small links they'll usually just click on the main image. So, you'll usually want the most important thing in the e-mail to be the link in the hero image. So, if we go back to the image here and then in front of that, we are just going to have an anchor tag, and then the h-reference, and then we're going to close that anchor tag, and we're just going to copy that same length right here, paste that in there, and I can see it's clickable. A little trick that you'll want to do when you're making images clickable, sometimes if you're insert an email clients, it will add this really weird border around clickable images that doesn't really gel with the rest of your design. So, you can add a border at a view of zero to the image itself, not to the anchor tag. Then that will eliminate that border that you'll see inside email clients. So, it looks like that's it for this opening intro hero image headline email. I'm not really liking that color on this headline. So, let's adjust make that headline the same exact color as the paragraph there. Now, let's work on the three columns that are below this opening row.
9. Project Part 2: Three-column row: Now that we added that first row, let's add the second row that has three columns going all the way across. So right now, everything is inside of this one row here. So we're going to need to add a separate row below that, so TR, TR and beside TR, of course, you need TD, table data. So that's adding one column because this table row has one column, the one below it needs to have one column. And then we're going to nest another table inside of that column to get the three-column look. It's column within columns. We're going to add one table row because, as you can see, there's only one row that contains three columns. We're going to add three columns, so three TDs, save, reload. You can't see anything because there's nothing in them yet. So each of these have an image. So we're just going to add in the images, image. Hope I'm doing it right. Image source, inside the source then type images folder and we're going to start off with this one. Save. You are going to add your alt tag. A designer always add alt tags. It's Casa de Cadillac. Save. And then we're going to add the image to the second one, image, source inside the images folder. That one is the last bookstore. Then we're going to add an alt of the last bookstore, which is an amazing place you have to go. Image, source, and this third column here inside the images folder. And then this is going to be the Hollywood sign. Alt tag, Hollywood sign. Just say Hollywood. If we go back, refresh. You can see the three images. They're lined up nicely in three columns. So now we are going to add the actual content, so we're going to add these little subheadlines, and a paragraph, and a link to each and every one of them. So, what we can do here is we can just copy the headline of the original one. Copy the span of the original paragraph, so these two spans and we're just going to paste them right in here so you don't have to rewrite all that all over again. And then we are going to lower the size of that paragraph headline that we just added, which was originally 30 points. Let's just change that to 20 points, make it a little smaller. Then we're going to update the subheadline, oops, can't type and talk at the same time. Refresh just to see what it looks like. Still a little too big. Let's just do 16 points. What's Cuppy big content from the word document and past it in here. Save. Refresh. So, as you can see again just like up here because these are not block line items or inline items, it's just adding it right next to the image. So, we are going to add a break after that image there. I think we can add another break. That's better. We're also going to add- let's add a break here to this link, just one. Of course, now the link is on its own. So you can see things are shifting around but it will look a little bit different once we add the content into these two. So let's just copy everything. Actually, no, we should probably change the link because that's not the right link. So, going back to the Word document, copying that URL, pasting that URL, now it's three URL. Now let's just copy both of those spans and all of its content. Go to the second column here. We're going to paste that in there, and then we're just going to put the correct headline into this subheadline. Bookstore. Refresh. Copy the correct content from the Word document. Paste it. Go back over here and copy the correct link address. Paste that in here, refresh. Okay, it's looking better. Let's take this again for a third time, paste that, and now we are going to take this subheadline and put the Hollywood sign, and then let's copy the correct paragraph. Paste the correct paragraph in there. A lot of designers just copying and pasting. Copy link address, paste that URL over the original one, and boom, refresh. Okay, something's not looking right here. So everything's kind of shifting around a little bit. And some of these paragraphs are just kind of running together. So, what we're going to want to do is we're going to want to add some HTML attributes to this table here. So as you remember from the previous videos, you can add attributes that affect only the nested table and not the entire table. So what I think we should do is on this nested table, let's add a cell padding of 10 pixels. Refresh. It's still looking a bit off, but now we have 20 pixels between each column, which is much more readable. I think I figured out why this one looks different than these two. So, as you remember, we added an extra line break between the image and the subheadline, but we didn't add it to the other two when we copied and pasted everything over. So we're just going to, these two breaks here, let's just paste that after the second image and after the third image, save it, refresh, and now you can see everything is lined up perfectly. So, that is it for this column here, so now we can move on to the final row of the email, which is the two-column row.
10. Project Part 3: Two-column row: So now we're going to add a new row here that has two columns and will look just like this when we're done with it. So we're going to go back in here and this is the last row that we worked on. So we're going to add a row below this row and nest another cable inside of it. So we're going to create that row. Create that table. Data column so now it's one column row, and we're going to nest that table inside of it. Then one row, with two columns. Cool. So, this first column has just an image. So we're going to image source, inside the images folder, and this is observatory.png. I'm going to add alt tag of the Griffith Observatory, close that. You're going to go to the second column, and so you can see the image here. So, this column, second column is going to have the same subheadline and paragraph sizes. So, we can go back to the code and copy the subheadline and paragraph from one of those columns and paste it, and we can just put the correct headline into it. We can copy and paste from the word document. Paste that right there and copy and paste the correct row right here. Save. Go back. Refresh. Cool. So now we have a row with two columns. But like what was happening earlier with this three column row, there just isn't enough space between these two columns. So, we are going to go back to the nested table. Right here and we are going to add a cell padding of 10. Refresh. So, now you can see it added 10 pixels to each column making a total of 20 pixels between the column. Good old algebra, and it also shifted over this image by 10 pixels and now it lines up perfectly with this row above it. So yes. I think that is it for the rows. Onto the next video.
11. Project Part 4: Final tweaks: Hey, so we are almost done with making this template look more like this finished goal here. So, the most astonishing difference between these two is obviously the background color. So, we're going to work on making this background table this taupe color here instead of this plain browser white behind it. So, let's go to this, where it says background, there is a little tag here. Let's add a bgcolor to that, that's the main table that contains all of the other tables, and we're going to add the x-code for that. Save, refresh. So as you can see, it added the background color to this, but there is also this funny looking white border going all the way around the browser. So, this is actually the body tag. The opening body tag needs a color added as well, and we're going to do the same color or maybe you like the border and you want to keep the border. You can keep the border if you want, but we're getting rid of it in this one. Refresh, no more border. Okay, something else that we should probably change is there needs to be a little bit more breathing room between the opening paragraph, intro row, and this three column row here. There's just not enough space, there is a lot of space here, no space here, let's fix that. So, if we scroll back down and find this opening paragraph, let's just add two line breaks there. Save, go back, refresh, and now you can see there's a little bit more breathing room.
12. Next steps: If you haven't already, complete a version of your e-mail file, and upload a screenshot to your project in this class. To send your email, you'll need to use an email provider like the ones mentioned at the beginning of this class. I'll be covering these more in-depth in another class, or you can find more information on SkillShare. Comment below if you have any questions. Good luck.
