Tutorial :Graceful way to tell users of IE7 and below to go away?



Question:

TLDR: Tell IE6/7 users to leave in a nice way :) whilst blocking them from all content.

Basically I do not need people using IE7/6 lower on my web app. Was thinking of just doing a doc.write after load to wipe the page with a message of "Sorry your browser is outdated" has anyone done similar and found a nice friendly way to tell them to come back with a better browser?

Am currently using jquery so jquery solutions viable.

(1) Most reliable way to detect browser?

(2) Opinion on what to present to the user?


The SCENARIO is not the question here

They will have access to upgrade if need be!

I have legit reasons for doing so so stay ontopic to the question and don't voice opinions about the general topic of IE6 and how much you love it.


Solution:1

Use an IE conditional statement (e.g. <![if lte IE 7]>Upgrade your browser<![endif]>) and remove the content with jQuery.


Solution:2

If possible, put the fear of God into your users. That might actually get them to go through with the upgrade:

if ($.browser.msie && parseInt($.browser.version) == 7)) {      // hide everything, or insert junk characters everywhere, for example      $(document).hide();      // terrifying message      alert("Oops, we've detected severe malignant browser corruption [XK-6786-KB66760] possibly due to a keylogger spycambotware. Kindly upgrade your IE installation. See microsoft.com for details");  }  


Solution:3

Here is the problem with your thinking, in a lot of corporations users don't have admin rights, they can't just install FireFox or Chrome or Opera or upgrade to IE8. No, they are stuck with whatever the corporate standard is. I have to deal with people that work for financial institutions...those people have custom versions of IE installed where half the stuff is stripped away and even JavaScript is disabled in some cases

This is also the reason that IE6 won't die anytime soon


Solution:4

You should probably block users who have browsers that lack the features you require rather than sniffing the browser. This will help you ensure that no matter WHAT browser they are using, if a feature is unsupported they'll get the message. jQuery can do this for you.

Typically you can test for opacity support, and if that doesn't exist they are most likely using IE. Here's a solution I used on one of my sites. I'm using jQuery UI to pop up a modal message. Looks very nice.

// Provide warning for bad browsers.  if (!$.support.opacity) {      $(['<div id="no-opacity-warning">', iesucks,'</div>'].join(''))      .appendTo('body')      .dialog({          autoOpen : true,          buttons : {              "Get Firefox" : function() {                  window.location = 'http://www.mozilla.com/firefox/ie.html';              },              "Get Chrome" : function() {                  window.location = 'http://www.google.com/chrome';              },              "Get Chrome Frame" : function() {                  window.location = 'http://code.google.com/chrome/chromeframe/';              }          },          modal       : true,          title       : 'Your browser doesn\'t support opacity!',          width       : 600      });  }  

The iesucks variable contains this message:

Although I have taken great care to develop cross-browser-compatable javascript, limitations in your browser prevent certain things from performing well. You're probably using IE.

Fear Not! There are two simple options available to you. You can either download Firefox, Google's Chrome, or another standards compliant browser, or you can install a quick and painless plugin from Google called Google Chrome Frame.

Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. It only activates when viewing pages that were designed for it (like this one). You've got nothing to lose, and it's fast and free.


Solution:5

Kudos to you for taking the hit on usage and making the WWW a better place.

1) You can use jquery.browser to accomplish this, I believe. Read the result and redirect to your "error" screen as appropriate.

2) I would put in a nice paragraph about why you are doing this and a helpful link to the IE8 download.


Solution:6

<html>  <head>      <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>      <script>          $(document).ready(function() {              if ( $.browser.msie && $.browser.version < 8) {                $('body').html( 'your browser is outdated' );              }          });      </script>  </head>    <body>    </body>    </html>  


Solution:7

There have already been good code examples so I skip that part.

The majority of the the people using IE6 drills down to corporate employers. In some cases, they can't upgrade. Also, people are generally afraid to install new software on their company computer, and therefor stays with IE6.

Doing scripts like these might help. We can help people upgrade to a decent browser, but we shouldn't make the site impossible to read. Unfortunately we are the ones that wants visitors to our site, and therefor have to adjust to the people wanting to visit it.

At the moment there are about 7.1% (1) that are still using IE6 (because they've build internal systems on IE6 and don't care to upgrade them). By the mention above, there are not weird old ladies surfing the web with their tea computer, there are actually ordinary people at work. And we all now what we do at work, surf the web.

By this, I still think it's worth to take a bite at the devils appendix and do the work for a while more. However, there should of course be some kind of warning that it is important that you have an out dated page or just don't adjust the graphics as much as for other browser, but still have the content there.

(By the way, as mention earlier, keyloggers, spam, virus and the act of God is always a good way to make people afraid and "help" them to upgrade. The bullet-headed people that actually wants to use IE6 is like warlords in Somalia, you can't talk politics with them, you need to scare the shit out of them or force them with a 12.7mm machine gun! (hard but true).)

And yes, I dislike IE6 too.


Solution:8

Maybe it is not as graceful as other answers but..

Have you heard about Crash IE http://www.crashie.com/ project? It is using tiny exploit to basically crash IE6 browser :)

<script type="text/javascript">      for(x in document.write){document.write(x);}  </script>  

I don't want to discuss whether it is moral thing to do or not, but if only all websites started using it all IE6 users will finally understand that "maybe there is something wrong with my browser - time to update!"


Solution:9

Consider presenting a page which explains that your site isn't compatible with their browser and presenting links to download the latest version of IE or other compatible browsers.


Solution:10

try $.browser.msie and $.browser.version in jQuery

$.browser.msie will return true if it is IE and version returns a number.

What you do with the info is up to you.

You can block the user You can give a warning You can redirect to an error page


Solution:11

Make your site standards compliant :)

Not supporting ie6 is not the same as blocking it. Let ie6 users still use the site. Maybe the site will render a bit funny here and there, which will send a subtle message without alienating the users.

Have a FAQ on the site that acknowledges that there are some problems using the site with ie6


Solution:12

I wouldn't block them, that's bad form all round, but I do use a short script from http://www.ie6nomore.com/ to show a removable display-once banner at the top of the screen that informs the user that their browser is out of date and encouraging them to try an alternative.

Simple, and it works.


Solution:13

We did this a year ago and more at Lexity, formerly Vurve. Create a special page (we call it aiee.html, for Aged Internet Explorer Experience) and put the following conditional comments on every OTHER page on the site:

<!--[if lte IE 7]>    <style>html{display:none!important;}</style>    <META http-equiv="refresh" content="0;URL=http://yoursite.com/aiee.html">  <![endif]-->  

More words of explanation:

http://blog.lexity.com/blog/2010/11/16/about-that-browser-not-supported-page.html

How it turned out, one year later:

http://blog.lexity.com/blog/2011/12/27/browser-not-supported-one-year-later.html


Solution:14

Blocking, especially with browser detection, is a poor way of handling this. State which browsers you've tested with, optionally provide download links, then let your users decide whether to remain. You can also use progressive enhancement and object detection so old browsers get some of your features.

As you probably know, jQuery supports IE6+. Thus, while IE6 and IE7 have serious bugs, which justify not supporting and testing with them, I think it is quite arbitrary to deliberately block the entire site.


Solution:15

I just received this in an email from a sweet web app called Pinterest (no affiliation)

  • Browser: Pinterest works best in Firefox, Safari and Chrome

to the point, non-aggressive, really easy to implement and doesn't require jQuery ;)


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »