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 this one-column email. We used HTML tables to create boxes so that we can begin to put content into those boxes. Let's now work on adding content. If you remember, we used Notepad++ to code the tables. One of the features of Notepad++ is that it allows you to roll out tables. So we started first with this pseudo body table, then we had a wrapper table to contain the email, and then the email code itself.
So, let's begin to add content. As we noted in a prior video, we have basic HTML p, or paragraph, tags on one line, the content on the second line, and the paragraph tag closed on the third line. This allows non-technical people to come in and add content and change content. If you were to put it all together as a single stream, it becomes very, very difficult to maintain your content within an HTML email template. So the first type of content we add is at the top of the wrapper table for HTML email, and it's typically two pieces of content.
If you have a link to a web page version of your newsletter, it's very good idea to put that at the very top, in case people don't get the rest of your email for some reason. In addition, it's a good practice to create a message that tells people how you got their email address and where they can unsubscribe. Both of these messages tend to calm people down and keep them from hitting the spam button in their email software. So let's scroll down a little bit further into our HTML table, to the content.
So if you recall, we had divided our design into a series of boxes, and we've now added content into this box in the upper left, directly under News. We've created a heading1 tag, and you see that we close it on a second line, and in between is the actual heading. We've done the same thing for paragraph tags and for the anchor tags, for the links. I also would point out that we're using, for bold, we are using the b tag.
In the same way that HTML email newsletters require you to use HTML tables to structure the layout of the email, you also need to use the older HTML tags for bold, italics, break, etc. So here we've got the bold tag around a phone number, and we're using break tags. The reason to use these older HTML tags has to do with the fact that some HTML email, like Lotus Notes, requires the older tags.
So here we have added in the content to our News section in the HTML table. Now let's look at the footer. If you recall, we have in the footer a set of links over here: Tour, Find a Store, Contact, Shop Online. Then on the right, we have the FAQ and Support links. In between, we just have dead space to layer over the bottles, to make sure that our footer links don't fold over the bottle image. So let's look at the footer/end code. You can see that again we have the paragraph tag on a single line, the link anchor tag on a single line, we've got the text, and then we close them all off.
We've simply repeated this process for each of these links on the left. We again have our blank space 70 pixels wide to accommodate the picture of the bottles that we're layering this over. Then finally, on our third and right-hand table in the footer, we follow the same pattern. We have a paragraph tag on one line. We have the text wrapped in bold. If we really wanted to, we could put this, or break this up, into single lines. We have our anchor tag here in a single line.
The final thing to note about copy is that the email service you use to deliver your emails will add the unsubscribe link at the bottom of all of your emails automatically; therefore, you don't need to worry about it at this point. With these basic copy elements in place, the next video will show how to style this HTML email to make it already to send.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 90578 Viewers
80 Video lessons · 137945 Viewers
59 Video lessons · 56687 Viewers
52 Video lessons · 70307 Viewers
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.