“The (most) obvious question: Why would I install this plug-in rather than switch browsers to Chrome? The folks at Google point to IT lockdown that won’t allow users to install a new browser; Ars wonders whether such restrictive IT departments would be any more likely to approve this plug-in. If nothing else, it’s a pretty bold move on the part of Google.”

If you’re interested, Jim Ray dug into the details of how it works. Personally, I don’t think this will solve anyone’s IE6 problems, but it’s a fascinating development, and worth keeping an eye on.

“The irony here, as I see it, is that an old, insecure feature Microsoft built to try to beat Netscape is now being used by Microsoft’s biggest current rival to patch IE.”

On the IE Blog, Tony Ross published a list of mostly technical differences between the two. Perhaps more useful for web developers is this article by Estelle Weyl outlining some of the presentation differences between the two, such as border handling and box model differences.

Why does this matter? Because I’ve heard some otherwise intelligent web developers (including Microsoft’s Expression Web team, which uses IE8’s Compatibility Mode for IE7 testing) claim that testing will be much easier now, since you can test everything in one place.

To be sure, tools like Expression Web or the old Stand-Alone IE installers are helpful, but don’t fool yourself into thinking that they are an accurate representation of a “clean” IE6 or IE7 installation. To test against those, you’ll still need to resort to more thorough measures like keeping separate machines around, or using the free Virtual PC images for IE6, IE7, and IE8.

Well-written software can have intelligent defaults, too, and you can give your users that same feeling of anticipating their needs. Here are a few examples of programs that found a clever way to save their users’ time with common, repetitive tasks.

Leopard’s Smart File Rename Feature

Traditionally, to rename a file, you click once, and then again in the filename, and then the entire thing is highlighted, including the extension. If you then start typing, the extension is lost, so every time you have to re-highlight just the name portion.

But in Leopard, Apple changed the function to automatically highlight everything but the extension. They recognized that most of the time, you’re only changing the filename and not the extension. This is a tiny, tiny change, but it saves you a highlight action every time you rename a file.

TortoiseSVN’s Auto-Expanding Collapsed Directories

TortoiseSVN includes a browser to navigate the SVN tree to find the directory you want to check out. Since loading all the directories takes time, when you first open the browser, it just shows you the part of the filetree that you’re in. To access the full tree, you just collapse the top directory, and then expand it again, at which point the program loads everything else.

A recent version of the program changed the behavior so that when you collapse the top-level directory, they automatically open it right away, and load the full tree. Saving a single click isn’t a big deal, but it makes you feel like the program is anticipating your needs.

Xbox 360’s Annoying Device Selection Prompt

Okay, now for an example of where an intelligent default is desperately needed. The Xbox 360 has an optional hard drive to save your games to. You can also use a memory unit. As a result, games need to include a prompt asking you whether to save the game to your hard drive or the memory unit. The problem arises when you have only one storage device connected.

If you only have a hard drive, then you only have one option when they ask you where to save your game, but they ask anyways. Here’s a suggestion for the UI guys developing all those games: If there’s only one possible answer to a question, don’t bother asking!

We’re the second largest Mac development shop in the world behind Apple.  We have more Mac developers than anybody except Apple.

Who is “we”? Well, Microsoft of course!

This seemed counter-intuitive at first, but after you consider everything Microsoft does and who else might possibly be capable of holding second place in the measurement, it all fits together. Now I can feel just a little more smug developing Microsoft .Net applications on my MacBook Pro.

The techie guys gave it an acronym: CSRF, because that’s one of the things that give them pleasure. All spelled out, CSRF looks like this:

Cross-Site Request Forgery

Myself: Sounds like a big technical mumbo-jumbo thing. Do I really care?

Me: Well, would you normally change the email address of your account to that of a hacker that lives three states over and you’ve never met? Probably not.

Myself: Ok, I’ll take the first bite, but don’t lose me, got it?

Me: Sure, no problem. Bad guys can try to get your information or trick you into doing something you wouldn’t ordinarily do through a CSRF attack. I’ll lay it out so you can see how it works. It’s not that complicated.

