Browser-kompatible Navigation
Menü für alle

Problem: Website-Navigation

Browser-kompatible Navigation

Einem Besucher die optimale Orientierung zu bieten ist der Sinn einer guten Website-Navigation. Wenn der Besucher jedoch davon wegen der Wahl des Browsers oder dessen Einstellungen nichts mitbekommt, ist der Zweck verfehlt und man kann sich die Arbeit für ein aufwendiges Navigationssystem ersparen.

Eine Minimalanforderung ist daher in jedem Fall, dass zumindest die aktuellen Versionen der gängigen Browser unterstützt werden müssen. Darüber hinaus muss für alle übrigen Varianten zumindest eine Basis-Navigation verfügbar sein.

Der Webdesigner steht beim Layout einer Navigation vor mehreren Problemen. Entscheidet er sich für den kleinsten gemeinsamen Nenner, wird das Design eher ärmlich aussehen und alles andere als ein Eye-Catcher sein.

Bei der Verwendung eines Content-Management-Systems, das die Navigation in der Regel automatisch aufbaut, ist er darauf angewiesen, dass das verwendete CMS ein möglichst hohes Maß an Browserkompatibilität bietet.

Bei einer intensiven CSS-Nutzung für den Aufbau der Navigation ist ebenfalls Vorsicht geboten, da die verschiedenen Generationen der unterschiedlichen Browser weit davon entfernt sind, eine einheitliche CSS-Unterstützung zu bieten.

Auch Skript-Lösungen für die Navigation bieten keinen unproblematischen Ausweg aus der Situation. Viele der in früheren Beiträgen zu der Serie vorgestellten Skripts arbeiten zum Beispiel mit Javascript. Zum einen ist auch hier ? insbesondere bei älteren Browser-Versionen ? keine durchgehende und einheitliche Unterstützung gegeben. Zum anderen hat jeder Anwender die Option, bei seinem Browser zum Beispiel aus Sicherheitsgründen Javascript komplett abzuschalten. Prinzipiell besser ist die Situation in jedem Fall bei Verwendung von serverseitigen Skript-Lösungen wie zum Beispiel PHP, bei denen reiner HTML-Code an den Client geliefert wird.

Ähnliche Probleme treten bei eher exotischen Lösungen wie Flash-Navigationen auf. Die mögen zwar dem Auge schmeicheln und dem Designer interessante Optionen bieten. Wenn der nötige Player jedoch auf dem Client nicht verfügbar ist, sitzt der Surfer in Sachen Navigation auf dem Trockenen.

Lösungsvarianten

Browser-kompatible Navigation

Der rigoroseste Ausweg aus diesem Wirrwar an Einschränkungen und Unabwägbarkeiten ist ein Durchmarsch unter dem Motto
»Augen zu und durch«. Die Site wird für die aktuellen und marktbeherrschenden Browser, also Internet Explorer 6 und Firefox 1.x optimiert und der Rest kann sehen, wo er bleibt.

Wer auf geschätzte 20 Prozent seiner potenziellen Kundschaft verzichten will oder kann, für den ist dies ein durchaus effizienter und gangbarer Weg.

Ein eventueller Besucherschwund lässt sich durch eine genaue Analyse der Log-Dateien eventuell noch abmildern. Entdeckt man dort zum Beispiel eine signifikante Häufung von eher exotischen Client-Konfigurationen, kann man diese Klientel ja durchaus zusätzlich beim Design berücksichtigen.

Es liegt zum Beispiel nahe, bei einer Site, die sich thematisch vor allem an Mac-User richtet, die Besonderheiten dieser Umgebung beim Design speziell zu berücksichtigen. Ähnliches gilt für Angebote, dies sich vor allem an Linux-User wenden. Hier kann man die Spezifika dieses Betriebssystems durchaus auf Kosten der Windows-Surfer stärker berücksichtigen.

Optionen bieten

Browser-kompatible Navigation

Wer sich eine Vernachlässigung potenzieller Interessenten nicht leisten kann oder will, kommt nicht umhin, durch Tricks beim Design seiner Navigation auch dieser Zielgruppe ein adäquates Layout zu bieten. Dass darunter die Effizienz der Arbeit leiden kann, muss natürlich jedem klar sein.

Ein gängiger Weg, möglichst vielen potenziellen Surfern mit unterschiedlicher Ausstattung ein spezifisch an ihre Umgebung angepasstes Navigationsdesign zu bieten, ist die altbekannte Browserweiche. Diese fragt die Ausstattung des abfragenden Clients ab und liefert dann die adäquate Navigation aus. Aber auch dieser Schuss kann nach hinten losgehen, wenn man eine solche Weiche zum Beispiel mit Javascript realisiert, der Client diese Funktion jedoch abgeschaltet hat. Unabhängiger ist man in jedem Fall, wenn man eine solche Abfrage und Weiche per Skript auf dem Server realisiert.

Eine PHP-Browserweiche, die zwischen Internet Explorer, Netscape und sonstigen Browsern ? beispielsweise Opera ? unterscheidet, kann zum Beispiel so aussehen:


if( eregi("(msie) ([0-9]{1,2}.[0-9]{1,3})",$HTTP_USER_AGENT) )
{$browser = "MSIE";}
else if( eregi("(netscape6)/(6.[0-9]{1,3})",$HTTP_USER_AGENT) ){$browser = "Netscape";}
else{$browser = "?";}

