Why kill IE6?

Create usable and accessible application rather than asking users to update the user agent

Sitting here at my home and googling the net for IE6 related articles on a charismas vacation. Crazy right? I could only read 'kill IE6' in almost all the links that google fetched. I could hear this cry is more from the Designers & Developers who initially failed to test the design in IE6 and later couldn’t handle the monster. I may get more critics if I say don’t kill IE6. It’s nearly impossible to kill it at least for 10 more years to come.

If you are building a web application that would be consumed by corporate, believe it guys you cannot get way. There are still large number of business applications out there that rely on IE5.5 & IE6 and IE7 or higher version would however break them. Some enterprises have made large investments in an infrastructure that is only compatible with IE. So there is no way out.

I thought I must share my experience so I started writing. May be somebody out there would be benefited.

Before you start off, don’t overlook the fact that IE was the best browser to support CSS earlier. There are few styling issues still exist that you need to be aware off before you start your design. If you can handle these in the initial stage you can merrily complete your design.

• Width in IE6 =width + padding + margin (IE6 would calculate the width of an element plus right and left Margin and Padding.)
• Min width/ Min Height is totally ignored


• Hover States – IE6 only support hover on <a> tag and not just about anything. (So CSS based dropdown menus would not be a good choice here. You would need to write a JavaScript for the same if at all you want a dropdown menu )
• Alpha transparency png format do not support IE6. But you can always use solid png image format (without transparency) not an issue.
• Overlay for dropdown menu and popup window (Listbox/ Select element z-index)

These are few issues that would need your attention. You can avoid them in your design but make sure you don’t ignore the testing from day one.

Solutions

You can have multiple style sheets depending on the browsers or platform. This would give you complete control over the styling issues

Browser specific style sheet would be better option rather than trying to hacks the browser, as it would be easy for maintenance.

Add a main style sheet above all for the modern browser and later keep adding on as per your requirement. The main_stylesheet.css should have all the style for a default browser version that you support.

Hide Code

<link rel="stylesheet" type="text/css" href=" main_stylesheet.css" / > <!-- This code sets up browser specific CSS ->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href=" earlier-ie.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
<!-- This code sets up platform specific CSS ->
<script language = "JavaScript">

if (navigator.appVersion.toLowerCase().indexOf("win")!=-1)
{
<!-- This sets up the Windows-specific CSS code -->
document.writeln("<link REL=stylesheet HREF=\"stylesheet_win.css\">")
}
else {
<!-- This sets up the Mac-specific CSS code -->

document.writeln("<link REL=stylesheet HREF=\"stylesheet_mac.css\">")
}
</script>

If supporting all major browser is going to hinder your delivery. You can simple divert the user to a specific page stating that 'Application right now does not support this browser' and later you can work on the issues and conditionally permit the user.

Hide Code

<script language="javascript">
if (navigator.appName.indexOf "Microsoft")!=-1){
browser = "IE";
}
else { // unknown browser
window.location = "Non_IE.html";
}
tv = navigator.appVersion
browserver = tv.substring(0,tv.indexOf "."));
if (browserver == 5) browserver = 6
bv=tv.indexOf("MSIE")
if ( bv!= -1) {browserver = tv.substring(bv+5,bv+6)}
browsersubver = tv.substring(tv.indexOf(".")+1,tv.indexOf("(")-1);
browsersubver = parseInt(browsersubver);
if (browsersubver < 10){browsersubver = "0" + browsersubver}
// forward based on browser and version.
// update the code to your requirements, where to forward.
if (browserver >= 6) {
if (browser=="IE")
{
window.location = "default.html";
}
else {
window.location = " Non_IE.html ";
}
}
else {
window.location = " Non_IE.html ";
}
</script>

Recently I read an article about Google Chrome Injects Itself into Internet Explorer with Chrome Frame. This allows Chrome’s rendering engine to run within MS IE 6, 7 & 8. User can download and switch to Chrome rendering and JavaScript engine with no noticeable changes to the user interface. http://www.readwriteweb.com/archives

It’s good news. This add-on for Internet Explorer is not the solution, because the enterprises may not want the user to download this add-on for number of reason.
But if you are developing a website you can probably add a single line of code to do the magic.

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

When Google Chrome Frame detects this tag it switches automatically to using Google Chrome's rendering engine which will allow them to seamlessly enjoy modern web apps at blazing speeds, through the familiar interface of the version of IE that they are currently using.

For those who were not aware of the png issue in IE6 or still want to use png with transparency background (which is a bad idea) can run a JavaScript function client side to apply a Microsoft filter and get the transparency right.

If you are using jquery you can use this function to apply the filter. You would need to add 'clear.gif' image in the Images folder.

Hide Code

function PNGsFixIE6() {

if (/msieMSIE 6/.test(navigator.userAgent)) {
$('img').each(function() {
if (this.src.indexOf('.png') > 0) {

var source = this.src;
var w = elementWidth(this);
var h = elementHeight(this);

if (this.src.indexOf('/Images/') > -1) {
source = source.substring(0, this.src.indexOf('Images/')) + 'Images/clear.gif';
}
else if (this.src.indexOf('/images/') > -1) {
source = source.substring(0, this.src.indexOf('images/')) + 'Images/clear.gif';
}

this.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.src + '", sizingMethod="scale")';
this.src = source;
this.width = w;
this.height = h;
}
});
}
}