Me: Let’s say you open your favorite browser and surf away like you normally do. You find a site that you’ve never been to before, but it looks interesting enough so you sign up for a newsletter. You enter your email address and click the submit button. Wham! You’re done.

Myself: Damn! Done, eh?

Me: Yep. Those little buggers are quick.

Myself: So, what happened?

Me: Ok, let’s replay that attack. You browsed a site you didn’t know, or have reason to trust, for that matter. When you submitted that web form, you didn’t know it was actually posting information to your favorite social media website. This is to say, directly from your browser to the social media site. It wasn’t really adding your email address to their newsletter list as you assumed.

Myself: Well, that’s weird, but so what?

Me: I’ll say this again a different way: instead of posting info from your browser to Site A, it was actually posting info from your browser to Site B, where A is the hacker’s site and B is your trusted social media site.

Myself: Web pages can do that?

Me: Yep, it’s just an HTML <form> tag, you can point them wherever you want.

Myself: Ok, so if this is true, then why isn’t the sky falling right now?

Me: Well, there are ways to help prevent this attack, plus it’s somewhat new in terms of main stream threats, and most importantly, not every hacker in the world is out to get you at this very minute.

Myself: So what did it post to my favorite social media website and why do I care?

Me: Well, it posted your email address.

Myself: Great! I got news for you. My email address is already on my social media website. I don’t think I’ve lost much.

Me: Well, it posted some other stuff too. Actually your current email address isn’t what you think it is.

Myself: Uhmmm, go on.

Me: The hacker took a chance that you might actually be logged into your social media website at the time you submitted the form on his site.

Myself: Is this like the phishing thing I’ve been hearing about?

Me: Kind of, but let’s not muddy the waters by introducing new terms.

Myself: Fair enough, keep going, forget I said anything.

Me: Ok, so you were logged on to your favorite social media website when you submitted this form on the other site. This means that the social media site makes several features available to you like updating your status, posting a photo or interacting with a friend. You can only do that stuff when you’re signed in, right?

Myself: Yep. Got it.

Me: The hacker’s site posted your email address to the CHANGE EMAIL ADDRESS FORM on the social media site. In addition to your email address, he posted his email address as the new email address. When your browser posted that form, you sent the cookies and everything else along for the ride to the social media site. It looked like a totally legit request from the point of view of the social media website. All the form fields lined up and there was no reason to suspect it.

Myself: Well that little piece of..

Me: Hold on, G rated audience here.

Myself: Sorry.

Me: No worries, you’re right to be upset. You see, the social media website should have been anticipating this type of attack.

Myself: Huh, go on.

Me: Well, because this type of attack works in any browser, it’s very likely that it will happen.

Myself: So, how can CSRF attacks be prevented?

Me: Well, one way is with the anti-forgery tokens inside Microsoft ASP.Net MVC.

Myself: One sec, you said you wouldn’t get technical.

Me: I’m not; it’s just a brand name, Microsoft ASP.Net MVC. You like brands don’t you?

Myself: Well, yeah. Sorry.

Me: No problem. Ok, we were going over anti-forgery tokens. Let’s say your cookie contained a long number. Let’s call that number a GUID.

Myself: Oh! Oh! Oh! A GUID is a globally unique identifier, right?

Me: Yes, very good. So the cookie contains a GUID, or a long number, right?

Myself: Yep. GooooooooooID. It’s fun to say.

Me: Focus please.

Myself: Sorry.

Me: Ok, the programmer who built the web form for the social media website’s change email address form could have placed another long number, or GUID, in the web form as a hidden field. The person filling out the form doesn’t need to know about the field, so it’s hidden and sent back to the web server when the form is posted. Just to clarify, the web form consists of all the fields you can see, plus the values in the cookie and the token value inside the hidden field.

Me: When the web server receives a post, it evaluates posted fields and looks for normal problems. Of course it makes sure required fields are populated and stuff like that. The web server also performs a mathematical computation on the two GUIDs that it received. One GUID came from the cookie and the other from the token.

