Responsive C.A.T.S. #2/ TABS
In Teil II. der C.A.T.S.- Reihe dreht sich heute alles um die Tab-Container …
Fangen wir mal mit einem eher abstrakten Beispiel an und betrachten Kartons, Koffer oder Kisten jeglicher Art. Solche “Container” können schon ziemlich praktisch sein. Man kann jeglichen Inhalt und die verschiedensten Elemente ganz platzsparend in ihnen verstecken. Und sollten sie geschlossen sein, sehen wir auch keinen “unerwünschten” Inhalt. Wenn wir den Inhalt sehen wollen, können wir ihn ganz einfach öffnen. So in etwa können wir uns die Funktionsweise von Tabs im Webdesign vorstellen. Daraus lässt sich schließen: Tabs eignen sich hervorragend, um ganz viel Inhalt platzsparend auf einer Website zu verstecken. Da Websites heutzutage immer länger werden, und dies besonders mobil zu Scroll-Frust bei Usern führen kann, schauen wir uns die Tabs jetzt mal genauer an..
KURZ UND KNAPP ERKLÄRT
Also kurz erklärt: Tab-Container im Webdesign sind eine beliebte Wahl, ganz besonders wenn es um Beschreibungstexte auf e-Commerce Seiten geht. So lassen sich beispielsweise mehrere verschiedene Tabs horizontal oder auch vertikal auf einer Website platzieren. Mit Klick auf einen der gewünschten Tabs, wird dem User der entsprechende Inhalt angezeigt. Alle weiteren Inhalte der anderen Tabs werden dabei auf der Website „versteckt“. Daher wird dieses Modul z.B. gerne auf Produktdetailseiten im e-Commerce Bereich verwendet, um sicherzustellen, dass diese Seite mobil nicht zu lang wird. Es spricht jedoch nichts dagegen Tabs auch in anderen Bereichen einer Website einzusetzen. Immer wenn es darum geht, lange textlastige Inhalte abzubilden, sind Tabs eine gute Wahl. Und natürlich, wie sollte es anders sein – Tabs lassen sich auf verschiedene Art und Weisen animieren. Der Kreativität von Designern und Entwicklern sind keine Grenzen gesetzt.
Mehr Vor- als Nachteile
Der Tab Container kann unterschiedlichste Inhalte „nebeneinander“ zeigen und per Interaktion verfügbar machen, ist für mobile aber schwierig.
Ganz klar von Vorteil: Inhalt kann auf kompakte Art und Weise dargestellt werden. Mobil lassen sich Tabs zwar eher nicht nebeneinander abbilden, allerdings besteht dann die Möglichkeit, diese vertikal darzustellen. Also im Grunde werden Tabs mobil meist zum Collapsible oder Akkordeon. So kann sichergestellt werden, dass der Text auch mobil kompakt bleibt. Ein weiterer Vorteil: Sollte der Inhalt nicht erst dynamisch nachgeladen werden, ist der versteckte Content im Normalfall auch für Suchmaschinen sichtbar. Also nebenbei auch gut zwecks SEO…;)
Neugierig was sich hinter dem letzten Buchstaben versteckt? Im nächsten C.A.T.S. Post geht’s weiter!
Oder schau dir die komplette Blog Reihe an:
Erster Teil der C.A.T.S. Reihe / Collapsible versus Akkordeon
About Post Author