if ($browser == ?MSIE?) {
header("Location: http://www.domain.de/ie.html");
} elseif ($browser == ?Netscape?) {
header("Location: http://www.domain.de/ns.html");
} else {
header("Location: http://www.domain.de/unbekannt.html");
}
?>


Durch eine entsprechende Anpassung der Parameter kann man mit Hilfe dieser Weiche jeden gewünschten Browser abfragen und entsprechend bedienen. Ein Liste aller möglichen Parameter zur exakten Client-Identifikation findet sich unter de.selfhtml.org/diverses/clients.htm.

Probleme mit CSS

Browser-kompatible Navigation

Wer seine Navigation mit Hilfe von CSS layouten will, kann zwar sehr flexibel agieren, was die Bedienung verschiedener Clients betrifft, doch auch diese Methode hat ihre Tücken. Die Browser-Welt ist weit davon entfernt, ein einheitliches Bild bei der Unterstützung von CSS abzugeben.
Die momentan im Einsatz befindlichen Browser lassen sich bezüglich ihrer CSS-Fähigkeiten grob in vier Gruppen einteilen:

– Firefox 1.x, Mozilla ab 1.5, Opera ab 7 und Safari ab 1.1 unterstützen den aktuellen Standard CSS 2.1 sehr ordentlich und realisieren teilweise sogar bereits Eigenschaften des designierten Nachfolgers CSS 3.

– Der Internet Explorer in der aktuellsten Version 6 hinkt schon etwas hinterher, erlaubt aber trotzdem noch komplettes Layout mit CSS ? mit Einschränkungen trifft das auch auf die Version 5.5 zu.

– Der Internet Explorer 5 und die letzten Mac-Versionen 5.1 und 5.2 sind die aktuellen »Sorgenkinder« der CSS-Entwickler. Obwohl prinzipiell auch hier noch Layout mit CSS möglich ist, erfordern diese Browser an vielen Stellen Sonderlösungen und zusätzliche Aufmerksamkeit. Glücklicherweise sinken ihre Marktanteile, und auch auf der Mac-Plattform steht mit Safari ein CSS-tauglicher Browser zur Verfügung.

– Noch ältere Versionen des Internet Explorer und der bei CSS-Entwicklern berüchtigte Netscape 4 spielen inzwischen nur noch in Nischen eine Rolle und können für die meisten Anwendungen ignoriert werden. Vor ihnen werden die CSS-Anweisungen einfach versteckt, so dass zumindest die Inhalte auch mit diesen alten Browsern erreicht werden können.

Ältere Browser

Browser-kompatible Navigation

Es gibt eine Reihe von Browsern, die auf unterschiedlichen Versionen der oben Genannten basieren und entsprechend funktionieren: Neue Netscape-Browser verwenden die Rendering-Engine von Mozilla (
»Gecko«), der Linux-Browser Konqueror hat den gleichen Kern wie Safari, und eine ganze Reihe weiterer Browser basieren auf unterschiedlichen Internet-Explorer-Versionen.

Mit Tricks und Hacks und vor allem einer guten Planung des CSS-Designs kann man jedoch das Problem der Browserkompatibilität etwas entschärfen.

Zum Beispiel kann man schon mit der Art, wie ein externes Stylesheet in eine Seite eingebunden wird, verhindern, dass ältere Browser wegen CSS ein Layout-Desaster auf der Seite anrichten. Wenn das Stylesheet durch

eingebunden ist, wird es von den älteren Browsern Netscape 4, Internet Explorer 3 und 4, Konqueror 2 nicht mehr aufgerufen. Dadurch erhalten diese Browser ? und alle anderen Anzeigegeräte, die kein CSS verstehen ? immerhin noch den gesamten Inhalt der Seite und damit auch die Navigationselemente dargeboten.

Windows und Mac

Browser-kompatible Navigation

Auch für das unterschiedliche CSS-Verhalten des IE auf Windows und Mac gibt es einen Hack, mit dem sich Anweisungen vor den IE/Mac verstecken oder nur für ihn zuweisen lassen:


Versteckt vor IE/Mac
/* ohne IE/Mac \*/
keinMacIE { ... }
/**/
Nur für IE/Mac
/* nur IE/Mac \*//*/
nurMacIE { ... }
/**/


Beide Hacks beruhen auf dem Prinzip, dass der IE/Mac nach einem \ die nächste Anweisung übersieht.

Man sollte sich allerdings nichts vormachen: Solche Tricksereien sind alles andere als rationelles und effektives Webdesign. Sie sind mit einem Riesenaufwand verbunden und können leicht dazu führen, dass die meiste Zeit für Aufbau und Pflege einer Site für das diffizile Design draufgeht und der Content auf der Strecke bleibt.

CSS-Navigation

Browser-kompatible Navigation

Sinnvoller ist es, durch eine kluge Planung im Vorfeld eine optimale Synthese zwischen ansprechendem Design und der Bedienung einer möglichst breiten Zielgruppe zu erreichen. Folgendes Verfahren beim Entwurf einer CSS-Seite und damit einer ebensolchen Navigation hat sich bewährt:

– Identifizieren Sie die Funktionsbereiche der Site und legen diese als