Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In this course, author Tim Slavin shows how to design and code an HTML email newsletter, including setting the final dimensions and color palette, placing images and copy in the code structures of the file, and defining the newsletter's parameters with tables within tables. The course demonstrates each step of building an HTML newsletter, up to testing and sending the email.
In this video will I copy to our email and go to work on spacing that surrounds our content. This is where we left off in the prior video. Now let's get to work on copy. We will go to our email copy text file, typically, when I code an HTML e-mail I will extract all the content out into a separate file, so that I don't actually have to type in the code. Most in my coding then is simply Copy+Paste. We will start at the top of the email. Ctrl+C or Command+C to copy, Ctrl+V or Command+V to Paste.
I'll bring it up a line, and we will go to our copy table data cell. Select this, and our copy extents from here, down to here. So we will Copy and Paste. For our address information, we need this line of copy.
Our copyright is a little bit different; we have it here, Copy and Paste. Just make sure I copy this, maybe the same, but I just want to be sure, because I was careful to copy the text correctly the first time. We will save our work and check our display. What we will do next, is we will add paragraph tags and we will begin formatting some of these bits of copy.
Start again at the top. For this small table, I want to add the font styling information at the table data level, and the reason is to reduce the amount of code. We are going to add a link here, and therefore, I don't want to have to code the paragraph tag and then code the link, so I will separate the two chunks of style information. I will close it off, and I will go to my CSS prep file, I will select, Ctrl+C or Command+C to Copy. Ctrl+V or Command+V to Paste.
I will add the link at this point. Notice that I set a target ="_ blank" value that is for webmail. We don't want any link to open up in your email client. You wanted to open a new browser window, and because these top and bottom links will be mouse print effectively, we will set the font size to 10. We will keep the line-height is fine, and we will go back and style the link layer.
Next, we scroll down to our copy. This line is our heading, so let's set it with the H1 tag. We also could use spans or divs, but I try to avoid them in HTML email code, because older email software isn't guaranteed to acknowledge a span or div. For our subheading, I will set it at H2 and down here, I will set p or paragraph tags and I will create a close p tag, highlight, Copy and then Paste.
This chuck of copy is a single block, so we need break tags. For older email software, we need the old HTML break tag, not XHTML. We'll Save and then scroll down. Here let's do the same thing we did up above. We will set the style for the font at the table data cell level, and that will allow us to set the style for the link separately, and it will save us a little bit of code, make it easier to read. We will scroll up here, and we will start with this for now.
We can always change it later layer. We will go back to our address information, and for now we will set it at 10 pixels, and we will set the anchor tag links later. We will take the same strategy here; we will set the font information at the table data level. We don't need to set the font for the Facebook image however, so let's save our work for now and see what we have. All right, several things, first of all we need to change the color of our heading and our subheading, and we need to define the font information for them a little bit better.
Let's also take a quick look at the original design. You'll notice that the phrase Private Tours & Tastings in October is bold, and you will notice that the line that beings To RSVP please reply also is bold. So let's remember to add those values as well. In addition, we can also set the color for the footer copy. So we will start at the top, we will begin with this font information, we will scroll back down, Ctrl+V or Command+V to Paste.
We probably want the font size for our heading to be around 16 pixels, we want the font weight to be bold, and we want a Serif font, we will start with Georgia, Times and Serif. This allows older email software to degrade. If it doesn't have Georgia, it will select Times, if it doesn't have Times, it will select Serif, and because this whole copy block uses Serif fonts, we will simply copy it for our subheading as well.
We will go to our worksheet and we will figure out what our colors are for the headings, subheading and copy. For our heading we have our color as 35411d in hexadecimal. For our subheading, we have as a color 9b9d9a. Now we can copy the style information for the heading into the paragraph tags. We will of course adjust the font size and the line-height.
Up here I notice that the line- height is actually set incorrectly. It should be at least equal to the font-size. We will set it at 16. The addition if you remember, the subheading is Italicized. So we will set that as for emphasis and we will close it off here. If you recall Private Tours & Tastings also was Bold, so we will set that in Bold. And this To RSVP line also was set in Bold.
I forgot to reset the font-size. Let's go back and set this. It's 12, 12 and 12. We also can increase the line-height to 16, 16, and 16. So let's save our work and see what we have. Let's close, let's look at our original design. I see that actually in our original design our font is San-serif for the actual body copy.
So we will make that change, and I see that we have more space in between the lines; it's a little bit bigger. So let's go back and make those changes. So we will make the leading 18 pixels, 18 pixels, 18 pixels. So I will scroll down to the paragraph tags, and I will change this definition to Arial, Helvetica, and San-serif. Then I will copy this change to the other paragraph tags, not the heading or subheading.
I also need to set this line- height to 18 to make everything equal. Let's go back and change our paragraph definitions to make the font-weight normal. We are only updating the paragraph tags at this point. That's much better. Now that we have our content figured out, let's work on issues of margins and padding.
There are currently no FAQs about Creating an HTML Email Newsletter.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.