Gestaltung von Navigationselementen

[fwolf]

Nachdem ich hier (in diesem Forum) stellenweise Sachen gelesen habe, die IMHO sehr nach anno 1997 klingen, wollte ich einfach mal kurz mit Fachwissen "rumprollen" bzw. ein paar Denkanstöße geben:

1. Listen als Navigationselemente nutzen - auf A List Apart gibt es dazu einen sehr guten Artikel, der die Grundlage für diese Technik bildet. Weiterhin bietet Listamatic eine gute Auswahl an Beispielen, die man für eigene Zwecke anpassen kann - inkl. einer Browser-Kompatiblitäts-Tabelle ("Browser support chart").

Ich selbst verwende Listen zur Navigation inzwischen in fast allen von meinen Projekten.

2. Image Maps mittels CSS: Suchmaschinen sowie Textbrowser als auch Screenreader können mit klassichen Image Maps herzlich wenig anfangen - in "Night of the Image Map" wird eine Technik erläutert, mit der man Image Maps standardkonform mittels CSS nachbilden kann. Eine sehr einfache, aber effiziente Technik, wie ich finde

Vorteile u.a.:

- nur mittels CSS ließe sich z.B. mit einem Styleswitcher ein vollkommen anderes Layout anzeigen, in welchem keine Image Map mehr vorhanden ist, sondern sämtliche Links etwa ein einer klassischen Navigation (d.h. linke Seite Navi, rechte Seite Inhalt) zu sehen sind.

- standardkonformer (WAI / W3C-Standards)

- leichter zu pflegen dank Trennung von Code + Design

- Google Bot parst endlich auch die Unterseiten ;-)

3. Schnellere Rollover-Images: Petr Staníček beschreibt in seinem Artikel "Fast Rollovers Without Preload" eine einfache, aber effiziente Methode, wie man bedeutend schnellere Rollover-Effekte erzielen kann. Dabei wird das Bild nicht - wie gehabt - ausgetauscht, sondern mittels CSS-Code verschoben. Um dies zu erreichen, werden sämtliche Zustände des Buttons in [strong]einer[/strong] Grafik gespeichert. Laut seinen Aussagen ist das Verschieben des Bildes bzw. des Hintergrundes bedeutend schneller als das Auswechseln (trotz Bild-Preload via JavaScript).

Die Punkte 1-3 kombiniert sieht man auch in meiner Designstudie für meine alte Firmendomain ;-)

cu, w0lf.

[geloescht_JesterDay]

Der Ansatz auf deiner Seite gefällt mir, vorallem das Menü.

Aber: Mit abgeschalteter Grafik ist davon nichts mehr übrig, trotz emphasised Linktexten. Also nur die Links und die Title beim drüberfahren, sehen tut man nix, auch nicht beim markieren des "Inhalts" (ist ja keiner da, im Menu).

Ist das ein Fehler, Absicht oder liegt es an mir (FF 1.5.0.1)?

[etreu]

Ich kann auch kein Menü sehen, wenn ich die Grafiken abschalte. Wenn ich allerdings den Textmodus nehme, sind sie logischerweise da.

(Opera 8.52 unter Linux)

[tobias-digital]

@fwolf: Perlen vor die Säue! Die Sachen, von denen Du schreibts (... anno 1979 ...) werden meistens von Leuten verfasst, die weder von modernen noch von von alten HTML-Techniken soviel Ahnung haben wie ich von Autos (also keine). Von CSS und XHTML ganz zu schweigen.

Diese Leute interessiert meistens nur, wie sie überhaupt "anfangen" können und haben meistens schon irgendwas in HTML verfasst. Bei konkreten Fragestellungen gebe ich meistens Beispiel-Markup an die Hand und ansonsten den Hinweis, sich doch erstmal mit den Grundlagen befassen. Mit den von Dir hier geposteten Links wissen wahrscheinlich 95% hier nichts anzufangen und werden sie auch nicht lesen. Auf jeden Fall ist das meine Erfahruung, wenn ich diese Links poste.

Grüße, Tobias