Wednesday, May 4, 2011

"Incompatible Browser" on FAFSA

I visited the FAFSA website recently (today, actually) and was greeted with the following message on Firefox:

"We have redesigned FAFSA on The Web with you in mind! All your FAFSA options can be accessed by clicking Start Here.

Click Close to continue.

We hope you enjoy the new look and features!"

Naturally, I clicked Close to continue, then clicked Start Here to access all my FAFSA options. Immediately I was greeted by an Incompatible Browser error ( from the website. The error page does not actually take any action for a browser, it just prints out some information. In case that link dies, the gist of it is this:

Supported Mozilla Firefox Browsers:
Windows XP - Mozilla Firefox 3.5.x and 3.6.x
Windows Vista - Mozilla Firefox 3.5.x and 3.6.x
Windows 7 - Mozilla Firefox 3.5.x and 3.6.x
Macintosh Operating System 10.5 - Mozilla Firefox 3.5.x and 3.6.x
Macintosh Operating System 10.4 - Mozilla Firefox 3.6 

There's the problem: Firefox 3.6.16 on Linux is not supported. Supported by what, you might ask? One answer is that a script or application calling itself BrowserDetectService doesn't like it (from the same error page):

[Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv: Gecko/20110322 Fedora/3.6.16-1.fc14 Firefox/3.6.16]
[BrowserDetectService:OS[UNKNOWN] browser[FIREFOX] browser version[FIREFOX3_6] AppName[FAFSA1112] detection status [BLOCKED]]

The first line is the User Agent (UA) string as sent by my browser. The second line is the output from this erroneous BrowserDetectService. I shudder to think that this may be an enterprise web service, making it accessible to Education Department applications other than just FAFSA. Not one to give up easily, I changed Firefox's UA string and logged on. Then, Just to be a smartass, I changed the UA on Seamonkey and successfully navigated the site with that. I went to the same error page and got the following:

[Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)]
[BrowserDetectService:OS[WIN7] browser[IE] browser version[IE8] AppName[FAFSA1112] detection status [SUPPORTED]]

Note the detection status of "SUPPORTED" vs. "BLOCKED" in the BrowserDetectService line; the crucial difference is the operating system. So clearly it is supported by my browser, since I was able to use the site. However, I should not have to perform a hack like that to access a public government website. Artificial barriers like this one are deceptive and discourage the adoption of free/OSS software by creating a false perception of incompatibility.

At the end of the error page we see this little irony:

*Compliant Web Browser - Standard
For the past few years, every major Web browser released has been built around a set of open standards designated by the World Wide Web Consortium, a non-profit organization charged with overseeing the continuing development of the Web. What this means is that one piece of code now looks the same on every modern browser, whether it be Internet Explorer, Firefox, Safari, Opera, or others. The majority of our users are using these modern browsers, so we can present content which is optimized for them.

That's kind of the point, isn't it? Firefox is Firefox, regardless of the operating system. So are Opera, and Safari, and Chrome. Yes, there are slight rendering differences between platforms. A lot of these can probably be attributed to often incorrect assumptions made by many of us in the tech world. Installed fonts (I don't have a font named "Arial"), screen resolution, browser settings and many other factors can affect spacing, shift elements and break functionality of even the most carefully planned layout or application.

Let's talk standards then, since that is their defense. First let's check compliance with the W3C XHTML standard: (11 errors in the markup). Next, the W3C CSS2 standard: (18 errors in the stylesheets). Clearly, standards compliance is a flimsy excuse.

So I've described the problem; what about the solution? Don't use UA detection, for one thing. Correct browser detection boils down to coding with two simple principles in mind:

1. Target the standards and not particular browsers
2. Use feature oriented object detection

These recommendations are repeated all over the web, but probably most succinctly at Many  methods exist to address these problems and gracefully degrade the application. Javascript libraries such as jQuery point the way by encouraging detection of general features which are necessary for proper application support.

In fairness, I must note that 11 markup errors and 18 CSS errors on the FAFSA site is actually an admirable level of compliance, as you will see if you check this very blog and many, many other sites. Nice job, Google!

See also: