Start learning with our library of video tutorials taught by experts. Get started

Creating an HTML Email Newsletter

Testing the email in BrowserLab


From:

Creating an HTML Email Newsletter

with Tim Slavin

Video: Testing the email in BrowserLab

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating an HTML Email Newsletter
55m 25s Appropriate for all Dec 07, 2011

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.

Topics include:
  • Adjusting margins and padding in the code
  • Setting the look for headers and footers
  • Testing the code with tools like BrowserLab
  • Building a TXT equivalent of an HTML email for simple email readers
Subjects:
Business Online Marketing Email Marketing
Author:
Tim Slavin

Testing the email in BrowserLab

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating an HTML Email Newsletter.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked