Navigationsleisten

NetObjects Fusion stellt in der momentan frei verfügbaren Version 2.02i einige nette Features zur Gestaltung von WEB-Seiten zur Verfügung. Unter anderem gibt es auch ein Tool mit dem sich dynamische Navigationsleisten aufbauen lassen ... mit eben dem systemimmanenten Nachteil der Dynamik (dazu unten mehr).

Positiv ist dabei zu bewerten, dass der Leser einer Site in der Nav-Leiste angezeigt bekommt, auf welcher Seite der Site er sich gerade befindet. Dieses Feature lässt sich ein- und ausschalten.

Negativ fällt auf, dass es keine Möglichkeit gibt, automatisch einen Link in der Nav-Leiste zu erstellen, der den Sprung in die überlagerte Seite erlaubt. Außerdem ist nicht ersichtlich, ob, und wenn ja, welche Seiten einer bestimmten Seite unterlagert sind.

Das Navigationsleisten-Tool von NetObjects Fusion lässt sich in bestimmten (engen) Grenzen parametrieren, so dass unterschiedliche Ebenen der Site angezeigt werden. Zur Auswahl steht:

• oberste Ebene
• übergeordnete Ebene
• aktuelle Ebene
• untergeordnete Ebene

Außerdem lässt sich in jede der aufgeführten Darstellungen zusätzlich die Homepage aufnehmen, so dass immer auf die Wurzel der Site navigiert werden kann.

Mit diesen für die Navigation zur Verfügung stehenden Stilmitteln lässt sich aber nicht vernünftig auf einer strukturierten Site navigieren, man verliert leicht den Überblick, und sich immer wieder von der Root aus vortasten lässt schnell die Lust am Stöbern verlieren.

NetObjects hat diesen Mangel offenbar auch erkannt und hat mit dem JavaScript-basierten Sitemapper ein pfiffiges Tool zur grafisch gestützten Navigation mitgeliefert. Wird der Sitemapper vom Leser per Mausclick gestartet, baut der Browser in einem zweiten Fenster eine Darstellung der Sitestruktur auf und erlaubt das freie Springen zwischen den Seiten. Die Seiten werden als unbeschriftete Rechtecke dargestellt, der Seiten-Name erscheint als Tool-Tip wenn der Mauscursor auf einem der Rechtecke verweilt.

Der Nachteil: Die entsprechenden Java-Classes müssen vom Browser erst geladen werden, und selbst auf einem 500 MHz PIII dauert es einige Sekunden, bis die Site-Struktur, auch bei wenigen Seiten, dargestellt wird.

Schon relativ früh während des Prozesses der Erstellung meiner Site habe ich nach Alternativen für den langsamen Sitemapper und die rudimentären Navigationshilfen gesucht. Dabei habe ich auch versucht, mit den gegebenen Mitteln den Komfort zu erhöhen. Fleißige Besucher meiner Site haben vielleicht bemerkt, dass ich zwischenzeitlich mehrere der automatischen Nav-Leisten nach Fusion-Bauart eingebaut hatte, um außer der aktuellen Seite auch übergeordnete und gegebenenfalls unterlagerte Seiten anzuzeigen. Das dabei entstehende “Gezappel” im linken Frame war aber alles andere als übersichtlich, selbst mir viel es schwer, aus den sich dauernd ändernden Anzeigen Rückschlüsse auf die Struktur meiner eigenen Site zu ziehen.

Seit ein paar Tagen habe ich dann alle Fusion-eigenen Navigationshilfen über Bord geworfen und die Site-Struktur mittels “handgemalter” Bilder mit entsprechenden Overlay-Texten und Alt-Tags dargestellt. Der Aufwand ist sozusagen einmalig und besteht im Wesentlichen in der Gestaltung der Images für die einzelnen möglichen Stufen einer Tree-Darstellung. Nach diesen Vorarbeiten wird noch der Link auf die entsprechende Seite gesetzt und fertig ist die Laube.

Ich habe den von Fusion mitgebrachten Stil “Architekt” für meine Site gewählt und dessen Stilelemente entsprechend angepasst.

Folgende Elemente sind für den Aufbau einer Sitestruktur bis zur Tiefe 5 (Home, darunter die Hauptebene und 3 Unterlagerte Gliederungsebenen) notwendig:

Hiermit wird Home und die Hauptebene dargestellt

Die erste Unterebene

Die zweite Unterebene mit weiteren Seiten auf der ersten Unterebene

Die dritte Unterebene mit nachfolgenden Seiten der ersten und zweiten Unterebene

Die zweite Unterebene ohne nachfolgende Seiten der ersten Unterebene

Die dritte Unterebene mit nachfolgenden Seiten auf der ersten Unterebene

 

Diese Images habe ich zur Zeit verwendet. Bei Erweiterungen der Site werden wahrscheinlich weitere Elemente notwendig werden, der Aufwand bei deren Erstellung ist aber nach erfolgter Festlegung der grundsätzlichen Struktur der Darstellung gering und, wie ich finde, durchaus lohnend.

Der Vorteil dieser Lösung:

Geschwindigkeit! Erstens ist der linke Frame jetzt statisch, muss also vom Browser beim Seitenwechsel nicht neu aufgebaut werden, zweitens ist (zur Zeit) kein JavaScript auf meinen Seiten vorhanden, also auch dafür keine zusätzlichen Ladezeiten.

Nachteile hat die Lösung leider ebenfalls:

Der Leser bekommt in der Navigationsleiste keine Rückmeldung, wo innerhalb der Sitestruktur er sich gerade aufhält (der Preis der Statik). Dazu muss er den Blick auf die Seitenüberschrift lenken, was durch entfernen des Header-Frames (mit dem Ziel, weniger Ladearbeit für den Browser zu erreichen) wieder Scrollarbeit bedeutet.

Außerdem dauert der erste Aufbau des linken Frames länger als sonst, da jede einzelne Stufe der Nav-Leiste als einzelnes Image geladen werden muss.

 

Warum habe ich die Dynamik in der Einleitung als Nachteil bezeichnet ?

Der Gedanke einer Navigationsleiste war für mich der, dem Leser zu zeigen, was er alles auf meiner Homepage findet. Einige meiner Seiten sind wesentlich länger als auf einem Bildschirm darstellbar wäre. Man muss also scrollen. Anfangs sind dann die Navigations-Buttons mit nach oben weggescrollt, ein Seitenwechsel ließ sich nur erreichen,  indem wieder nach oben gescrollt wurde, bis die Nav-Leiste wieder sichtbar war.

Abhilfe bringt hier die Aufteilung der Seite in Frames. Für den besprochenen Fall bietet sich ein links neben dem Hauptframe angeordneter Frame an, der lediglich die Nav-Leiste und einige weitere Infos beherbergt, die immer sichtbar sein sollen, egal wo auf der Seite sich der Leser gerade befindet. NetObjects Fusion bietet mit den Autoframes eine per Mausclick zu aktivierende Frameeinteilung an.

Ein Vorteil der Aufteilung in Frames ist, dass eigentlich nur der Hauptframe geladen zu werden braucht, wenn per Nav-Leiste eine neue Seite angesprungen wird. Durch die dynamische Anpassung der Nav-Leiste an die momentan angezeigte Seite (Hervorhebung duch andere Buttongrafik) ist der Browser aber gezwungen, den Nav-Leisten-Frame ebenfalls neu darzustellen. Dieser prinzipielle Vorteil der Frames ist also durch die dynamische Anpassung dahin.