Dieter Petereit 16. Januar 2017

Outdated Browser: Freies Projekt informiert deine Besucher über den Zustand ihres Browsers

Das Problem ist nicht mehr ganz so akut wie noch vor einigen Jahren. Dennoch surfen auch heutzutage noch zu viele Menschen mit einem veralteten Browser. Wenn deine Website sehr modern ausgestattet ist, werden diese Menschen keinen Spaß daran haben. Bevor sie deshalb sauer auf dich werden, weise sie doch einfach freundlich darauf hin, dass sie mit einem antiquarischen Seitenbetrachter unterwegs sind.

Entschuldige, aber dein Browser ist uralt.

Hinweisgeber wie „Outdated Browser” gab es vor einigen Jahren noch wie Sand am Meer. Aber keiner sah so gut aus, wie der, den ich dir heute vorstelle. „Outdated Browser” kommt in vielen verschiedenen Sprachen, darunter Deutsch, als Kombination aus JavaScript und CSS daher. Das Tool steht unter der MIT-Lizenz auf Github zur kostenfreien Verwendung bereit und unterliegt keinerlei Abhängigkeiten. Du kannst es also als unabhängige Lösung verwenden.

Die komprimierte Version des JavaScript wiegt gerade einmal rund 3kb. Die ebensolche Version des CSS bringt es auf 1kb. Verschiedene Sprachen werden als HTML-Dateien mitgeliefert. Diese wiegen jeweils um die 0,3kb.

Die Verwendung ist einfach. Du benötigst die minifizierte JS, sowie selbige CSS und den Ordner lang. Alle benötigten Dateien sind im Downloadarchiv enthalten. Stelle das Paket in deinem Webspace bereit und binde die Dateien entsprechend im Head (CSS) und im Body (JS) deiner Website ein. Direkt nach dem öffnenden Body setzt du dann ein Div mit der ID outdated. Hierdurch wird das JavaScript getriggert.

Das Einbinden und Aktivieren der Lösung dauert nur wenige Minuten. Die Optik könntest du anpassen, sie ist allerdings im modernen Flat Design gehalten und von daher out-of-the-box sicherlich für die meisten Fälle bereits hübsch genug.

Wird die Seite nun mit einem modernen Browser besucht, passiert nichts. Kommt ein Besucher mit einem nicht aktuellen Browser, wird er mittels eines Headers sanft darauf hingewiesen, dass es für seinen Browser eine aktuellere Version gibt. Klickt er auf diesen Hinweis, wird die folgende politisch korrekte Übersicht eingeblendet.

Wichtig zu wissen ist, dass die Lösung gezielt auf Desktop-Browser abzielt und nur dafür eingesetzt werden kann. Bevor du das kritisierst, soltest du nochmal kurz nachdenken, ob es auf mobilen Geräten überhaupt veraltete Browser gibt. Eher nicht, oder? Gut, wenn du noch mit Android 2.01 unterwegs bist vielleicht, aber dann ist das nicht eh dein vordringlichstes Problem.

Outdated auf allen Ebenen

Wer sich das JavaScript und das CSS näher ansieht, wird vermutlich die Hände über dem Kopf zusammen schlagen. Der Code macht nämlich der Bezeichnung Outdated alle Ehre. Die Erklärung ist indes einfach und nachvollziehbar. Damit „Outdated Browser” in alten Browsern funktioniert, muss es natürlich eben für diese alten Gesellen geschrieben sein. Da ist kein Platz für moderne Ansätze.

„Outdated Browser” ist eine Lösung der portugiesischen Design-Agentur Büro und steht auf Github zum Download und zur Mitwirkung zur Verfügung. Nutzer selbstgehosteter WordPress-Installationen können das Tool direkt als Plugin verwenden und sich so den Einbau erleichtern. Der Vollständigkeit halber sei erwähnt, dass es weitere vorgefertigte Module gibt, und zwar für Ruby, Drupal, Magento, Contao und Yii2.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Eigentlich sollte man eine Website so machen, sodass sie mit allen Browsern funktioniert. Mich erinnert das an die Hinweise in der Web-Steinzeit, für welche Bildschirm-Größe eine Webseite geeignet ist. Als User will ich derartige Ermahnungen eigentlich nciht sehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück