|
|
|
5.7 Navigation
|
|
|
|
|
5.7.1
Einführung
Navigation ist das zentrale Thema beim Website-Entwurf: eine misslungene Navigation kostet Besucher und Ansehen. Wie dagegen eine gute Navigation aussehen sollte, ist in Kapitel 3.4, "Site-Strukturen und Navigation", beschrieben. Um in die Materie einzusteigen, fassen wir die wichtigsten Anforderungen noch einmal kurz zusammen:
- Verständlichkeit. Eine Navigation, die erst erklärt werden muss, ist eine schlechte Navigation.
- Übersichtlichkeit. 100 Navigationsmenü-Einträge machen keinen Surfer glücklich.
- Keine Sackgassen. Jede Unterseite muss über die wichtigsten Navigationselemente verfügen und einen Link zurück zur Hauptseite enthalten.
- Durchgängigkeit. Das Navigationskonzept sollte innerhalb einer Seite beibehalten werden.
- Gute Beschriftungen. Links sollten immer selbsterklärend sein. Vermeiden Sie den Linktext "Hier klicken". Beispiel: "
Klicken Sie <a>hier</a>, um zu Seite X zu kommen" ist schlecht. Besser wäre: "Besuchen Sie doch auch <a>Seite X</a>"
|
|
|
5.7.2
Navigations-Gestaltung
Wir werden Ihnen nun einige Möglichkeiten zur Gestaltung einer Site-Navigation aufzeigen. Mit "Site-Navigation" ist gemeint, dass es darum gehen soll, von einer HTML-Seite zu einer anderen zu springen.
Tipp: Es ist natürlich auch möglich, innerhalb einer Seite zu springen. Auch unser eBook verwendet diese Technik, zu sehen beispielsweise im Inhaltsverzeichnis. Realisiert ist das schnell: das Sprungziel wird markiert mit <a name="ziel">Überschrift</a>, der passende Sprung-Link könnte dann so aussehen: <a href="#ziel">Zur Überschrift</a>. Manchmal ist es besser, diese Technik einzusetzen, anstatt die Inhalte umständlich auf verschiedene Unterseiten aufzuteilen.
Aber kommen wir zurück zum eigentlichen Thema, der Site-Navigation. Es gibt viele Möglichkeiten der Realisierung, einige kompatibler, andere mit aufwändigeren Effekten. Für welche Sie sich letztendlich entscheiden, hängt davon ab, wieviel Wert Sie auf diese beiden Aspekte legen. Wer absolut kompatibel sein will, fährt mit einer Liste von Textlinks sicher am besten. Für andere dagegen kann es angebracht sein, Java-Applets oder gar Flash-Menüs zu erzeugen.
Am Ende dieses Kapitels finden Sie schließlich noch Anregungen, wie das Management einer Site-Navigation erleichtert werden kann.
|
|
|
5.7.3
Der simple Textlink
Der simple Textlink ist der Klassiker unter den Navigationsmechanismen. Wer ihn einsetzt, kann mit maximaler Kompatibilität rechnen.
5.7.3.1 Definition
Definiert wird ein Textlink folgendermaßen:
<a href="sprungdatei" target="zielfenster">Beschriftung</a>
Mehr Informationen zum HTML-Code finden Sie im Kapitel "Web-Sprachen - HTML-Tutorial". Wenn Sie mit dem target-Attribut nichts anfangen können, streichen Sie es vorerst - weiter unten finden Sie mehr Informationen dazu.
5.7.3.2 Einsatzmöglichkeiten
| | Linkliste mit Zeilenumbruch | Es gibt verschiedene Möglichkeiten, Textlinks zu einer Leiste zu kombinieren. Sehr klassisch ist der einfache Zeilenumbruch:
<a href="sprungdatei">Beschriftung</a><br>
<a href="sprungdatei">Beschriftung</a><br>
<a href="sprungdatei">Beschriftung</a><br>
<a href="sprungdatei">Beschriftung</a><br>
<a href="sprungdatei">Beschriftung</a><br>

Etwas ausgefallener dagegen die horizontale Navigationsleiste. Dabei ist es üblich, ein Trennzeichen zwischen die einzelnen Links zu setzen. Aber auch eine kleine, farbige GIF-Datei wäre möglich. Eine Möglichkeit, solch eine Leiste zu realisieren, sieht so aus:
<b>[</b> <a href="sprungdatei">Link1</a> <b>|</b> <a href="sprungdatei">Link2</a> <b>|</b> <a href="sprungdatei">Link3</a> <b>|</b> <a href="sprungdatei">Link1</a> <b>]</b>

