Bleibe auf dem Laufenden:

Newsletter abonnieren

RSS-Feed abonnieren

Dem Andiministrator sein Twitter

Der Marktanteil des Internet Explorer 6 liegt nach den Statistiken unserer Hotelkunden noch immer bei ca. 20%. Für die Webseiten Erstellung kann er also nicht ignoriert werden. Für uns ist es jedesmal großer Aufwand, ein neues Webseiten-Template auf den IE6 anzupassen. Für die Nutzer des Internet Explorer 6 selbst entstehen erhebliche Sicherheitslücken durch die Benutzung.

Alles spricht also dafür, dass die Nutzer den IE6 auf den Internet Explorer 7 oder 8 updaten oder auf einen anderen Browser wie den Mozilla Firefox umsteigen. Nur, wer sagt es den Nutzern und wie bewegt man diese zum Umstieg?

Wie einige andere vor mir habe ich nun beschlossen, ab jetzt in alle neuen Seiten eine IE6 Warnmeldung einzubauen. Hier habe ich beschrieben, wie ich dabei vorgehe, vielleicht machen ja einige von Euch mit ...

Der geplante IE6-Warnhinweis soll auffällig und gleichzeitig dezent sein, um die Besucher nicht zu vertreiben. Außerdem soll der Nutzer sie wegklicken können, damit die Nutzung der Webseite nicht beeinträchtigt wird. Popups wären eine Möglichkeit, aber die finde ich zu penetrant. Ich habe mich für die Einblendung eines kleinen gelben Kopf-Banners entschieden, ähnlich wie es von Mozilla Firefox oder Internet Explorer z.B. bei Popup-Unterdrückung ausgegeben wird. Damit es auffällt, soll es beim Aufrufen der Seite langsam eingeblendet werden. Über einen Schließen-Button soll es auch wieder ausgeblendet werden können. Und so sieht das ganze auf einer Seite von mir aus:

Für die Umsetzung habe ich mich für jQuery und einem kleinen Plugin entschieden. Das funktioniert bei jedem Internet Explorer 6, welcher Javascript aktiviert hat. Sollte Javascript deaktiviert sein, wird einfach kein Hinweis angezeigt, es gibt also keinerlei Beeinträchtigung beim Webseiten-Besucher.

Wir brauchen zunächst die aktuelle Version von jQuery, am besten die minimierte, um Ladezeit zu sparen:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

Als Plugin eignet sich das jQuery Plugin Notifications, welches es hier gibt:
http://programmingmind.com/contributions

Da ich kein Freund von Versionsnummern im Quelltext bin, habe ich nach dem Download die Dateien erst einmal umbenannt:
"jquery-1.3.2.min.js" wird zu "jquery.min.js"
"jquery.notifications-1.1.min.js" wird zu "jquery.notifications.min.js"

Damit das Ganze auch nach etwas aussieht, habe ich die von Programmingmind angebotene CSS-Datei etwas angepasst:
/* jQuery Notifications plugin - http://programmingmind.com */
/* notification container */
#jquery-notifications {position:fixed;width:100%;left:0;top:0;z-index:11;filter:alpha(opacity=80, finishopacity=80, style=2);font-size:12px;line-height:14px;}
#jquery-notifications img {vertical-align:middle;margin-right:5px;}
* html #jquery-notifications {position:absolute;}
/* common style properties for all the notification messages */
#jquery-notifications div.notice,#jquery-notifications div.success,#jquery-notifications div.warning,#jquery-notifications div.error {margin:0;padding:5px;padding-left:10px;border-bottom:2px solid;}
#jquery-notifications div.notice {background:#6C9FFC;color:#061A72;border-color:#061A72;}
#jquery-notifications div.success {background:#96F96F;color:#045419;border-color:#045419;}
#jquery-notifications div.warning {background:#ff8;color:#333;border-color:#333;}
#jquery-notifications div.error {background:#F97C6F;color:#570F01;border-color:#570F01;}
/* style property for the close text */
#jquery-notifications div a {position:absolute;right:10px;color:#333;font-size:12px;line-height:14px;font-weight:bold;text-decoration:none;border:1px solid #333;padding:0 3px;}
Entweder Ihr kopiert Euch den Quelltext und speichert ihn in der Datei "ie6.css" oder Ihr downloadet (eingedeutschtes Wort) ihn hier.

