The html times

Relevant Links

Browser Statistics on Wikipedia
IE Market Share
Multiple IE
$_SERVER
strstr
explode
array_shift
array_combine

Relevant Downloads

Believe it or not, 18.85% of web browsing still occurs in an eight year old browser called Internet Explorer 6. It's two year older brother IE 5 only commands .04% of the public's browsing, so when are we going to put the kibosh on IE6?

Hopefully today, after reading this call to arms, you are going to go home to your websites and add in some code to every page that will help with the oddly painful final good bye. Let's help everyone upgrade by making it really hard not to! I mean these people don't even know what the internet looks like. Let us reach down into the muddy squalor and pull our users out of the ghettoized web browsing experience. It is our duty.

There are many interface approaches to choose from, but this one is my personal favorite. I feel like it really draws the user in and makes them feel safe and forces them to make a conscious decision in order to continue using the site. Give the Toggle Message Demo a shot before we do anything else.

We can achieve this in a number of ways as well. There's the javascript approach, there's .htaccess mod_rewrite (RewriteCond/RewriteRule) and so on, but here I'm going to offer the plain old php and html approach. No matter how we choose to do it, we're going to be looking at the user agent profile to determine browser type and version and then doing something unique based on that.

The user agent profile is a bit of data about a browsing agent in the network. Spam bots have them, search engine spiders have them, and so do you. For instance, here's yours:

CCBot/2.0 (http://commoncrawl.org/faq/)

If you were browsing with Internet Explorer 6, you would've seen something like this:

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)

This one happens to be from a windows machine running Multiple IE. But what ever, the system information may be, only IE browsers will contain the 'MSIE' + '%version #%' string and that is what we are going to look for and serve a message based on.

Your user agent string is available via the PHP super-global $_SERVER, seen here:

<?php echo $_SERVER["HTTP_USER_AGENT"]; ?>

Easy, right? Now we can use this information to determine if the visitor is using IE and what version. Since we want to display a different message based on which version is being used, we'll need to parse of the string to figure out what we're working with.

<?php
if ( ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]) )	{
$browser["agent"]           = $_SERVER["HTTP_USER_AGENT"]; //Tells you everything you need to know about the visitor and and puts it in the browser variable
$browser["version"]         = array_combine( array("name", "number"),  explode(" ", array_shift( explode( ";", strstr( $browser["agent"], "MSIE" ) ) ) ) );
$browser["version"]["int"]  = array_shift( explode( ".", $browser["version"]["number"] ) ); 
}
else {
$browser["agent"]             = null;
$browser["version"]["name"]   = null;
$browser["version"]["number"] = null;
$browser["version"]["int"]    = null;
}
?>

Let's walk through that shall we?

1. Open PHP
2. If 'MSIE' is found, then we'll start parsing
3. Assign the USER AGENT to our $browser array, at the key agent.
4. Assign VERSION TOKEN data to our $browser array, at the key version. This will be an array. Starting from the inside:
   • Get a substring of the user agent if 'MSIE' is found, at the first occurence of our agent string: strstr( $browser['agent'], 'MSIE' )
   • Split the substring into an array with explode(';', [substring]) (this will split the string at any occurence of ';')
   • Get the first element of the array using array_shiftarray_shift
   • Split that element into a new array by splitting at the spaces, using explode(' ', [first element])
   • Using array_combine, assign the last explosion to array keys array('name', 'number')
5. Store an easily read version number in the $browser['version'] array, at key int
6. Not MSIE? Assign null so we dont trigger errors.
7. Close PHP

Now lets do something with that. We'll say, if the browser is IE and the version is 4.0, 5.0, 5.5, or 6.0 is found, serve a message inviting the user to upgrade, or get Firefox.

<?php
if( $browser["version"]["name"] == "MSIE" AND $browser["version"]["int"] <= 6 )
{ //the following block of html gets rendered if the visitor is browsing with IE 4, 5, 5.5 or 6
?>
<div class="fail">
 <div class="container">
  <p>Dear Reader,</p>
  <p>
   We noticed you&#8217re using 
   Microsoft Internet Explorer 
   <?php echo $browser["version"]["number"]  
   //renders the current version number of IE based on our semantic $browser variable values 
   ?>. 
	   While this website does support your browser, we strongly encourage you to <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">upgrade</a> to the latest version of Internet Explorer or better yet, go <a href="http://www.mozilla.com/firefox/">Get Firefox</a> or <a href="http://chrome.google.com/">Get Chrome</a> so you can see what the internet actually looks like.
     </p>
     <br />
     <br />
     Love,
     <br />
  	-the html times
 </div>
</div>
<?php
}
?>
 

Now we'll close that if statement statement and open the second condition for showing a message:

<?php
if( $browser["version"]["name"] == "MSIE" AND $browser["version"]["int"] >= 7){ //the following block of html gets rendered if the visitor is browsing with IE 7 or 8 
?>
<div class="fail">
 <div class="container">
  <p>Dear Reader,</p>
  <p>
   We noticed you&#8217re using 
   Microsoft Internet Explorer 
   <?php echo $browser["version"]["number"]  
   //renders the current version number of IE based on our semantic $browser variable values ?>. 
   ?>
	   While this website does support your browser, we strongly encourage you to go <a href="http://www.mozilla.com/firefox/">Get Firefox</a> or <a href="http://chrome.google.com/">Get Chrome</a> so you can see what the internet actually looks like.  
  </p>
  <br />
  <br />
  Love,
  <br />
  -the html times
 </div>
</div>
 
<?php } ?>

If you run that bit of php at the top of any page, you'll get the unstyled message in a div with a class of "fail" when visiting in IE. If you'd like to use the styles that we use on the html times (viewable by toggling the demo at the top of this page), than copy this class into you're stylesheet:

.fail{
	background:#FBE3E4;border-bottom:2px solid #FBC2C4;color:#8A1F11;
	font-size: 16px;
	margin:0 auto;
	padding:1em 0;
	z-index:100;
}