Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Navigationskonzepte

Sonnenseiten: Navigationskonzepte

Tastaturbedienungen für Webseiten zu ermöglichen, sollte heute selbstverständlich sein. Dass wir diese Navigationskonzepte nicht nur dazu nutzen können, um die Zugänglichkeit einer Seite zu verbessern, sondern sie auch geschickt mit dem Design verknüpfen können, demonstriert Fabian Tempel mit der heutigen Sonnenseite.

Bei der Agenturwebseite von Crush + Lovely aus den Vereinigten Staaten wurde eine geschickte Kombination aus Design und Bedienung der Seite gefunden, um diese sowohl mit der Maus, wie auch zusätzlich mit den Pfeiltasten scrollen zu können.

Start-Screen von crushlovely.com

Die zentralen Elemente wie Hauptmenü und das Firmenlogo bleiben statisch an der linken Seite stehen, wobei die Inhalte zu den aktiven Menüpunkten »darunter« gescrollt werden. Dabei wird jeder Inhaltsblock mit einem eigenen detailverliebten Design klar von den anderen Inhalten abgegrenzt. Mit den Pfeiltasten Links und Rechts können Besucher auf einfache Art und Weise der gesamte Inhalt der Seite entdecken. Die Bedienung mit der Maus kann sich somit auf weitere klickbare Inhalte fokussieren.

Erzielt wird dieser Effekt mit Hilfe von ID-Attributen auf den Menüpunkten sowie auf den dazugehörigen Inhaltsblöcken. Die Javascript-Bibliothek jQuery sowie das Plugin ScrollTo von Ariel Flesler ermöglichen das weiche Scrollen zu den spezifischen Stellen im Quelltext.

Eine ähnliche Art der Tastaturbedienung findet sich auch auf der Webseite von Pictorymag wieder. Auch hier können die einzelnen Elemente in den Seiten mittels Pfeiltasten gescrollt werden, so dass jeder Abschnitt die Aufmerksamkeit des Nutzers erhält.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Jumpingpixel
am 17.06.2010 - 14:21

Schade nur das sich die Seite von Crush + Lovely nicht mithilfe der Tab-Taste bedienen lässt

Permanenter Link

Fabian Tempel
am 17.06.2010 - 14:47

Bedienbar ist die Seite mittels Tab schon. Allerdings fehlen leider die dazugehörigen :focus Styles.

Permanenter Link

Ingo
am 17.06.2010 - 16:42

Schönes Design und netter Effekt. Die Suchmaschinenoptimierung dürfte allerdings etwas schwierig werden.

Permanenter Link

Fritz Weisshart
am 17.06.2010 - 20:18

Hm? Selten war ich so gespalten bei meinem Urteil.

Kein Zweifel: Optisch ist die Site ein Juwel. Und natürlich macht es Spaß zu beobachten, wie die Cursortasten links und rechts ganz ungewöhnliche und unerwartete Aktionen auslösen. Aber genau an diesem Punkt zucke ich: Wenn es in Mode kommt, beliebige Tasten umzubiegen, noch dazu für die wichtigste Funktion einer Site, die Navigation, dann wird Surfen im Web zwar abwechslungsreich, aber möglicherweise auch zum Such- und Verwirrspiel.
Es kann nicht die Zukunft sein, wenn ich auf einer neuen Seite erst einmal nach einer dezent angebrachten "Gebrauchsanweisung" suchen muss. ("use to navigate")
Klar, auch herkömmlich mit der Tab-Taste könnte man navigieren (wenn der :focus noch kenntlich gemacht würde).

Großes Aber:
Benutzer von Screen Readern dürften die Site als einen einzigen Textbrei empfinden. Die "Navigation" ist jedenfalls mit Screen Readern nicht bedienbar. Es gibt Sprunglinks, aber ein Klick auf diese Sprunglinks bewirkt nichts. Der Fokus bleibt in der Navigation.
Eine Alternative für Screen Reader Nutzer wäre eine logische Struktur der Seite.
Aber einmal <h1> und 27mal <h2> sowie 34mal <h3> auf einer einzigen Seite dürften auch nicht hilfreich sein.

Fazit: Hübsch, verblüffend, macht Spaß beim ersten Mal. Aber bitte nicht nachmachen.

Permanenter Link

Ole
am 21.06.2010 - 07:32

Schön wäre es auch gewesen, wenn man eine "history" Funktionalität implementiert hätte um den Browser Back Button zu unterstützen, z.B. via des wirklich sehr guten jQuery Address Plugins. Somit wäre auch eine Deep-Lnking Funktionalität unterstützt worden.

Ansonsten finde ich es auch verwirrend, daß mit den L/R Pfeiltasten nach oben und unten navigiert wird...?? Warum wurden da nicht die T/B Tasten belegt?

Permanenter Link

Die Kommentare sind geschlossen.