Moderne Layouts dagegen setzen eher Tabellen ein, um ähnliche Effekte zu erzielen:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="13%"><a href="sprungdatei">Beschriftung</a></td>
<td rowspan="4">Inhalte der Site</td>
</tr>
<tr>
<td width="13%"><a href="sprungdatei">Beschriftung</a></td>
</tr>
<tr>
<td width="13%"><a href="sprungdatei">Beschriftung</a></td>
</tr>
<tr>
<td width="13%"><a href="sprungdatei">Beschriftung</a></td>
</tr>
</table>

5.7.3.3 Ästhetik
Es gibt viele Webdesigner, die der Meinung sind, simple Textlinks seien unästhetisch. Wer so eine Meinung hat, vergisst eventuell, dass es auch durchaus Menschen gibt, die Minimalismus bevorzugen - der Textlink ist in seiner Form sehr klar und simpel.
5.7.3.3.1 Hover-Effekte
Abgesehen davon gibt es einige Möglichkeiten, Textlinks auch grafisch etwas aufzuwerten. Eine ist der Hover-Effekt: wenn ein Link vom Mauszeiger berührt wird, ändert er sein Aussehen. Realisiert wird das mit CSS, wie folgendes Beispiel zeigt:
<html>
<head>
<style>
A { color : #0000FF; text-decoration: none }
a:hover {color: red;}
</style>
</head>
<body bgcolor="#FFFFFF">
<a href="sprungdatei">Beschriftung</a><br>
</body>
</html>

| | So sehen die Hover-Effekte aus nebenstehender Liste aus. | Wer einen anderen Hover-Effekt wünscht, muss die CSS-Definition a:hover abändern. Die folgende Liste zeigt einige Beispiele:
- Links, die dicker werden:
a:hover {font-weight: bold;}
- Links, die unterstrichen werden:
a:hover {text-decoration: underline;}
- Links, die über- und unterstrichen werden:
a:hover {text-decoration: underline;} a:hover {text-decoration: overline;}
- Oder auch 3D-Effekte:
A {
font-family: Verdana;
color : black;
text-decoration: none;
padding: 2px;
border : 0px solid white;
line-height: 25px;
}
A:hover {
color: white;
text-decoration: none;
background-color : #0099FF;
border: thin outset;
padding-right: 20px;
}
5.7.3.3.2 Unterstreichung entfernen
Unterstrichene Links kennt jeder. Innovativer dagegen sind (bzw. waren, denn etwas Neues ist die Technik nun wirklich nicht mehr) Links ohne Unterstreichung. Auch das klappt nur mit CSS:
A { color : #0000FF; text-decoration: none }
Tooltips
Wer will, dass sich beim Überfahren mit der Maus ein kleines Info-Fenster öffnet, setzt einfach Tooltips ein. Die werden zumindest vom Internet Explorer ab Version 4 angezeigt und sind ganz einfach zu definieren:
<a href="sprungdatei" title="Mehr Informationen zum Link">Beschriftung</a>

5.7.3.4 Neue Fenster öffnen
Wer eine Seite in einem neuen Fenster öffnen will, verwendet das oben erwähnte target-Attribut:
<a href="sprungdatei" target="_blank">Beschriftung</a>
Sinn kann das machen, um zu verhindern, dass Besucher abwandern, wenn man fremde Seiten linkt. Diese These jedoch ist stark umstritten: beispielsweise ist Jakob Nielsen der Meinung, dass Besucher zu Seiten zurückkehren, auf denen sie einen guten Link gefunden haben. Wir sind geneigt, uns dieser Meinung anzuschließen: vermeiden Sie also Pop-Ups, egal welcher Art.
|
|
|
5.7.4
Grafische Menü-Einträge
| | Die Seite CheatMania setzt ein grafisches Menü ein (links neben dem Text-Frame) |
5.7.4.1 Definition
Eine Variante des Textlink-Menüs ist das grafische Menü: hier wird anstelle eines Beschreibungs-Textes einfach eine Bilddatei angegeben:
<a href="sprungdatei"><img src="icon.jpg" alt="Beschreibung"></a>
5.7.4.2 Pro & Contra
Der Vorteil liegt klar auf der Hand: wer kleine Bilder anstelle von simplen Textlinks einsetzt, hat viel mehr gestalterische Freiheit. Schatten, Transparenzeffekte und Umrahmungen - alles ist möglich.
Nachteilig ist die dadurch steigende Ladezeit - wer ein normales Modem einsetzt, wird davon eventuell unangenehm berührt. Wenn Sie also grafische Menüs einsetzen, sollten Sie besonders viel Zeit auf die Optimierung der einzelnen Grafiken verwenden. Weiterhin ist es wichtig, auf jeden Fall das alt-Attribut zu setzen, um die Navigation auch für Sehbehinderte und Textbrowser-Benutzer verwendbar zu machen.
5.7.4.3 Spielarten
Es gibt viele Spielarten des grafischen Menüs: schließlich sind die Möglichkeiten für den Designer praktisch unbegrenzt. Wenn Sie selbst ein grafisches Menü erstellen wollen, aber noch keine gute Idee haben, halten Sie sich doch an Altbewährtes:
Einfach nur einen Text grafisch zu verschönern ist die am häufigsten eingesetzte Methode. Auch auf dem obigen CheatMania-Screenshot wurde das so gemacht. Schatteneffekte, Umrahmungen und exotischere Fonts sind hier oft eingesetzte Mittel.
| | Die obere Navigationsleiste von SitePoint setzt auf anschauliche Piktogramme. | Innovativer dagegen ist der Einsatz von Symbolen und Piktogrammen, wie auf nebenstehendem Screenshot gut zu sehen. Wer Piktogramme verwendet, muss wissen, dass die meisten Symbole nicht allgemein gültig sind: es gibt oft Verständnisprobleme. Es ist daher sinnvoll, immer einen beschreibenden Text zum Piktogramm hinzuzufügen, um Probleme im Vorhinein auszuschließen.
|
|
|
5.7.5
Imagemaps
5.7.5.1 Definition
Imagemaps erlauben es, bestimmte Regionen eines Bildes als anlickbaren Link zu definieren. Das erledigt jeder moderne HTML-Editor oder auch das Grafikprogramm Ihrer Wahl - solche Definitionen per Hand vorzunehmen, ist umständlich und heutzutage nicht mehr nötig.
5.7.5.2 Pro & Contra
Imagemaps verleiten einen leicht, ein komplexes Layout als Grafik abzuspeichern und dann innerhalb einer Imagemap zu verwenden. Das jedoch ist ein schwerer Fehler: die Ladezeiten steigen damit und die Site wird gleichzeitig für Benutzer von Text-Browsern inkompatibel. Versuchen Sie stattdessen, solch ein Layout in rechteckige Einzelgrafiken aufzuteilen und dann mit Tabellen wieder zusammenzusetzen. Es gibt Tools, die einem dabei behilflich sind, siehe dazu Kapitel 5.1.
Stark dagegen sind Imagemaps, wenn es darum geht, mit nicht-rechteckigen Klickflächen umzugehen: unterstützt werden Rechtecke, Kreise und beliebige Polygone. Ein typisches Einsatzgebiet ist eine "klickbare" Landkarte.
|
|
|
5.7.6
Flash/Java
5.7.6.1 Definition
Flash und Java eignen sich ebenfalls für die Erstellung einer Navigation:
| | Macromedia setzt komplett auf eine Flash-Navigation | 5.7.6.1.1 Step-by-Step
Zunächst müssen Sie sich für eine der beiden Technologien entscheiden. Dabei können Sie davon ausgehen, dass beide in etwa die gleiche Verbreitung haben. Wer jedoch auf Exoten Wert legt, sollte eher auf Java setzen, denn eine Java Virtual Machine ist für mehr Systeme verfügbar als ein Flash-Plugin. Wer Flash einsetzt, muss eher selbst gestalten, Java-Applets für Navigationsleisten dagegen gibt es an jeder Ecke zum kostenfreien Download.
Dann geht es darum, die geeignete Navigationsart ausfindig zu machen. Hier gibt es unzählige Alternativen: von anklickbaren Tickern bis hin zu Baum-Darstellungen, die dem Windows Explorer stark ähneln. Besonders letztere sind eine übersichtlich und ernstzunehmende Alternative zu herkömmlichen Verfahren.
Nun geht es darum, entweder etwas zu Ihren Anforderungen Passendes im Netz zu finden oder selbst zu programmieren, wobei die erste Alternative wohl auf jeden Fall angenehmer sein sollte. Ein guter, allgemeiner Startpunkt für Recherchen ist grundsätzlich Yahoo, speziell für Java ist zusätzlich die Seite Kaffe & Kuchen zu empfehlen.
Der letzte Schritt ist die Einbindung des Applets bzw. der Flash-Datei. Wie das genau geht, erfahren Sie in der entsprechenden ReadMe-Datei der heruntergeladenen Datei, denn das Verfahren ist je nach Technologie unterschiedlich. Wenn Sie nichts heruntergeladen, sondern selbst programmiert haben, wissen Sie wohl ohnehin schon, wie die Einbindung verläuft ;-).
5.7.6.1.2 Pro & Contra
Die Freiheiten beim Einsatz dieser Technologien gehen noch weit über simple Bilder hinaus, schließlich sind mit Flash und Java aufwändige Navigationen und interaktive Menüs möglich.
Negativ dagegen ist die darunter leidende Kompatibilität: um keine Anwender auszuschließen, sollten Sie eine auf Textlinks basierende Alternativ-Navigation anbieten. Die Leidezeiten werden ebenfalls negativ beeinflusst.
Fazit: ein Einsatz von Flash oder Java muss vorher gut überdacht werden!
|
|
|
5.7.7
Pulldown-Menüs
5.7.7.1 Definition | | Allein auf der Startseite von CNN.com sind drei verschiedene Pulldown-Menüs zu sehen, jedoch nicht als Haupt-Navigation. |
Pulldown-Menüs sind eine beliebte Methode, umfangreichere Navigationen zu realisieren. Meistens kommt bei der Auswertung der Klicks JavaScript zum Einsatz, wer einen zusätzlichen "OK"-Button akzeptiert, kann jedoch auch CGI-Scripts einsetzen. Da das aber wohl in den allermeisten Fällen nicht zur Diskussion steht, konzentrieren wir uns hier auf die JavaScript-Variante.
Tipp: Indem man das Pulldown-Menü selbst mit JavaScript ausgibt und in einen <NOSCRIPT>-Bereich eine Textlink-Navigation stellt, vermeidet man Inkompatibilitäten.
Folgendes Beispiel zeigt den kompletten Code für ein Pulldown-Menü. Getestet wurde der Code mit dem IE 5.5 (frühere Versionen sollten jedoch auch keine Probleme machen), dem Netscape 4 und dem Mozilla.
<html>
<head>
<script>
function makeMenu ()
{
// Angezeigte Einträge
var names = new Array("Link1", "Link2", "Link3");
// Zugehörige URLs
var urls = new Array("http://www.xyz.de", "http://www.xyz.de", "http://www.xyz.de");
// FORM-Tag1
var toReturn = '<form name="dyn_menu"><select name="dyn_menu" onChange="goURL();">';
// Standard-Eintrag
toReturn = toReturn + '<option value="" SELECTED>Bitte auswählen!</option>';
// Alle Einträge durchgehen und Code generieren
for (var i = 0; i < names.length; i++)
{
toReturn = toReturn + '<option value='+urls[i]+'>'+names[i]+'</option>';
}
toReturn = toReturn + '</select></form>';
return toReturn;
}
function goURL ()
{
// Aktuellen Wert des Menüs herausfinden
var selected = document.dyn_menu.dyn_menu.options.selectedIndex;
var here_value = document.dyn_menu.dyn_menu.options[selected].value;
if (here_value)
{
window.location.href = here_value;
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<script>
document.write(makeMenu());
</script>
<noscript>
<a href="http://www.xyz.de">Link 1</a><bR>
<a href="http://www.xyz.de">Link 2</a><bR>
<a href="http://www.xyz.de">Link 3</a><bR>
</noscript>
</body>
</html>

5.7.7.2 Pro & Contra
Der Vorteil eines Pulldown-Menüs ist sein geringer Platzbedarf, schließlich klappt die Liste erst dann auf, wenn der Benutzer das Menü benutzt.
Nachteilig ist, dass hier JavaScript eingesetzt wird - das verstehen nicht alle Browser. Wer dagegen auf eine CGI-Lösung ohne JavaScript setzt, muss gleichzeitig eine Submit-Button neben dem Menü akzeptieren - auch nicht optimal. Hinzu kommt, dass Pulldown-Menüs keine optimale Usability gewährleisten. Dem User fehlt anfänglich die Orientierung, weil ja erst das Menü aufgeklappt werden muss, um eine Übersicht zu erhalten. Abgesehen davon gibt es auch immer noch Surfer, die Pulldown-Menüs nicht verstehen.
Fazit: Pulldown-Menüs sollten nur sparsam eingesetzt werden.
5.7.7.3 Verschönerungen
Wer sein Menü optisch etwas aufbessern will, greift am besten auf CSS zurück. Dabei lassen die sich direkt im JavaScript angeben: Die Zeile innerhalb der For-Schleife könnte z.B. durch folgenden Code ersetzt werden:
toReturn = toReturn + '<option value='+urls[i]+' style="background:silver">'+names[i]+'</option>';
Effekt ist, dass die Hintergrundfarbe der einzelnen Menüeinträge auf Grau geändert wird. Natürlich lassen sich hier noch wesentlich phantasievollere Veränderungen realisieren - innerhalb der Grenzen von CSS sind Sie vollkommen frei.
|
|
|
5.7.8
Exoten
Wäre es nicht einmal interessant, Ihren Benutzern eine ganz neue, innovative Navigation einzusetzen? Wer diesen Wunsch hegt, dem kann geholfen werden - mit diversen Java Applets.
Dabei sind die Ansätze sehr verschieden: einige Applets zeigen sogenannten Mindmaps, die sich sogar automatisch reorganisieren. Andere dagegen verwenden anklickbare Dreh-Kuben.
Problematisch sind vor allem zwei Aspekte: viele dieser Ansätze müssen erst erklärt werden, bevor sie produktiv eingesetzt werden können. Das ist bei Navigation grundsätzlich zu vermeiden, denn die muss selbsterklärend sein. Ebenfalls störend ist der oft hohe Platzbedarf dieser Applets.
Fazit: für Fun- oder Experimental-Pages wunderbar geeignet, sollte auf den Einsatz dieser exotischen Navigationstechnologien bei "ernsthafteren" Projekten verzichtet werden.
|
|
|
5.7.9
Navigations-Management
Zum Abschluss dieses Kapitels wollen wir noch kurz auf das Thema des Navigations-Managements eingehen. Grob umrissen geht es darum, bei Aktualisierungen der Navigation möglichst wenig Arbeit zu haben.
Es gibt zwei wesentliche Faktoren, die den Arbeitsaufwand bei Veränderungen an Navigations-Elementen beeinflussen:
- Die eingesetzte Navigationstechnologie. Wenn Sie beispielsweise eine große Imagemap verwenden, steigt Ihr Arbeitsaufwand im Vergleich zum simplen Setzen eines Textlinks. Entscheidend ist hier nicht die Imagemap selbst, sondern die verwendete Grafik, die erst verändert werden muss.
- Die eingesetzten Management-Verfahren: Was wird getan, um die veränderte Navigation so schnell und einfach wie möglich auf alle Unterseiten zu bringen?
Wie die Überschrift des Abschnitts vermuten lässt, fokussieren wir hier den zweiten Punkt.
Der einfachste Ansatz zum Einbau einer Navigation ist zugleich der schlechteste: auf jede Unterseite wird einfach derselbe Code gestellt. Die sich daraus ergebenden Probleme sind massiv: wer einen Menüpunkt ändern will, muss alle Unterseiten ändern. Das ist nervig und unnötig.
Daher wollen wir Ihnen einige Wege zeigen, dieses Problem anzugehen. Prinzipiell geht es dabei immer darum, die Navigation nur an einem Ort zu speichern, um auch nur eine Datei aktualisieren zu müssen.
5.7.9.1 SSI
Server Side Includes sind eine gute Lösung für das Problem: mit dem include-Befehl binden Sie einfach eine Datei ein, die die gesamte Navigation enthält. Wie das genau geht, steht im Kapitel SSI unter "Einfügen einer Datei".
5.7.9.2 Frames
Wem keine Server Side Includes zur Verfügung stehen, kann Frames verwenden. Ein Frame enthält dabei die Navigation, der andere die Inhalte der jeweiligen Unterseiten. Funktioniert gut, setzt aber einen Browser voraus, der Frames unterstützt, was derzeit bei deutlich mehr als 90% der Surfer der Fall sein dürfte. Mehr ins Gewicht fällt dagegen, dass es einige Argumente gibt, die gegen Frames sprechen. Mehr dazu im Kapitel Frames.
5.7.9.3 JavaScript
Etwas ausgefallener ist diese Idee: in der Definition von script-Tags können Sie eine Quelldatei angeben. Definieren Sie in dieser Datei eine Funktion, die den Code für Ihre Navigation zurückgibt. Binden Sie die Datei ein und setzen Sie dort, wo die Navigation stehen soll, einen weiteren script-Abschnitt ein, in dem die Funktion aufgerufen und ihr Rückgabewert ausgegeben wird.
5.7.9.4 Lokale Ansätze
Die bisherigen Lösungen bezogen sich alle entweder auf den Server- oder den Client-Computer. In eine ganz andere Richtung geht der Versuch, das Einsetzen der Navigations-Datei in alle Unterseiten auf dem Rechner der Webdesigners zu erledigen. Schwierig ist das nicht: jedes bessere Webdesign-Programm enthält entsprechende Funktionen. Vorteil: diese Lösung ist absolut kompatibel und belastet den Server nicht. Lediglich die Upload-Zeiten der entsprechenden Dateien steigt, was aber in Zeiten der Breitband-Internetzugänge immer unproblematischer werden dürfte.
|
|
|
|