Also remember to call this function each time your page loads or if the application is build in ajax it is important to call the function for every request/ instance.

Overlay issue in IE6.
Most of the developers struggle to get the div layer above the Listbox/ Select in IE6. IF you are not aware of the fact that it is impossible to get it just by z-index you would simply kill your time. Two approach to this solution.

Hide Code

• Write a JavaScript function to find all the Listbox/Select in the page and hide it, when the popup or menu is visible and switch it back when it is hidden.
  Example:
  
  function showPopup() {
  if ($('.popupClass').css('display') == 'none') {
  $('.popupClass').show();
  hideDropdowns();
  }
  else {
  $('.popupClass').hide();
  showDropdowns();
  }
  }
  
  function hidePopup() {
  if ($('.popupClass').css('display') == 'block') {
  $('.popupClass').hide();
  showDropdowns();
  } else {
  $('.popupClass').show();
  hideDropdowns();
  }
  }
  
  function hideDropdowns() {
  if (/msieMSIE 6/.test(navigator.userAgent)) // Only for IE6
  
  {
  $('select').css('visibility', 'hidden');
  }
  }
  
  function showDropdowns() {
  if (/msieMSIE 6/.test(navigator.userAgent)) //Only for IE6
  {
  $('select').css('visibility', 'visible');
  }
  }
  
  
• Mask it with a iframe. (IE6 specific)
  You would need to write a function to get a iframe just below the menu/ popup this would be tricky if the menu or popup height and width are not fixed.
  Don’t worry jquery has made it easy for the developers. Download the plug-in from 'http://plugins.jquery.com' and quickly fix it.
  
  
  Usage assuming that you already know jquery
  $('.popupClass').bgIframe();
  jquery plug-in would auto fit your menu/ popup's
  

Before I conclude I would like to say when IE6 is around and users using it is on a high scale, we cannot or shouldn’t ignore it. Live the reality. Look at market share.http://marketshare.hitslink.com/

Somewhere down the line some designers and developers forget the fact that it’s all about users and user experience. We must create usable and accessible application rather than asking users to change/ update the user agent. Not everyone has control over users or internet so remember to design for the masses.

Designing User experience

A change is now or never should be the approach for a breakthrough development

It’s always nice to read about usability & user experience. And it’s difficult to say that who preaches these will practice these. We all know that the market is matured and looking to get the best out of the experts. Who would not like a quality ride? A value for money.

For me user experience is like me traveling to a destination.

My ride can be good, bad or ugly. That’s my experienceIf a great amount of thought process is not put in your approach, then whole exercise is going to be ugly. It’s a team effort. And everybody should take the challenge. It’s going to be tough, but if you can convince others, the out come will be rewarding.

Being in the industry for more then 9 years, I know how difficult it is. As I said earlier that market is matured and now people are thinking seriously about user experience. But I still feel that there are only a few players who know how to implement it.

In the industry there are more look around people, then the leaders. People practice what they read, not analyzing or put their thought in what they come across, nor wanting to know when & which era was that published. And there are people who stand tough on their decisions. End of the day the product or may be we can say the user is going to suffer. Who cares? If this is the attitude! one can expect only a slow rate of quality product in the market.

What is best practice? If you think it’s already been discovered then I believe that you are not enjoying your profession and not doing justice to your organization you are in. You need to seriously think about it. We need to drive this vehicle first so that a user who drives it later can ‘feel the comfort’. It’s not just the comfort. They should ‘FEEL THE COMFORT’ that’s important.

Setting new standards are always challenging because industry follows the standards. A few have the courage to set standards like the apple. I always feel good about it and refer to it whenever I find the hurdle that stops my creative input. If ’Apple’ can make it why can’t we?

I still don’t understand why people ask the designers to design for dumb users. Is it because somebody said so, that the users are dumb. After so many years of technology touching people, why can’t we design for everyone, for the dumb & the experts? If a user is frequently using your product, is he/ she going to be dumb forever? NO! they would explore your product and become an expert tomorrow. So as a usability practitioner we should design our product for both phases, so that our product would never be outdated.

A change is what I think the market would appreciate. A change is now or never should be the approach for a breakthrough development. Practice what we learn and experience can add value to whatever profession we are in.

I would say accessibility and task based approach should be given first priority. An ease of use and an alternative path for all the approach would be appreciated by the users.

Suppose you are traveling to a destination and suddenly your vehicle breaks down. You would need a backup plan to reach your destination. If you don’t have an alternate option it would be impossible. for example: You are filling an online transaction form and suddenly you realize that mouse is not working properly, what would be your next move? To get an alternative way that you can successfully complete your form. It could be a keyboard support or you can extend further to voice censored navigation or a touch screen support etc... (no limits) If the product doesn’t have an alternate option user would need to stop then and there. This would be disgusting.

Me as a practitioner would always advice my readers to ‘Design for You’ first! Not ‘User in Mind’. You as a user should get the experience and satisfaction before anybody else can.

Let me end my note by giving a classic example of visualization and materialization. James Cameron’s ‘Avatar’ movie is a learning for all of us. We should really know what we want and what we are working at, from day one.