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 · 18734 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now "Already a member? Log in

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
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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.