The MS browser ballot page analyzed

By crisp on Monday 15 March 2010 00:49 - Comments (16)
Category: Browsers, Views: 6.249

There's been a lot of talk about the new Microsoft browser ballot screen lately. I for one would like to say that I think this solution is a very good thing. I really commend Microsoft for having come up with this solution. It seems that this solution however is not very well understood by some people who just think it is annoying and 'blame' the European Commission for 'butting in' on the free market.

Most people are very quick to point out that Microsoft currently doesn't really have a monopoly (any more) in the browser market. This whole affair however has nothing to do with having a monopoly in the browser market; it's about having a dominant position in the operating systems market, and using that position to promote the use of IE by pre-installing it. It's about the free choice that people should have (and be made aware of) and the negative effect of not knowing that there is a choice has on competition in the browser market itself. Internet Explorer has an advantage by means of it's distribution with the most popular operating system, and the fact that both products are from the same vendor makes it an unfair advantage.

Competition is very important; without competition progress will stifle as we've seen in the IE6-era. It is actually quite a feat that Firefox was able to gain some significant market share during that time, enough eventually to 'wake up' Microsoft and have them work on their browser again after 6 years or so.

But this blogpost is not about politics; I already wrote enough about that in my previous two (Dutch) posts; let's talk some tech :)

Technically there already has been some criticism on the browser ballot page itself, but that merely focussed on the fact that the random order of the browsers wasn't exactly random - something Microsoft has meanwhile fixed. I did some more analysis on the browser ballot page itself and found it to be of poor quality seen from a web-developers perspective, especially for such a large-focus page.

The first thing I noticed was an incomplete doctype:
HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


A doctype like this, missing a SYSTEM identifier, will normally put any browser into quirksmode. Quirksmode rendering is an (old) IE-specific rendering mode. Other browsers do try to mimic this non-standard rendering mode to a certain extent, but this rendering mode isn't really interoperable between browsers.

Of course this page is primarily shown using an IE-rendered window, however, right after this DTD Microsoft slams this abnormality in the page:
HTML:
1
<meta http-equiv="X-UA-Compatible" content="IE=8">


Not only does this render the page itself invalid as HTML (meta-directives belong in the <head>-section of the page, or should be sent as an HTTP header), but it forces IE8 in standards-compliant rendering mode regardless of the doctype.

Why would they do that? Now I'm not sure if this browser ballot page will be shown on XP systems that haven't installed IE8 yet, but it certainly will have no effect in IE6 or IE7 which will show a non-perfect page (note how a small part of browser number 6 in the list peeps up on the right):

Browserchoice.eu in IE6
Browserchoice.eu in IE6

In normal webdevelopment X-UA-C is completely unnecessary; using a strict-mode triggering doctype you should be able to write a page that looks pretty much the same in various browsers and even in IE6, 7 and 8.

Another notable thing in the used mark-up is the fact that Microsoft decided on using a table for the layout whereas semantically the presentation of the browsers should be in an unordered list (well, not quite since there is a definite ordering between the first group and the second group browsers, but within each group the order is meant to be non-specific so unordered suits best imho).

Other things that make this page non-validating HTML4 are the use of ID-attributes starting with an underscore and the attribute 'notification' on the 'Select Later' button.

Then there are a couple things that are worth mentioning about the used scripting. Let's start of with this snippet:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
function AttachHandler(a,b,c)
{
    if (a !== null && b !== null && c !== null)
    {
        var d = "on";
        if (a.attachEvent)
            a.attachEvent(d + b, c);
        else if (a.addEventListener)
            a.addEventListener(b, c, false)
    }
}


This function is rather prevalent on the web (more commonly named 'addEvent'), but it has been shown already years ago to have some serious problems. There are better solutions available. But what really itches me is the fact that this function tests for a proprietary method first and uses the standard method as a fall-back. Of course that's the wrong order.

Then let's look at how this function is actually used (it is used only twice on the whole page):
JavaScript:
1
AttachHandler(window, "load", LoadHandler);


First of all, on a static page such as this I wouldn't even have bothered to use an event helper function; I would just have used:
JavaScript:
1
window.onload = LoadHandler;


