Lösen Sie sich von den Ketten!

Eine Übersetzung nach [extern, englischsprachig] The Web Standards Project.

Mit "Ketten" meine ich die Notwendigkeit, noch immer auch für alte und ältere Browserversionen zu Programmieren. Aus meiner Sicht sollten Sie sich von den Ketten der Rückwärtskompatibilität Ihres Webdesigns lösen. Bedeutsamer ist doch die Zukunftsfähigkeit mit ihrer übergreifenden Funktionalität. Die Datenstrukturierung und die Zugänglichkeit sind weitere Gründe dafür die alten Browser zu vernachlässigen. Denn Workarounds und unzulässiges HTML, wie sie für 4er Browser oft benötigt werden, stellen erhebliche [intern] Barrieren dar!

Wenn (X)HTML, CSS und die [extern, englischsprachig] Validierung Ihnen nicht geläufig sind, dann lesen Sie bitte im [extern, englischsprachig] New York Public Library Style Guide. Suchen Sie weitere Anhaltspunkte, warum Sie Webseiten nicht nach den speziellen Eigenarten veralteter, nicht-konformer Browser gestalten sollten, dann lesen Sie bitte [intern] Warum gestalten Sie nicht für Netscape 4?.

Besucher auf Browserupdates aufmerksam machen

Zwei Wege möchte ich Ihnen vorstellen, Ihre Besucher darauf hinzuweisen, dass ihr Browser veraltet ist und eine neue Version installiert werden sollte. Wählen Sie nach Belieben eine Methode aus. Selbstverständlich können Sie diese auch weiterentwickeln, modifizieren oder kombinieren. Dieser Beitrag soll lediglich die Möglichkeiten verdeutlichen und als Anregung dienen.

Die Methode DOM-Schnuppern ist etwas radikal und mit Sicherheit nicht für jede Site geeignet. Sie bewirkt die sofortige Umleitung des Besuchers mit veralteter Software auf eine Update-Seite - Ihre oder [intern] meine. Entscheiden Sie sich für diesen Weg, empfehle ich Ihnen, eine eigene Update-Seite entsprechend den Anforderungen Ihrer Besucher einzurichten.

Wenn sie dagegen versteckte Objekte einsetzen, stellen Sie sicher, dass jeder Besucher die Inhalte Ihrer Website lesen kann. Gleichzeitig werden Benutzer veralteter Browser darauf hingewiesen, dass neuere Browser zur Verfügung stehen, welche die W3C-Normen einhalten. Mit Techniken, wie z.B. dem @import-Befehl, werden alte Browser vor Style-Sheets geschützt, die sie nicht oder nur mangelhaft verstehen können. Auf diese Weise ist die Nutzbarkeit für alle Besucher gegeben, und gleichzeitig wird das Updaten sowie die Einhaltung W3C-konformer Webgestaltung gefördert.

Umsetzung der Methode Nr. 1: "DOM-Schnuppern"

Nachdem Sie eine Webseite erstellt haben, fügen Sie nachfolgendes Script ein. Wollen Sie es nur auf einer einzelnen Seite, beispielsweise der Startseite einfügen, empfiehlt sich der Einsatz innerhalb des HEAD-Elements ihres Dokuments. Soll dieses Script jedoch für alle Seiten Ihrer Website gelten, erstellen Sie besser eine externe JavaScript-Datei:

if (!document.getElementById) { window.location = "http://www.barrierefreies-webdesign.de/update/index.php"; }

In HTML 4- und XHTML 1-Dateien des DTD-Typs Transitional sieht das Script innerhalb der (X)HTML-Datei folgendermaßen aus:

<script type="text/javascript" language="javascript"><!-- //
if (!document.getElementById) { window.location = "http://www.barrierefreies-webdesign.de/update/index.php" }
//--></script>

Wenn Sie als DTD strict anwenden, müssen Sie im öffnenden SCRIPT-Element das language="javascript" weg lassen.

Haben Sie eine eigene Update-Seite erstellt, schicken Sie die User entsprechend auf Ihre Seite.

if (!document.getElementById) { window.location = "http://www.ihr-domain.de/IhreUpdateSeite.htm"; }

Wann ist diese Methode geeignet?

Ist Ihr Webdesign stark von der richtigen Interpretaion der DOM- und ECMAScript-Spezifikationen abhängig, dann werden die Seiten in alten Browser nicht oder nicht richtig dargestellt. In diesem Fall sollten Besucher mit nicht-konformer Software davon abgehalten werden, die Inhalte Ihrer Site lesen zu können.

Wann ist diese Methode nicht geeignet?

Wenn Sie auf Ihrer Website keine modernen W3C-Technologien einsetzten, erreichen Sie mit dieser Variante wahrscheinlich nur, dass einige Besucher verärgert weggehen. Hier ist die sanftere Methode mit versteckten Objekten vermutlich die bessere Lösung.

Warum funktioniert es?

W3C-DOM-fähige Browser werden dieses Stückchen Quellcode ignorieren, weil getElementById eine DOM-Methode ist. Hingegen werden nicht-konforme Browser (beispielsweise die 4er Browser von Netscape und Microsoft) auf die angegebene Update-Seite weitergeleitet. Es gibt keine Notwendigkeit, einer komplexen Browserabfrage u.ä., da Sie nicht mehr nach Browsern, sondern nach der Einhaltung der W3C-Empfehlungen prüfen.

