Interactive

“World of hurt” is really the best description of the developer’s task in putting together a rich text email, the kind used to send newsletters and bulletins and anything with images. Improvements to HTML and CSS and everything that makes the web the web have been both broad and deep, so much so that it’s kind of a joke (and yet not really) that a good designer can probably locate a given design to within a year or two (yes, we really do say “that’s so 2008”, without irony).

Noting that email predates the web, and in fact goes as far back as the early 1970’s¹, Wikipedia accurately states that “an email sent in the early 1970s looks quite similar to one sent on the Internet today.” Nonetheless, there have been changes to email’s capabilities, mostly with the integration of colour, layout and imagery, so much so that many emails are essentially single web pages. (Interestingly, one theory has it that the web evolved as a way to stop everyone from emailing the same things to everyone they knew: by putting things in a single, identifiable place, everyone could come and get it later, saving bandwidth at a time when bandwidth was as expensive as gold dipped in oil). Popular web-based email hub Hotmail was itself originally “HoTMaiL,” showing how HTML could be added to bring all the things web designers were capable of to this new (to the mainstream) communication channel.

Email’s growth, though, has been slower than the web’s as a whole (we’re talking about its development as a platform here, not volume), for a variety of reasons, security being the biggest one and variable support within the multitude of mail clients, both desktop (Outlook, Entourage, Mail, Thunderbird, [and not forgetting Eudora, which once upon a time people actually paid for{!}] and so on) and web-based (Windows Live, Google gmail, Yahoo, each of these combined with the multitude of web browsers in use).

Grappling with all of the possible permutations of client and web service and how they affect the actual mail message is where the world of hurt comes in.²

Images are often not loaded by default in mail clients, because loading an image is one of the surest ways of tracking an email, and so verifying a given email address, which is often what spammers are trying to do. Styles may or may not be display, as many desktop clients (Outlook, we’re looking at you) can’t interpret them, and many webmail clients corrupt or remove them. Gmail, Yahoo, and Windows Live (née Hotmail) are like web browsers from ten years ago, but each from an alternate universe, in terms of what they support or don’t support. Oddly, Microsoft’s Outlook took a huge step backwards in 2007 by switching to a very redimentary HTML renderer for the display of rich text emails, instead of using the relatively decent renderer in Internet Explorer itself (one rumour has it the Outlook team overlooked licensing IE’s renderer, and so licensed the much cheaper Word renderer, which is just ludicrous enough to be true). Disappointingly, this means Outlook is roughly on par with a late 1990’s web browser, adding yet another alternate universe to our growing list above.

Security restrictions are prevalent, largely because email, in a sense, works exactly opposite to the web: when browsing the web, you are in control, and if you view a “bad” site, it’s your own responsibility (sorry). Conversely, email pushes things into your inbox, and you have, as you have undoubtedly experienced, very little control over that, so it’s important that potentially malicious features be restricted before they can do any harm.

Other features that make HTML emails harder to work than regular web pages include lack of scripting support (so no interactivity), lack of back-end processing, lack of embedded media (so no Flash animations in your mail), lack of background images, lack of advanced (and even intermediate) typographic controls, unreliable support for layout options, lack of support for iframes (useful for all those “Share this” and “Like” widgets on a site)…. Useragent sniffing, a common practice on the web, allows web developers to account for differences in web browsers, from something as forceful as, say, adding a few extra pixels to Internet Explorer 5.5 but not 6, 7, or 8, or as radical as sending completely different visual elements to different browsers — sadly there isn’t anything comparable for mail program sniffing.

Next in our world of hurt is the rise of mobile web browsing and email checking, where many people will get frustrated by large mail messages that take a long time to download to their portable device, especially if they delay other, more immediate mails from coming in. Tracking clicks from mail links is a pretty good, if not entirely reliable, means of evaluating any given mailout’s performance, but it also means “encoding” all the links, so a relatively straightforward link like http://mysite.com might become http://deliveryservice.com/redirect.php?url=mysite.com which will first record the click and then send the user on to the desired site; this can have the inadvertant side effect of making the mail look rather spammy.

Remember, though, that all of these limitations and frustrations are there for (mostly) good reasons, including security, performance and privacy. Your friendly neighbourhood web developer is striving to create a visually engaging newsletter for you and your customers without compromising any of those reasons, too, and with a fair amount of trial, error and retrial, we mostly succeed.

1. Bell’s famous first phone call, “Mr. Watson, come here, I need you” certainly dwarfs what has been noted as the first successful email ever sent, “QWERTY” ↩

2. 10 major web browsers for testing websites
    

   Browser	Popular Versions
   Internet Explorer	6, 7, 8
   Firefox	3, 4
   Safari	4, 5, Mobile
   Chrome	4, 5

     

   10 desktop mail clients for testing email 

   Application	Popular Versions
   Outlook	2003, 2007, 2010
   Entourage	2004, 2008
   Apple Mail	10.4, 10.5, 10.6
   Thunderbird	3, 4

     

   15 combinations of web mail client and web browser 

   Application	IE	FF	Sa	Ch
   Gmail	✓	✓	✓	✓
   Hotmail/Windows Live	✓	✓	✓	✓
   Yahoo	✓	✓	✓	✓
   Mobile Me	-	-	✓	-
   AOL	✓	✓	-	-

   ↩