Me: It’s really hard for a hacker to have both numbers. The hacker can’t successfully guess the numbers either. They might as well guess your password. If the numbers don’t jive, then the web server stops processing the request, because it’s probably fraudulent. In the first case where the hacker won, they got you to give up your cookie. However, they wouldn’t be able to post a valid token because that second number changes all the time. Wait, you’re using a complex password right?

Myself: Um, yeah sure.

Me: Ok, we’ll talk about that one next time. For now, it’s just important that you’re aware of where you’re surfing on the net and to think about your actions. It takes everyone to help secure the Internet.

Myself: So, maybe I do need a stronger password, but if I understand you right, you’re saying that developers can help protect the sites they build from this type of shenanigans by using the anti-forgery tokens inside Microsoft ASP.Net MVC right?

Me: Yep. It’s really easy.

Myself: Cool, thanks for explaining how a CSRF attack works and how to prevent them.

Vista’s launch was plagued by poor device drivers, steep system requirements, and the much maligned User Account Control (UAC). Vendors have since developed Vista compatible drivers and technology has also caught up with the OS. A $500 laptop is now capable of running Vista with most of the bells and whistles enabled. With Vista universally panned by the press and Apple’s ubiquitous Mac versus PC ad campaign, Microsoft needs to get the next version of Windows right.

One of the first things that I noticed after loading Windows 7 on my laptop is the notable increase in speed over Vista. Even though it’s a beta build, this new version of Windows clearly runs faster than its predecessor. The UI is very similar to Vista’s with a few exceptions. My favorite feature is the new task bar that allows you to “peak” at any running application. From an interactive standpoint, it also supports multi-touch controls too.

My biggest gripe about Vista is the UAC and Microsoft has toned it down a bit in Windows 7. The UAC now has multiple settings allowing users to toggle which events trigger the popup. Interestingly, a colleague forwarded me an article today saying that there is a security exploit for the new UAC.

While my Windows 7 experience has overall been positive, there have been a few problems. I found that most ISO mounting software is incompatible with it. I did find a package that works though, Pismo File Mount Audit Package. I’ve also experienced a couple of Blue Screen of Deaths too, and my laptop’s wireless doesn’t like coming out of hibernation state.

Microsoft appears to have gotten the message about Vista and I am really looking forward to the final release of this OS!

Email design today is like web design in the early 90’s, complete with nested tables, spacer gifs, and FONT tags galore. Standards support is virtually non-existent, and even simple things like background images and table spacing are handled poorly by some clients.

By being aware of the unique challenges that HTML email presents, and following the recommendations in this article, you’ll make life much easier for your production team.

What Email Clients Do People Use?

Until recently, the single biggest problem when designing HTML emails was a lack of reliable information about the target audience. Unlike web design, where server logs and web statistics programs make it pretty easy to find out what browsers your audience is using, there are no equivalent tracking programs for email.

The only sources of information I could find online were two surveys, published in 2002 and 2003, that were given to limited audiences. With the small size of the sample groups, the way the survey was structured, and the age of the surveys (which predate both Gmail and the iPhone!), the results are nearly useless.

Thankfully, while conducting research for this article, a company that makes email client usage statistics software decided to start publishing some of their data. The results for business users are surprising:

Some noteworthy takeaways:

• Outlook is the most popular, but not by much.
• Most people have yet to upgrade to Outlook 2007.
• Webmail programs add up to more than half of total usage.
• Gmail is dramatically outnumbered by Yahoo.
• Yahoo is even more dramatically outnumbered by Hotmail.
• Lotus Notes and AOL are (thankfully) negligible.
• The iPhone has a respectable 1.3% of total usage!

This means we can expect any email we create to be viewed in Outlook, Yahoo, Hotmail, and Gmail. Testing in all of these is ideal, however, if time is tight, you can probably get away with just testing Outlook 2007 and Gmail. As we’ll discuss next, these are the two most restrictive clients, and if your email works well for them, it should work well in all the others.