Warum es Ihnen gefallen könnte

Die Abfrage funktioniert in jedem JavaScript-fähigen Browser, es sei denn, der Benutzer hat diese Funktionalität ausgeschaltet. Kein Besucher wird ein "zerissenes" Layout sehen. Allerdings ist nicht auszuschließen, dass Sie eventuell Post von cholerischen Mitmenschen bekommen!

Warum es Ihnen nicht gefallen könnte

Zuschriften von verärgerten Besuchern sind - wie gesagt - nicht ausgeschlossen. Aus diesem Grund ist die "sanfte" Methode mit versteckten Objekten oft vorzuziehen. Wenn Sie sich gleich doppelt absichern wollen, dann können Sie auch die beiden Methoden miteinander kombinieren.

Methode Nr. 2: Versteckte Objekte

Mit dieser Methode kann jeder Besucher Ihrer Seiten die Inhalte lesen, aber Benutzer veralteter Browser werden auch darauf hingewiesen, das [intern] neue, W3C-konformer Browser zur Verfügung stehen. Wenn Sie die Präsentation (Design) von der Struktur (Inhalt) trennen, indem Sie CSS für Design und (X)HTML für den Inhalt einsetzen, dann hilft diese Methode Benutzern veralteter Browser zu verstehen, warum die Seite anders aussieht und gleichzeitig wird ihnen vermittelt, dass Sie noch "mit im Boot sitzen". Der Hinweis wird übrigens auch angezeigt, wenn Ihre Besucher W3C-konforme Browser verwenden und aber CSS ausgeschaltet haben.

Umsetzung der Methode Nr. 2

Nachdem Sie sauber struktierte und validierte HTML 4.x, XHTML 1.0 oder XHTML 1.1-Seiten erstellt haben, fügen Sie Ihrem Style-Sheet wie folgt eine "unsichtbar"-Deklaration hinzu:

.unsichtbar { display: none; }

Natürlich können Sie den Namen unsichtbar beliebig austaussuchen. Dann schreiben Sie im BODY-Bereich Ihrer Dokumente sinngemäß folgenden Hinweis:

<h1 class="unsichtbar">Diese Seite würde viel besser aussehen, wenn Sie <a href="http://www.barrierefreies-webdesign.de/update/index.php" title="laden sie einen Browser, der den Web-Standards entspricht">einen den Standards entsprechenden Browser</a> verwenden würden. Diese Seite ist trotzdem für jeden Browser und jede WWW-Zugangssoftware zugänglich.</h1>

CSS-konforme Browser werden diesen Hinweis nicht anzeigen, solange CSS nicht deaktiviert ist. Er wird in keinem Browser Probleme verursachen, da Sie hier lediglich eine HTML-Überschrift mit einer CSS-Eigenschaft eingefügt haben. Wenn Sie wollen, können Sie statt der [intern] Überschrift auch ein P- oder ein anderes Element verwenden.

Mit einem vorsichtig formulierten Hinweis werden Sie sich auch keinen Ärger einhandeln. Zur Sicherheit können Sie den Hinweis auch vor anderen Benutzergruppen , z.B. solchen mit Lynx-, iCab- oder Palm-Pilot-Zugang oder mit einem W3C-konformen Browser ohne eingeschaltetem CSS, verstecken. Hierzu verwenden Sie das IFRAME- anstelle des H1-Elements im Beispiel.

Bitte überlegen Sie genau, wer Ihre Website besucht und mit welchen Worten Sie Ihre Besucher von einem Browser-Update überzeugen können. Der Text in meinem Beispiel ist wirklich nur als Anregung zu verstehen. Aber wenn Sie Ihre Nutzer zum [intern] Update der Software bringen, erreichen Sie viel für die Zukunft des W3C-konformen Webdesigns!

Warum funktioniert es?

CSS-Browser werden das Style-Sheet laden und die Angabe display:none verstehen, d.h. den entsprechenden Text nicht anzeigen. Veraltete Browser kennen diese Deklaration nicht. Sie werden display:none ignorieren und somit Ihren Hinweis anzeigen.

Warum es Ihnen gefallen könnte

Ihre Besucher werden freundlich und sanft auf ihren veralteten Browser aufmerksam gemacht. Sie haben dann die Wahl, ob sie ihre Software aktualisieren oder nicht. Wollen Ihre Besucher die Seiten weiterhin mit einem veralteten Browser anschauen, können das tun. Außerdem funktioniert diese Methode auch, wenn der Besucher die JavaScript-Funktionalität im Browser ausgeschaltet hat.

Warum es Ihnen nicht gefallen könnte

Es ist nicht immer leicht, veralteten Browsern das Layout zu entziehen! Hinzu kommt, dass Ihr Hinweis, und sei er noch so freundlich formuliert, von einigen Besucher als "Einmischung" in die persönlichen Freiheit empfunden wird. Mancheiner könnte die Aufforderung zum Browser-Update als Bestrafung sehen.

Weiterführende Informationen:

Über das CSS-Design

Lesen Sie, [intern] warum ich mich an die Standards halte und warum das Layout mit [intern] Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der [intern] Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?


Entspricht die Seite den W3C-Normen?


validiertes XHTML 1.0
validiertes CSS

Die [intern] Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das -Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie [intern] Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.

 

[intern] Startseite [intern] Know-How [intern] Bücher [intern] Richtlinien [intern] Links [intern] Kontakt

Logo: Xplain  Die Entstehung