How can I detect if an HTML email is being opened in Outlook 2007 or 2010?

Question

I am currently trying to write a newsletter for the company I work for. The newsletter appears correctly in all major internet browsers (IE 5.55 to 9, Chrome, Firefox, Opera), but when anyone opens it in Outlook 2007 or 2010, all the fonts look "blown up".

I am aware this issue is because of Outlook's way of rendering HTML like Word would, and if I manually "shrink" the fonts, they look good in Outlook but not in any other email software.

My question is this. Is there a way to detect whether or not an email is being opened in Outlook, or even Word? Given that Outlook doesn't allow JavaScript, this solution would have to be in plain HTML. My plan would be to detect the email browser and change the font dynamically (a sort of if-else).

Thank you for your help!

Answer 1

Conditional Comments

It might be possible to achieve this using conditional comments.

<!--[if mso ]>      ...<![endif]-->    <!-- Outlook -->
<!--[if gte mso 12]>...<![endif]-->    <!-- Outlook 2007+ -->
<!--[if gte mso 14]>...<![endif]-->    <!-- Outlook 2010+ -->
<!--[if gte mso 15]>...<![endif]-->    <!-- Outlook 2013+ -->
<!--[if !mso ]>     ...<![endif]-->    <!-- Not Outlook -->

Since Outlook supports style tags in the head or body, something like the following could be done:

<!--[if gte mso 12]>
<style type="text/css">
.myClass {
    /* Special styling for Outlook 2007 and later */
}
</style>
<![endif]-->

The use of conditional comments in Outlook 2007/2010/2013 tested fine on Litmus.

Answer 2

With previous versions of Outlook (2003 and bellow) you could use the IE CSS hacks, now you can't.

And related to your question, you can't detect if it's being viewed with Outlook and even if you did, and as I said, you can't really have conditional styles:(

My suggestion is to style the text with pixels (I bet you're using points, right?). I'm saying this because I've done several html emails destined to various email clients, and the font-size is the same (more or less, but at least not very different) between different email clients.

The only thing that won't be possible to style is shrinking/reducing line-height. Outlook doesn't allow that. Also the style should to be set inline.

Answer 3

The common pratice used in the past was to add an image in the html. You can add to them a param to keep track of the emails.

<img src="image.php?email=123">

Of course these day almost every email clients block further requests.