Deal with internet explorer 6 : wordpress cases – Part: 1

Current internet trend and its development pace gave website developers lots of opportunities to show their talent to visitors however they like to. Moreover new tools are there, which can make your sites really attractive without giving much effort. From early 2009 when developers are concentrating more on using css3 by haring its best optimized features with less afford, we still need to think about its backwards.

When we develop any website we try to make sure that our website is compatible with all the major browsers of the world has. Website developer are already acknowledged about the compatibility of web standards adopted by web browsers, but they also know the problems occurred by Internet Explorer. Internet Explorer world’s most used browser so far. Though current trend of browser uses statistics are changing, but IE is still celebrating their majority in browser market place. According to w3schools statistics total browser statics of IE uses rate is combined to 37.2% on December 2009; where IE 8 holds 13.5%, IE7 12.8% and finally classic Internet Explorer 6 holds 10.9% of users. Firefox is in the leading position with 46.4% which is preferred by developer most. How about those 10.9% IE 6 users? Are we forgetting them from our customer list? Internet Explorer version 7 and 8 works very well with CSS 2 and overcame with all the bugs that IE6 used to have.

Though Microsoft took care of those bugs, we should keep in mind that all those OS comes with default Internet Explorer 6. Especially for corporations who still didn’t get enough time to upgrade their self to IE 7 or IE8 surfing with Internet Explorer 6. That’s why website developers have to concern about design pattern to insure maximizing browser support as each of these browsers implement their own rule set specially for CSS.

This part will focus on alert issues that we should deal with Internet Explorer 6, while styling your website or your wordpress blog with reference to proper resources.

Alert them to upgrade.

The best possible way is to alert your IE6 visitors to upgrade themselves to latest version. Other than that; offer them to switch to a browser where your site fits better. There are many different tricks to do that, but I will discuss about the one I am using. The script I am using was downloaded from ThatGrafix.com.

The plug-in is pretty simple and it is using JQuery JavaScript framework. All you need to do is, adding few codes in to your wordpress templates or in your website. Here I will give a step by step tutorial on how to do this….

1. First you will need to add this code at the top of your document, for wordpress definitely at the top header.php file:
[sourcecode language="php"]
$ie6 = "MSIE 6.0";
// detect browser
$browser = $_SERVER['HTTP_USER_AGENT'];

// yank the version from the string
$browser = substr("$browser", 25, 8);

// html for error
$error = "

Alert: It appears that you are using an out dated web browser Internet Explorer 6. This website Strictly recommend browsers such as
Google Chrome or FireFox to insure best user experience. While you may still visit this website we encourage you to upgrade your web browser so you can enjoy all the rich features this website offers as well as other websites. Follow this link to
Upgrade your Internet Explorer

“;

// if IE6 set the $alert
if($browser == $ie6){ $alert = TRUE; }

?>[/sourcecode]

2. Make sure you are adding following script to refer Jquery framework on your site in between your “head”  tag
[code lang='php'][/code]

3. Stylize your css by using following code in style.css :
[code lang='css'].error {
background:#222;
color:#eee;
padding:20px;
border:dashed 1px #444;
width:90%;
margin:0px auto;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.3em;
}

.error a, .error a:hover{
color:#ee7615;
}

/* simply moves close box to right */
.kickRight {
text-align:right;
}[/code]

4. Finally fing a suitable place to show the alert in your website body and add the following php code in your BODY tag:

[code lang='php']<?php if($alert){ echo $error; } ?>[/code]

it will show some thing like this :

You can add your own contents or even can stylize your own CSS. I know you can do far better than me in these case.

This is the first step you can take while dealing with Internet Explorer. I will discuss with more new terms in details in my next part.

Useful Links:
  1. Jquery.Browser API (Btter way to detect browser version with Jquery)
  2. JavaScript browser detection.

Your turn to acknowledge; if you have your own reference about IE6 alert options please let me know as well. It will help me and others to know more about different options.

No related posts.