Tabbed Interfaces auf Webseiten

1243409127|%d.%m.%Y

Webseiten-Inhalte werden am Bildschirm präsentiert (Internetaudrucker ausgenommen ;-). Damit gehören sie in den Bereich Screendesign. Zum Webdesign gehören deshalb auch Überlegungen, wie man längere Inhalte bildschirmgerecht aufbereitet. Eine simulierte Endlospapierrolle ist jedenfalls nicht immer die beste Lösung. Gerade bei stark strukturierten Inhalten ist es oftmals besser, diese in einem sogenannten tabbed interface zu präsentieren.

Das ist eigentlich nichts Neues und im Bereich von Desktop-Anwendungen seit vielen Jahren Standard. Es ist auch kein Zufall, dass sich das tabbed Document Interface im gesamten Software-Bereich als sehr erfolgreich erwiesen hat. Bestes Beispiel sind die Web-Browser. Ein Browser, der nicht tab-basiert arbeitet, wird heute praktisch nicht mehr ernstgenommen.

Da sich Webseiten immer stärker an den interaktiven Modellen von Desktop-Anwendungen orientieren, wird allmählich auch ein erhöhter Bedarf an Lösungen für tabbed Interfaces innerhalb von Webseiten entstehen. Es gibt auch längst prominente Beispiele:

  • Facebook arbeitet bei Profilansichten mit Tabs wie Pinnwand, Info, Notizen, Discussions usw.
  • Google PicasaWeb (Google-Account vorausgesetzt) verwendet ein tabbed Interface als Auswahl auf oberster Ebene.
  • Web.de bietet auf seiner Startseite gleich mehrere tabbed Interfaces an — unauffällig, aber effizient.
facebook-tabs.jpg
Tabs bei Facebook

Dass solche tabbed Interfaces nicht schon längst viel häufiger im Web anzutreffen sind, liegt zum einen daran, dass sie als Webdesign-Stilmittel noch zu wenig beachtet werden, und zum anderen daran, dass tabbed Interfaces nicht ganz trivial in der Realisierung sind. Es gibt jedoch eine Menge fertiger Lösungen, die sich mehr oder weniger einfach in bestehende Website-Umgebungen integrieren lassen. Hier Links zu einigen Lösungen dieser Art:

  • Tabtastic: Semantisch sinnvolles HTML-Markup, eine CSS- und vier JavaScript-Dateien einbinden, fertig ist der eigene Inhalte-Tabber. Alles ordentlich dokumentiert und einfach integrierbar.
  • DynamicDrive Tab Content Script: Semantisch sinnvolles HTML-Markup, eine CSS- und eine JavaScript-Datei. Tabs können sogar via GET-Parameter in der URL-Adresse direkt angezeigt werden.
  • Tab-Interface ohne JavaScript: Wie der Titel schon sagt, kommt diese Lösung allein mit HTML und CSS aus. Nur geeignet für Inhalte, die mit einer einheitlichen Höhe des Inhalts auskommen.
  • CSS: a tabbed interface (W3C): Tabbed Interface ohne JavaScript, allein mit HTML und CSS, als Anwendungsbeispiel für CSS auf den Seiten des W3-Konsortiums.
  • Tabbed Interface mit JQuery: Wer ohnehin mit der beliebten JavaScript-Bibliothek JQuery arbeitet, ist mit dieser Lösung möglicherweise am besten beraten.
  • Yahoo! UI Library: TabView: vergleichsweise aufwändiges Script, da es in die Yahoo Script-Library eingebunden ist. Sinnvoll, wenn man ohnehin mit dieser Library arbeitet.

Diese Liste ist nur eine Auswahl. Eine weitere Suche und das Austesten mehrerer Lösungen empfiehlt sich durchaus, bevor man sich als Anbieter für eine entscheidet.Häufig spielen auch Aspekte wie die problemlose Integrierbarkeit in CMS-Umgebungen eine Rolle bei dieser Entscheidung. Auch Aspekte wie die Adressierbarkeit einzelner Tab-Inhalte via GET-Parameter könnte ein wichtige Entscheidungskriterium sein.

Kommentare

Neuen Kommentar hinzufügen
oder Anmelden als Wikidot User
(wird nicht veröffentlicht)
- +
Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License