Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course provides hands-on training on all aspects of email marketing, from crafting emails and setting up effective marketing campaigns to managing spam filters and evaluating delivery services. Author Tim Slavin introduces the fundamentals of email marketing, including the differences between HTML email and web pages, how to code emails that display properly on receipt, and ways to stay current with HTML email standards and capabilities. The course includes several project-oriented tutorials on creating multi-column newsletter layouts and multi-product offer emails, and also explains how to automate email creation, test emails prior to delivery, outsource campaigns, and address common coding problems.
There are three basic email designs: one-column, two-column, and multicolumn product emails. In this video, we'll code a two-column HTML email. Typically, this design is used to send an email newsletter. Here's the email in JPEG format that we'll code. The first thing we'll do is reduce this design into a series of boxes that we can then convert into HTML tables. So we'll focus on this design about an inch or two off of the screen, and then we'll reduce the elements of the design into boxes.
The first box, the largest box, is this brown color that it wraps everything. The second box wraps the entire HTML email. There are additional boxes for the header, for the content area, and for the footer. Within the content area, you'll see that we have a column that is the same height as five rows on the right, so we'll need to account for that. In the footer, you'll see that while we have one box, in fact the box is divided up into five different spaces. So let's look at the code.
First of all, we'll start with this pseudo body table. This acts like our HTML body tag. It corresponds to the dark brown box that wraps around our HTML email. In addition, we have a wrapper table for the email, and that corresponds to the box that contains the header, the content area, and the footer of our email. Within this wrapper table, we have a third table nested inside that contains all the elements of the email, starting with the header and then the content area and then when we scroll down, the footer table.
Within the email content area, we have a single left column that is the same height as five rows on the right. Within HTML tables, a rowspan is used to span several different rows, in this case five rows. We've typed in 'Content goes here', so we can see what that is. We've typed in the 'Tours Logo Here' so that we can see where that is placed. Here is what all our tables look like when I display it in Firefox, or any web browser. You can see, we have the table header, we have a content area, and we have a footer.
Within the content area, you can see that we have a left column that extends the height of five rows on the right. So everything appears to be set up for us right now. Now that we've coded the layout our two-column email, in the next video we'll add copy.
There are currently no FAQs about Effective HTML Email and Newsletters.
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.