New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Creating an HTML Email Newsletter
Illustration by Richard Downs

Placing your copy in the code


From:

Creating an HTML Email Newsletter

with Tim Slavin

Video: Placing your copy in the code

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creating an HTML Email Newsletter
55m 25s Appropriate for all Dec 07, 2011

Viewers: in countries Watching now:

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.

Topics include:
  • Adjusting margins and padding in the code
  • Setting the look for headers and footers
  • Testing the code with tools like BrowserLab
  • Building a TXT equivalent of an HTML email for simple email readers
Subjects:
Business Online Marketing Email Marketing Marketing
Author:
Tim Slavin

Placing your copy in the code

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.

 

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating an HTML Email Newsletter.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.