Vor dem Warntext soll noch ein kleines Icon angezeigt werden, das könnt Ihr Euch hier downloaden.

Weiterhin benötigen wir noch den Javascript-Aufruf, welcher das Plugin aufruft:
$(function() {
sfHover = function() {
var sfEls = document.getElementById("primary-nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() { this.className+=" sfhover"; }
sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }
}
}
$.n.defaults.timeout = 5000;
$.n.defaults.fadeSpeed = 500;
$.n.defaults.effect = "slide";
$.n.defaults.stick = 1;
$.n.defaults.close = "X";
$.n.warning('<img src="/images/hoho/achtung.gif" /><strong>ACHTUNG!</strong> Ihr Browser (Internet Explorer 6) ist veraltet! Bitte aktualisieren Sie auf Internet Explorer 7 oder 8!');
});
Diesen speichert Ihr ebenfalls in einer seperaten Datei namens ie6.js. Auch diese Datei könnt Ihr hier downloaden.

Wir haben nun also folgende Dateien:

• jquery.min.js
• jquery.notifications.min.js
• ie6.css
• ie6.js
• achtung.gif

Was noch fehlt ist die HTML-Seite selbst (oder in meinem Fall das Template). Diese Seite sollte es bereits geben, wir müssen nun nur noch im Head des HTML-Quelltextes unsere Dateien einbinden. Im folgenden einmal eine Beispiel-HTML-Seite, wo der einzubindende Quelltext rot markiert ist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Beispiel-HTML-Seite</title>
<!--[if IE 6]>
<link href="ie6.css" media="screen" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.notifications.min.js"></script>
<script type="text/javascript" src="ie6.js"></script>
<![endif]-->
</head>
<body>
<br /><br /><br />
Ich bin der Inhalt einer HTML Seite.
</body>
</html>
Wie Ihr seht, habe ich den Aufruf der Dateien in Conditional Comments eingeschlossen. Somit werden die Dateien nur eingebunden, wenn der Besucher mit dem Internet Explorer 6 daher kommt.

So das war es auch schon. Wer will, kann sich das Ergebnis z.B. hier anschauen: http://hotel-hosting.de/

Wer keinen Internet Explorer 6 mehr auf seinem Computer findet, kann sich den IE Tester einmal anschauen: http://www.my-debugbar.com/wiki/IETester/HomePage

• alte Kiehvotz - Donnerstag, 29. Oktober 2009, 17:21
  Ich würde sofort mitmachen, aber das sind mir zu viele Header-Angaben, die dann auf jeder Seite stehen würden.
  
  Ich bin da ein kleiner Header-Fetischist, der so wenig wie möglich Scripte o.ä. dort reinbauen will...
• Kompatibilitätscheck für Internet Explorer Versionen
  CCK GROUP BLOG - Samstag, 06. Februar 2010, 23:12
  IE Icon
  Beim stöbern durch das Web bin ich auf eine interessante Software gestoßen, mit der man einen Kompatibilitätscheck für den Internet Explorer (Versionen 5.5 bis aktuell 8.0) durchführen kann.
  Wer keine alte Version des Internet Explorer auf sein...
• Julian - Donnerstag, 22. April 2010, 22:46
  (oha, ich sehe, da benutzt jemand ein schönes XP-Theme von lassekongo83 ^^ )
  
  wenn man andere Browser außer den IE nicht mit überflüssigem Code belästigen will, der kann dies hiermit erreichen:
  http://www.time4joomla.de/tipps-a-tricks/70-php-browserweiche.html
  
  müsste dann so aussehen, oder?
  
  <?PHP
  if(eregi("msie",$_SERVER['HTTP_USER_AGENT']))
  {
  echo '
  <!--[if IE 6]>
  <link href="ie6.css" media="screen" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.notifications.min.js"></script>
  <script type="text/javascript" src="ie6.js"></script>
  <![endif]-->
  ';
  }
  
  ?>
  
  
• weg
  Mark - Freitag, 07. Mai 2010, 17:08
  der Link zu jQuery Plugin Notifications ist leider tot... :-(
  
  wo bekomme ich die js datei her...
  
  danke
  lg
• Link angepasst
  Andiministrator - Freitag, 07. Mai 2010, 17:45
  Danke für den Hinweis, ich habe den Link angepasst.