What are the Problems with HTML Email?

Now that we know what clients our audience is using, we can start looking at some of the challenges that arise when building HTML emails. A complete list of every type of problem is beyond the scope of this article, but if you’re interested, Campaign Monitor’s tips section is a great resource.

CSS Support is Unreliable

While most email clients support CSS to some degree, the problem here arises from the fact that each does so in a different, and contradictory manner. The two worst offenders are Outlook 2007 and Gmail.

Gmail only supports inline CSS, therefore, any STYLE blocks or linked stylesheets in the HEAD of your document will be stripped entirely. Of course, even if they weren’t, it wouldn’t do you much good, since Gmail also strips all ID and CLASS attributes.

Outlook 2007 will allow linked stylesheets and STYLE blocks, but the emails are rendered using the Microsoft Word rendering engine. This means no background images, no floats, no positioning, and no margins or padding. It’s so bad that when Microsoft announced the change, Campaign Monitor’s headline was “Microsoft takes email design back 5 years.”

Due to the popularity of Outlook among business users, Campaign Monitor recommends that all business emails be built with tables and minimal inline CSS only.

Most Clients Disable Images by Default

There is some variation between clients, but most have images blocked by default, unless the user is in the address book. Older versions of Gmail actually blocked images at all times, though this seems to have been fixed recently.

As a result, Campaign Monitor recommends that you “become a known sender” by adding a note to your sign-up form, and any subsequent emails you send, asking users to add you to their address book. Needless to say, this requires that you send your emails from the same address each time.

Additionally, they recommend that you plan for images being disabled. Since ALT text is unreliable (more on that in a moment), you should begin your email with HTML or plain-text headlines. This means users can tell what your email is about, even without seeing your images. Also, consider putting plain-text captions under important images.

ALT Text is Unreliable

The fact that images are disabled by default wouldn’t be so bad except that most clients also have difficulty displaying ALT attributes. As usual, Gmail and Outlook are the worst offenders.

Gmail does show ALT text, but only if the image dimensions are large enough to display the entire string of text. As a result, small images, or images with lengthy ALT attributes, show nothing at all.

Outlook (both 2007 and previous versions) do show the ALT text, but they preface it with a lengthy error message, which effectively hides the text from view in most cases. In this case, the one positive note is that since every image in every email will display this security message, most users will be used to it, and to clicking the button that enables images in the email.

Gmail Ignores Cellspacing

This is a very recent change and, for my money, one of the most annoying problems facing email designers. Gmail strips all PADDING and CELLSPACING from tables. Regardless of whether you use CSS, or the old-school attributes for the table itself, Gmail zeroes it all out.

As a result, you have to retool all your tables to not use any PADDING or CELLSPACING. Instead, bust out your spacer gifs and add empty table cells everywhere you need white space. This won’t impact the way your emails are designed, but it means a dramatic increase in code bloat.

Tips for Designing HTML Emails

In addition to learning about the most common difficulties with HTML emails, there are several things you can do to make your experience easier. If you’re still familiar with table-based layouts, these are common sense, but if you’ve been doing standards for a while now, it can be difficult to get back into the mindset of the limitations you need to work within.

Remember HTML Font Sizes

It’s easy to forget that without CSS, there are only 7 font sizes, and the differences between them are pretty severe. Size 1 text is tiny, and usually only suited for the fine print in the footer. Size 3 is huge, so your body text will probably be size 2. That means you only really have one or two usable font sizes for your body text. Keep this in mind while creating the design to avoid having layout shifts due to font size differences.

Avoid Overlaps

Since Outlook 2007 won’t display background images, you cannot display HTML text over an image — even a simple one like a gradient. You’ll either need to adjust your design to keep a solid color behind all HTML text, or set it up so that if the background disappears, the design still looks appropriate.

Avoid Image Headlines

