HTML email and Outlook 2007 summation

My journey into Office 2007 land is finally at an end. For which my client is happy, I expect. To recap, I have a modest ASP.NET (1.1) application that displays one simple webform, on which there are about two dozen TextBoxes and a dozen CheckBoxes. Users fill in some information, check or uncheck some email addresses and the send the form off to the requested email addresses.

The form is simple. There were a few formatting and required entry validators. Before I send the email, I remove a few control that aren’t needed, but other than that, it is a straightforward project. It was maddening that such an autocratic descision as to change the HTML rendering could complicate things so much (and cost my client money and inconvenience).

Here is a summary of what I had to change, how I changed it, and what I found out.

First, I found out that the only way to be sure of how Outlook would display the HTML was to install Outlook 2007. Word 2007 does not display the HTML the same way Outlook 2007 does. That alone should be enough to put the lie to the marketing fluff about user experience. And the validation tool doesn’t help at all either, since whether or not an element or attribute is supported has little to do with what the visual affect will be.

I also found out that unsupported elements are not ignored as MS states–at least not the way I define “ignore.” Input elements (ASP.NET TextBoxes, CheckBoxes, and so on are rendered as Input elements) are only ignored in so far as anything useful is concerned (say, the style attribute, or InnerHTML), but they will still render in Outlook as spaces delimited with square brackets.

In the end, I’m just glad it is a simple application, or I’d have had a nightmare. OTOH, if it was complicated I would have handled the emailed form differently. Anyway, here’s what worked for me:

  • Replace div and span elements with tables.
  • New 04/11/08: Replaced ASP.NET validators with server-side validation that registers a JavaScript alert if entries are missing.
  • Put all styles in-line.
  • Added Html label elements that pair up with TextBoxes and CheckBoxes (which render as text- and checkbox type input elements). Set display:none.
  • Before sending email, store text input element values in Html labels InnerText, and remove the input element. Store a “[X]” for checked checkboxes. (Very 1980’s.)
  • Removed Img element.

Note that in this I’ve lost the ability to have printer css styles applied, which isn’t fatal.

That’s it in a nutshell. In short, yes, I can shout an affirmation that Office 2007 sets email back five years. At least.

Microsoft chooses Word 2007 HTML Rendering Engine for Outlook 2007

As Gary Larsen’s classic cartoon illustrated, it’s another case of “too many scientists and not enough hunchbacks” at Microsoft. I admit I’m late to the bitch fest regarding HTML rendering in Outlook ‘2007, but it was only recently that I got my first complaint about munged HTML email after a user upgraded to Office 2007. That I’ve had only one is no comfort since that person sign my checks.

The problem for those of you who have been living under a grindstone, as have I, is that Microsoft changed Outlook 2007 to use Word’s HTML rendering engine instead of IE. If you support software that creates and emails HTML content, then you’ve either hit this problem, or will do so.

I’ve found some web posts from marketeers proclaiming the second coming with the change. By far, the majority of hits are blog posts (developers!) complaining bitterly about this change. I guess Mr. Ballmer no longer loves us. *sniff* But I digress.

The saddest part of searching is that the posts are almost all more than a year old, including one that states the usual Microsoft deflection “we want to hear about your issues and will listen.”

The only result I can see is a Microsoft CSS/HTML validation tool. I’ve installed it (in Visual Studio 2005) so I can validate my HTML against Word’s HTML engine. Yikes. It tells me “media”, “form”, “input”, “onload”, and so on aren’t supported commands. Oh, joy.

I’m not posting just to vent, but because I’m finding there are few practical suggestions for how to redevelop HTML so it doesn’t look putrid in OL’07 at the very least. Ideally, it will look identical between browser and email client preview.

By the way, the Outlook ’07 ribbon* apparently has a button “Other actions,” from which users can chose to view the email in the browser. (Um, doesn’t this seem, oh, I dunno, sorta ironic?)

In this case, I have a Visual Studio 1.1 Aspx application that collects some info on an HTML form, lets users select who to email copies to, and then emails the page (without some of the controls like buttons) as an HTML attachment. I remove some elements now. I will have to do more to transform unsupported elements like TextBoxes (which aspx renders as input elements, and seem to be the biggest problem) into supported elements.

As I redevelop the page, I’ll post with suggests of what works and what doesn’t. And if any of you know an Office ‘Softie, thump ’em upside the head for me, would you?

Relevant links:

The Party Line

Campaign Monitor’s Guide to CSS Support in Email Clients

Samples of HTML Rendering in Outlook 2007

Some Dolt Who Thinks Only Spammers Are Affected

* Ribbon? Give me a break. Since when does “ribbon” mean “menu that takes up a lot more screen real estate, thus hiding more of what you actually care about?”