May
2nd

Seeking: Online Email Preview Tool

Have you ever noticed how many email clients block images and display the alternative text? I’m curious if anyone has actually seen this emulated utilizing JavaScript or Server-side scripting. I’d like to get a hand on a tool that does it. Over time, I’m sure that I can develop such a page… I actually started playing tonight. Here’s a function that removes all of your images on a page:

function replace() //remove images
{
var imgs = document.getElementsByTagName('img'); //array
for (var i=0;i<imgs.length;i++) //loop
{
imgs[i].src = ""; //set the images to nothing
}
}

It’s pretty simple Javascript. The first thing I do is collect an array of the images in HTML. An array is a group of items. I told the javascript to get every element that has an img tag. (That’s how you display images in HTML). Next I ‘loop’ through the array by telling it to start with the first item (=0), go for as many items there are (imgs.length), and when it’s done with the loop add 1 to move to the next item (i++).

What basically happens is that the array collects the location of every image on the page, loops through them, and sets each to nothing. What I’d really like to do with this is remove the image but actually display any alternative text – just like an email client would. I’d also love to remove other table and div elements to render it as it would look in many Mobile Clients. This would replace inline style tag and font formatting.

Has anyone seen or built anything like this? If so, drop me a note in my contact form. If it’s written in C# or especially JavaScript, it may even be something I could be authorized to purchase. The advantage of JavaScript is that it could be turned off and on dynamically – a really nice feature! Meanwhile, I’ll continue working on it myself!

  • At Agency.com we use a product called pvIQ from Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) that is a big help with your problem. We send our test emails to our various ISP test accounts and then pvIQ retrieves jpgs of the rendered emails from each of the accounts, as they would appear in different browsers. This saves us enormous amounts of time, as all we have to do is look at the resulting jpgs. I'd recommend it.
  • Hi Mark,

    Pivotal Veracity has some incredible tools! I know they've recently launched an API as well. I'm trying to do something a little simpler, just a 'quick' look that doesn't require actually sending the email out. Imagine just a button to click and you can emulate how it would look, just to take care of the low-hanging fruit.

    Doug
  • Hi,

    I haven't looked at this for a while, so I might be wrong, but don't the portals keep changing their mail rendering software? If they did, I would think you'd be constantly playing catch-up if you tried to use your own test software. That's why we use pvIQ: it sends us exactly what the portal would render.

    Mark
  • You're absolutely correct. My thinking is simply developing a 'quick & dirty' previewer that someone could execute before sending to something like pvIQ... things like Alt tags and mobile previewing (tables removed, etc.). I definitely don't want to try to keep up with the mess out there with Email Clients! Those folks at Pivotal Veracity are the pros at that!

    Doug
  • I think a potentially useful addition to your idea would be the ability to preview the emails in the same manner that popular email clients do. It would take some time and research into how each one does it (what elements to they strip, leave in, etc.).

    You build a series of filters to choose from. Say, a GMail filter, Yahoo Mail, Outlook (PC, Mac, etc.) filters, etc. So, instead of having to have dummy test accounts with every service under the sun, you could cycle through previews of each one relatively quickly.

    ...maybe I've said too much... ;)
blog comments powered by Disqus