Pre/View a HTML Email in a browser as if it was Outlook

Question

Looking a project where you have a designed email in HTML but using your favourite browser you want to see what the email will look like as if it was being viewed in Outlook, GMail, Apple Mail, Hotmail, etc....

This is where the question becomes two parts.

You know in Chrome you can preview a page by selecting a device? As the designer of the email template it would be nice if you could do the same in Chrome or Firework and with an extension do that. Does anyone know of such a plugin/extension.

Now back to the main question.

What I'm trying to do is take a HTML Email and preview in a browser as if it was being viewed by a email client. Does anyone know of either a PHP library or (preferred) a JavaScript or jQuery library that in essence changes the tags & css to give you an idea of what the email would look like as if is what MS Outlook for example.

I know there are a lot of sites out there that offer this feature as part of their preview email feature in email marketing, etc.

However I'm trying to build this feature into a project that can't use those sites.

Any ideas??

Answer 1

You cannot easily mimic any of the email client's preprocessors. These are proprietary and used for more than just checking the HTML prior to rendering. It is also a large part of what keeps emails safe. These would not be shared else there would be many dubious characters that would use this information for ill will.

The alternative (that is used by most testing sites now) is a large task. Basically you would need to create an account on each email client you want to test on and then have a device that is able to pull that live, each time you wanted to test it, and screen shot and send to whatever location you want them collected at.

You would need not just each email client, but also the browsers that people view their webmail clients on. You are likely looking at over 40+ different instances per test, and that is still not comprehensive (leaves out the variance of the many different Android mail choices).

Each email client uses it's own preprocessor and many different rendering engines as there is no standard for email like there is for web.

Unless you are looking to create this as a business, it is much more effective and efficient to purchase an account at Litmus or Email on Acid or something similar than to build your own.