Start learning with our library of video tutorials taught by experts. Get started
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.
This is where we left off with our HTML e-mail; it's fully coded and ready to test. To begin our test, we need to put our HTML e-mail file on a remote web server along with its images. Our current file is number 4 and we'll copy our Image folder and we'll drag them over. Then I double-check if this file does display over the Internet, it does, we're ready to begin testing. To begin our testing, let's start with browser lab, this is currently a free service that Adobe offers where you can test how your HTML e-mail displays against various web browsers.
We've created a browser set of just Internet Explorer browsers, and we go to the Test page, we'll go back to the URL where our HTML file is located, we'll paste it into the URL. We can see that at the top, the HTML e-mail displays fine, including our background border. We also can see that our spacing and alignment generally is okay. The copyright line and find us on Facebook line might be pushed down a little bit, but otherwise it displays perfectly.
With Internet Explorer 7, we have this same result and with Internet Explorer 8, as we expect, everything looks great, and 9 as well, because both 8 and 9 are pretty much standards compliant. The only issue we found has to do with spacing of the copyright line and the find us on Facebook line, let's see if we can tweak this just a little bit. We'll scroll down to our copyright; let's see if padding will help us out.
Let's do 10 pixels of padding, and we'll do 0 on the bottom. 10 pixels of padding on the top and 0 on the bottom. I also notice here, for this table data cell. we have not defined margins and padding at 0. For older e-mail software we might want to play it safe. So let's copy this information from css prep file, we'll make a simple style declaration, and we'll type Ctrl+V or Command+V, just a little bit of safety.
Probably, we could set it at 7 or even 8 pixels of padding on the top, with the changes made, we'll, FTP the new version over and we'll go to browser lab, scroll here to the top, hit Refresh, and scroll down, and that looks great! We have good vertical height and the text is aligned to the middle of the Facebook icon. Let's double-check with Internet Explorer 6 and 7; to be sure, we get the same results, that's much better.
Now that our HTML e-mail has passed browser lab, and we can be certain that any older e-mail software that uses Internet Explorer 6 or Internet Explorer 7, will display our e-mail fine, the next with testing is to use an e-mail delivery service to test how our e-mail looks in different e-mail software. The e-mail delivery service that I want to use for testing is Campaign Monitor, but there are other ways to test your e-mail. MailChimp for example has a similar service.
I create a campaign called Two Trees Test; we need to update the HTML, we go back to our remote server, we Copy the URL and we Paste it here, with Ctrl+V or Command+V and we click Get my campaign. We want to preview the campaign to make sure we've got the right e-mail, and we do. Next, we want to click the link Design and spam testing.
On the right we want to click Run a new test, we click Test this draft. At the bottom click Submit payment and run the test button. Now we wait a few minutes for the results. On the right hand column you'll see a series of Web-based e-mail clients that our e-mail is tested against, Desktop e-mail clients, Mobile e-mail clients, and then they also have Spam filter results. As you wait, on the right, you'll see the different names of the e-mail clients fill in and become dark as the test complete.
Now we've got some of our results, so we can check those while we wait for Apple Mail and other e-mail clients to come back, let's check first with AOL Web. The top appears great, it picked up the background tables, and the vertical alignment on our footer, our copyright copy looks great! Next, we'll check Gmail, that also shows the background table, and our vertical alignment in the footer also works.
Hotmail, we can see that Hotmail has changed the font color, there is a way to address that if we want to test further. Let's see what other issues come up however. MobileMe is problematic, both because it's going away, and because it doesn't respect the background color. So you can see that our copy block is see-through our logo only works, because it is wall-to-wall, and the footer table doesn't work at all. So there's really nothing we can do in that instance. With Yahoo! Mail we get results similar to Gmail.
So far the only real issue is Hotmail changing the color of our subheading. There are times when e-mail code works perfectly on every e-mail software, except one, as in this case. You have to decide how far to go with testing. If you want to continue testing in e -mail forever, until you solve the problem, you either need the e-mail software or pay additional amount of money for testing.
There are currently no FAQs about Creating an HTML Email Newsletter.
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.