The fair Upgrade from IE6 Banner

All web developers knows that surely IE7 is a major improvement from IE6, but it's still thousands of years behind really *great* browsers like FireFox, Chrome, Safari and Opera...

So this made me think about how to create "the fair upgrade from IE6 banner"...

This is quite easy since all the benchmark results are out there, I've copied some of the statistics for the different browsers in visual form into this blog so that you can see the difference in standard conformance and JavaScript execution speed. And I think we can pretty well agree on that JavaScript execution speed coupled with w3c standards compliance are among some of the more important features of great browsers today... ;)


LESS is better


MORE is better

Now comes the funny part, by creating "normalized vectors" of those figures we're able to get normalized vectors indicating the "amount of quality" for all browsers. Then we can use those vectors as multiplication units for a font size and display an "Upgrade from IE6" banner which will in a *fair* manner make the font-size property grow according to the relative quality of the browsers. So then when a user is visiting our site with IE6 we can display a banner which will contain links of different sizes according to the *quality* of the browser to all most commonly used different alternatives out there! :)

Results - only the "latest" versions (betas of upcoming Opera, Safari and FireFox) of the browsers except for IE where both IE7 and IE8 are included;

Acid 3
* Chrome 80 == 0.8
* IE7 12 == 0.12
* Safari 76 == 0.76
* Opera 100 = 1.0
* FireFox 92 = 0.92
* IE8 (beta) 21 = 0.21

Then the JavaScript performance (vectors calculated deducting values from 1000)

* Chrome 120 - 0.880
* IE7 790 - 0.210
* Safari 150 - 0.850
* Opera 195 - 0.805
* FireFox 300 - 0.7
* IE8 450 - 0.550

Then the vectors multiplied by eachother

* Chrome - 0.704
* IE7 - 0.0252
* Safari - 0.646
* Opera - 0.805
* FireFox - 0.644
* IE8 - 0.1155

Then we use font-size of 48px as "base"

* Chrome - 34px
* IE7 - 1px (yes, believe it... ;)
* Safari - 31px
* Opera - 39px
* FireFox - 31px
* IE8 6px

Then we create a banner where we use these font-sizes for the links to the different browsers;

<!--[if lte IE 6]>
<div 
  style="border:3px solid #090; margin:8px 0; background:#cfc; color:#000;width:700px;">
  <h4 
    style="margin:8px; padding:0;">
    Heads up! You're using an outdated version of Internet Explorer.
  </h4>
  <p style="margin:8px; padding:0;">
    To get the maximum amount of pleasure while browsing this and other websites
    you can download for free any one of these 
    <ul>
      <li>
        <a 
          style="font-size:39px;" 
          href="http://opera.com">Opera</a>
      </li>
      <li>
        <a 
          style="font-size:34px;" 
          href="http://google.com/chrome">Chrome</a>
      </li>
      <li>
        <a 
          style="font-size:31px;" 
          href="http://getfirefox.com">FireFox</a>
      </li>
      <li>
        <a 
          style="font-size:31px;" 
          href="http://apple.com/safari">Safari</a>
      </li>
      <li>
        <a 
          style="font-size:6px;" 
          href="http://www.microsoft.com/windows/Internet-explorer/beta/default.aspx">
            IE8</a>
      </li>
    <ul>
  </p>
  <p>Read the 
    <a 
      href="http://ra-ajax.org/the-fair-upgrade-from-ie6-banner.blog">
        story behind these links here</a></p>
</div>
<![endif]-->

This will end up looking like this;


And this way we have ourselves a perfectly fair "Upgrade from IE6 banner" ... :)

PS1!
Yes, IE7 was even *TOO SMALL* to even *MAKE IT* in here...
But IE8 is supposed to "be somewhere in there"... ;)

PS2!
Consider the above code for MIT licensed HTML, and every one of my blogs are also licensed under the GFDL (GNU Free Documentation License) so feel free to copy and paste and modify this text as much as you wish under the GFDL... ;)

.t