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.
This video shows common layout and spacing problems you might encounter as you code HTML email, along with solutions. The main layout problem people find when they test their emails have to do with gaps and the alignment of their tables. Both of these issues, gaps and alignment, can be addressed with the HTML table code. All HTML tables that you create, for example, should have this set of code as a model. For example, every instance of table that you use, you should set border = 1 while you are designing and coding the layout.
You should set cellpadding to zero and the cellspacing to zero, and you should define the width. In addition, when you create your table data cells, you should set the valign, or vertical align, to top. You should set your align, in this case it's to left, but in some cases it may be to the center or to the right. And you also absolutely, at the TD level, should set the width; this will help with most alignment issues. In addition, sometimes you'll see gaps around images in older email software.
Specifically, you might have your code this way with the table data cell opening and defined on one line, your image on the next line, and the close of the table data cell on the next line. This looks nice and clean and is fairly easy to maintain; however, some older software will add a gap underneath the image to account for the table data cell being underneath the image. The way to correct that if you find it in your testing is to simply turn this into a single string of code, like this.
It looks more complicated, it's a little bit more difficult to maintain, but it will fix the gap underneath an image. The other issue people find with images can be resolved with these two style declaration: setting border equal to None and display the block. Specifically, Hotmail will add a gap if you don't set display to block for images. Finally, for layout issues, if you are trying to get pixel-level control, you may find that you need to remove your paragraph tags, your p tags, and move the style declarations up into the nearest table data cell, as we show here.
Here is the text that would normally be wrapped in p, or paragraph, tags, in HTML, and here's a style declaration for the font that normally would be in those paragraph tags. Instead, we've moved it up to the table data cell. Layout problems with an HTML email often can be identified easily when you set the HTML table border to 1. This lets you x-ray your table rows and columns. For example, you can also see gaps underneath images if you can see where the bottom of the table row is.
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.