Artikel
Sonnenseiten: Navigationskonzepte
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.
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.
Zum Autor
Fabian Tempel arbeitet als Frontend Developer bei Bild digital GmbH & Co. KG in Berlin. Er ist Fan des CSS-Frameworks YAML, Befürworter von Progressive Enhancement.
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.
- Info:
- Sonnenseiten: Navigationskonzepte ist Beitrag Nr. 777
- Autor:
- Fabian Tempel am 17. Juni 2010 um 08:00
- Kategorie:
- Sonnenseiten
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.
Schade nur das sich die Seite von Crush + Lovely nicht mithilfe der Tab-Taste bedienen lässt
Kommentar by Jumpingpixel - 17. Juni 2010 um 14:21
Bedienbar ist die Seite mittels Tab schon. Allerdings fehlen leider die dazugehörigen :focus Styles.
Kommentar by Fabian Tempel - 17. Juni 2010 um 14:47
Schönes Design und netter Effekt. Die Suchmaschinenoptimierung dürfte allerdings etwas schwierig werden.
Kommentar by Ingo - 17. Juni 2010 um 16:42
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.
Kommentar by Fritz Weisshart - 17. Juni 2010 um 20:18
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?
Kommentar by Ole - 21. Juni 2010 um 07:32