New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Testing the email in BrowserLab

From: Creating an HTML Email Newsletter

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.

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.

Show transcript

This video is part of

Image for Creating an HTML Email Newsletter
Creating an HTML Email Newsletter

14 video lessons · 18403 viewers

Tim Slavin
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.