no, strike that, I would not have used that at all for the very simple reason that onload doesn't occur before all embedded resources are actually downloaded. That includes the 114KB worth of images (the browser logo's). With an empty cache, and even on a fast broadband connection, this results in the fact that the 'randomizing' is actually visible: you'll see a brief flash of the initial order of the browsers in the document before it gets shuffled.

But there's more: the whole content for the various browsers is actually duplicated in script. The fact that the page is using a table-layout makes that the content for each browser is separated into different table-cells making it more difficult to just 'shuffle' parts of the mark-up itself. Instead it relies heavily on ID-attributes on each cell's content and thus a lot of lookups in the DOM.

So I decided to create my own version of the browser ballot page: it only uses one main function for the core functionality together with the original three cookie-helper functions, it uses an unordered list for the browser information and actually shuffles the list-items themselves so there's no need to duplicate content in the script. Also it doesn't wait until the onload event occurs; it just starts shuffling before the </body> is encountered. I also inlined the CSS and javascript to save some external requests and all in all this code is also a lot smaller. I used the HTML5 doctype and the data-attributes functionality for the 'notification' attribute on the 'Select Later' button.

Now I'm not saying that my approach is perfect, but I think it is significantly better. I cooked this up in just a couple of hours (less time than it took for me to write this blogpost), so I cannot help thinking that either Microsoft didn't care enough about this feature more than that 'it should just work', or they just don't know enough about modern webdevelopment.

Volgende: CSRF protection with 'self-validating' tokens 04-'10 CSRF protection with 'self-validating' tokens
Volgende: Die IE6, die! 02-'10 Die IE6, die!

Comments


By Tweakers user bobwarley, Monday 15 March 2010 00:52

Nice blog post! Keep up the good work !

By Tweakers user tspawn, Monday 15 March 2010 07:01

I think they just did not care enough.

By Tweakers user Sebazzz, Monday 15 March 2010 07:32

Microsoft didn't care enough about this feature more than that 'it should just work', or they just don't know enough about modern webdevelopment.
Well, since IE8 still has some quircks, and IE isn't going to support the new webdevelopment standards like HTML5 and CSS3 for at least the next five years, I think this is a very real option.

By Tweakers user link0007, Monday 15 March 2010 09:09

I find it interesting how Avant got away with saying "The best webbrowser!" in its description...
Could it have been that microsoft didn't notice it? Or are they confident no one will fall for it?

By Tweakers user RVW, Monday 15 March 2010 09:14

Talking about non-perfect: what did you use to scale down the above IE6 screenshot? It looks absolutely terrible!

By Tweakers user crisp, Monday 15 March 2010 09:49

Talking about non-perfect: what did you use to scale down the above IE6 screenshot? It looks absolutely terrible!
Sharp (you, not the image :P)

Wrong interpolation setting I guess. I replaced it :)

By Tweakers user stefan-d, Monday 15 March 2010 10:05

Great blog!! Did you submit your new page to MS?

By Tweakers user Blokker_1999, Monday 15 March 2010 11:52

Hmm, i wonder why the url has a .eu tld ... would they have a different page for americans?

By Tweakers user kipusoep, Monday 15 March 2010 12:05

Why would someone waste so much time just to prove the browser ballot page sucks...?
It's just a simple page... Nothing more.

By Tweakers user H!GHGuY, Monday 15 March 2010 12:27

The actual reason will probably be more like:
This page was developed by Microsoft India.

By Tweakers user Mike-RaWare, Monday 15 March 2010 12:28

Hmm, i wonder why the url has a .eu tld ... would they have a different page for americans?
The Americans don't get the browser ballot, it's only for citizens of the EU.
Why would someone waste so much time just to prove the browser ballot page sucks...?
It's just a simple page... Nothing more.
Why waste so much time just to comment that this blog is a waste of time...? It's just a simple blog post... Nothing more. :P

[Comment edited on Monday 15 March 2010 12:39]


By Tweakers user Blokker_1999, Monday 15 March 2010 14:40

The Americans don't get the browser ballot, it's only for citizens of the EU.
Yeah, remembered that after I hit the post button :P



By Tweakers user ProperChaos, Monday 15 March 2010 21:01

@Mito: Ik dacht precies hetzelfde.. :P

By Jed, Tuesday 20 April 2010 20:13

Arrgh, my eyes are watering due to your choice of blog border color!

Comments are closed