Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last video, we coded the layout of a two-column HTML email. Let's work now on adding content. This is where we left off. We had a very straightforward HTML table layout, with the header, the content area, and the footer all clearly defined. If we go back to our original design, you'll see some differences of course. For example, the EXPLORE CALIFORNIA block should be aligned to the right. We need all of these images and content. We need smaller fonts, et cetera. But let's begin with the content.
We begin with the pseudo body table and the wrapper table for the HTML email. Next, we'll add copy, so we add a link to the web page version of the newsletter if it exists. It tells readers how you got their email address and where they can unsubscribe if they want to do so. In the email itself, we add copy for the left-column area. We know, if we go back to the original design, that the W is to be large and to have color.
We won't deal with the color or the size today, but we can add a span around the letter W to remind us that we need to style this later. In addition, there is a pale green MONTHLY SPECIALS box. I have created a single image that will link to a MONTHLY SPECIALS page. Alternatively, you could code this as a table, but we'll leave it as an image. We add in the Tour header Package image that is at the top of the right column in the content area.
Then we'll add each of the tours, their logo, and their copy. You can see that each instance of a Tour Package image copy and EXPLORE link make up a single HTML table that is nested within the table data cell. If you go back to the table here where we left off, you'll see that we have the tour image as a block and the tour copy as a block, but it's still nested within the larger table data cell. After we add all of the images and the copy and the links for each of the tours, we then move down to the footer table.
If you recall, in our design the footer has two blocks of text and links and three blocks on the right-hand side for books with a BUY button for each book. Here in the footer, you can see we've added content. We've put the paragraph tag and the anchor tag on their own individual lines, the copy on its own individual line, and then we close off the anchor tag and close off the paragraph tag. This allows non-technical people to easily go into your email newsletter template to change headings, links, et cetera, without getting involved in the code.
Scroll down here. You'll see that we've added the second block of content and links, the FAQs and Support. Then we've added content for each of the books. This code is very much the same for each of the books; the only difference are the images and the URLs. We also use a target="_blank" for each of the links, so that if this email is viewed in Hotmail it will open a brand-new window instead of opening your web site within Hotmail. Finally, at the bottom we've added the copy for EXPLORE CALIFORNIA. This is all the information that email marketers need to add to comply with the US CAN-SPAM law to avoid being labeled as spammers.
This is the final result once we've added all of our copy. If you compare this with our final design, you'll see, for example, the EXPLORE links are to the right. This is what we'll deal with in the next video.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.