Outlook 2007 and the Battle for Backgrounds, Part 1

Robert Paveza — Thu, 22 Mar 2007 19:51:00 GMT

As a web marketing firm, my company manages to generate quite a bit of e-mail for our clients (all opt-in, of course), and one of the ways that we do that is by templating out the entire HTML e-mail into a user control. The nice advantage to this is, of course, that we're able to pull in whatever kind of data we need and basically treat the e-mail like a page.

Our production team can generate some really great artwork and layout, and up until this point it's worked great. They've been doing extensive testing to make sure that our generated e-mails work in Outlook/Outlook Express/Thunderbird/Gmail/Hotmail/etc., and generally things have worked great. It wasn't until we started using Outlook 2007 that things were mucked up.

For those who don't know, Outlook 2007 no longer uses the Internet Explorer HTML rendering engine, which is probably a positive thing from a security standpoint. It uses the Word 2007 rendering engine, which severely cuts back its HTML and CSS rendering capabilities. Among the problematic rendering logic is Outlook's inability to render background images, something that has been crucial to our placing of dynamically-generated text into e-mails (for instance, a "Send to Friend" feature might include a note to the recipient). Static text would be no problem - our graphic artists would simply include the copy in the final image. But for dynamic text, we were left with a question of functionality - do we simply not include dynamic text, or do we put it over a solid background?

Dynamically generating images with ASP.NET has been common since it was first released, and for a short time (through Beta 1), ASP.NET 2.0 was going to handle it natively with a new file type, *.asix (it was removed due to architectural difficulties). Especially for low-volume e-mails (such as one that wasn't likely to generate tens of thousands of simultaneous hits to the web server), this seemed like an elegant solution, and it would work in all e-mail clients equally-well. The only real question was how to get the data to the server efficiently.

I opted out of storing the text in the database in this instance because, well, the dynamic text was an afterthought and I didn't really want to go back and modify the db schema (nor did I think that the text was worth storing). Rather, I came up with a slightly roundabout way of having the client specify the message itself: since dynamic images are generally .aspx pages that send image data over the wire instead of markup, I simply include a query string as part of the image's URL (if we want to be even more creative and SEO-compliant, we can use PathInfo instead of QueryString). The last question is how to get such data to the image without it looking funny (for instance, by having %20 encoded for spaces), and that is answered with Base64 encoding.

Base64 encoding uses six bits to represent byte values, and so for every three bytes there are four Base64 characters. Base64 is never garbled by browsers because it uses the 26 uppercase and lowercase characters and two standard characters + and / (note that if we used PathInfo instead of QueryString, we should replace the / character with something else such as - or _ so that we don't run into our web application believing we're running another page, in the event we're using PathInfo for URL rewriting techniques).

I've created a new control that can be used in our e-mail templates. It's entirely code, and very brief:

    public class DynamicTextImage : System.Web.UI.WebControls.Image
    {
        private string m_msg;
        public string Message
        {
            get
            {
                return m_msg;
            }
            set
            {
                m_msg = value;
            }
        }
 
        protected override void OnPreRender(EventArgs e)
        {
            if (this.Message != null && this.Message.Length > 0)
            {
                byte[] msgBytes = Encoding.ASCII.GetBytes(this.Message);
                string message64 = Convert.ToBase64String(msgBytes);
                this.ImageUrl = string.Format("{0}?t={1}", this.ImageUrl, message64);
            }
 
            base.OnPreRender(e);
        }
    }

This allows the image to be inserted in the same way a standard <asp:Image> control is, with no additional markup required by our production team and very little code by the developer working on it (this.dynamicImage1.Message = this.txtMessage.Text;).

Part 2 of this article will discuss the code behind generating the dynamic image and sending it to the viewer. I'm sure for those of you who have used dynamic images in the past, the wheels are already spinning as to how you can adapt this to be effective at your organization.