Zum Inhalt springen

Gestaltung von Navigationselementen


fwolf

Empfohlene Beiträge

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

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)?

Link zu diesem Kommentar
Auf anderen Seiten teilen

@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

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...