As mentioned above, most email clients have images disabled by default and have difficulty displaying ALT text. As a result, if your most important headlines are images, your readers won’t see them at first! If you know your audience is invested enough to click through, that risk might be acceptable, but most of the time you should make sure that your primary call to action is not stuck in an image. This will limit your font choices, but will dramatically improve the odds that your audience will see your headline.

Web Version and Address Book

Even if you follow every suggestion in this article, your email may not work for some people, so provide them with alternatives. Most email campaign products make it easy to insert a “view as web page” link and to include a plain-text version of your email.

A good way to do this is to include a bit of text requesting that your readers add you to his or her address book. One easy technique to get all this out of the way, is to include a block of plain HTML text at the very top of your email that explains why the reader received this email, provides an unsubscribe link, a link to a web-based version of the email, and suggests that they add your email to their address book.

In Conclusion

The bad news is that CSS and web standards support in email clients is so inconsistent as to be non-existent. Not only that, but it’s gotten worse in the last two years thanks to Outlook 2007 and Gmail.

When I first started designing HTML emails for our clients, I would quote 1-2 hours for each email. Today, I quote 4-5 hours because it’s gotten so much more complicated.

The good news is that things are going to improve — slowly. The Email Standards Project aims to do for email what the Web Standards Project did for web browsers in the late 90’s. However, it took the Web Standards Project years to make a significant impact, and due to the slow rate of upgrades in email clients, it’ll probably take even longer. Still, this kind of pressure will undoubtedly help the situation.

So I was confronted with the question of either taking my machine into the Apple store and pretending to be one of them for the duration of time I would spend inside the store or to find another way. If I took my machine into them, I would need to take necessary safeguards and assume all data on my machine would be lost. I’ve heard some interesting stories that lead me to believe one should not assume that you’ll get your data back when you hand over your computer. So I’m not encouraged to pursue that direction. It takes a really long time to get all my tools loaded up on a machine.

Then, I recalled listening to a podcast, maybe as much as a year ago, and learning about Autohotkey, a possible solution to my problem.

This software is a free, open-source utility that, among other things, can remap keys on your Windows computer in a really easy and low friction manner. While my backslash key was dead, my other keys worked fine so I contrived a solution to restore the lost capability.

I downloaded and installed Autohotkey, then I created a Autohotkey script from a template. Now, I simply double click the script and it runs happily in the background until I restart Windows. This particular custom script listens for a combination of the Windows key and the space key. When I press them together, Autohotkey intercepts the keystroke combination and replaces it with the backslash character.

So, similar to Pecos Bill’s horse, Widow Maker, I’m the only one (up until now) who can get my machine to write a backslash character on the screen. It’s worked out pretty well, sometimes I’ll forget and wonder why my file path or regular expression is incorrect but then I’ll just hit Windows+space and WHAM! I’ve got myself a backslash and I didn’t have to risk reinstalling all my software to get the capability back.

Autohotkey does a lot more than this, hopefully some day I’ll get a moment to continue exploring it.

Depending on the scenario, I’ll might massage this data and slide it into a SQL Server database or an XML file. I’m a web developer so I use the ADO.Net stack on a regular basis. If I were a Windows client developer, I might prefer to solve this problem with the Excel object model, but that really looks like more code to me, so here’s how I like to roll:

The following code block accepts an Excel file path and returns an ordinary DataTable object, which can be manipulated easily by the code that calls this method. The first row of the Excel document becomes the columns in the DataTable object and each row thereafter are DataRow objects.

If you like, take a look at both techniques for working with Excel data and see what one speaks to you.

With this block of code, I can happily accept large chunks of data from a client without spending precious time fiddling with administrivia.

One major annoyance between the Mac and PC versions of Firefox 3 is the position of the “Done” button on the Add Bookmark dialog. On a Mac, the button is on the right. On a PC, it’s on the left. I won’t comment on which is better, just that the difference breaks my muscle memory and is driving me up the wall, and causing me to lose bookmarks that I think I’ve saved.

The only saving grace here is that “Done” is the default action on both, so what I really need to do is train myself to press Enter on the keyboard instead of mousing over and clicking on the button.