{"id":381,"date":"2019-06-28T14:58:16","date_gmt":"2019-06-28T12:58:16","guid":{"rendered":"https:\/\/www.logic-joe.com\/blog\/?p=381"},"modified":"2019-06-28T14:58:16","modified_gmt":"2019-06-28T12:58:16","slug":"responsive-c-a-t-s-2-tabs","status":"publish","type":"post","link":"https:\/\/www.logic-joe.com\/blog\/responsive-c-a-t-s-2-tabs\/","title":{"rendered":"Responsive C.A.T.S. #2: TABS"},"content":{"rendered":"

Fangen wir mal mit einem eher abstrakten Beispiel an und betrachten Kartons, Koffer oder Kisten jeglicher Art. Solche \u201cContainer\u201d k\u00f6nnen 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 \u201cunerw\u00fcnschten\u201d Inhalt. Wenn wir den Inhalt sehen wollen, k\u00f6nnen wir ihn ganz einfach \u00f6ffnen. So in etwa k\u00f6nnen wir uns die Funktionsweise von Tabs im Webdesign vorstellen. Daraus l\u00e4sst sich schlie\u00dfen: Tabs eignen sich hervorragend, um ganz viel Inhalt platzspare<\/span>nd auf einer Website zu verstecken. Da Websites heutzutage immer l\u00e4nger werden, und dies besonders mobil zu Scroll-Frust bei Usern f\u00fchren kann, schauen wir uns die Tabs jetzt mal genauer an..<\/span><\/p>\n

KURZ UND KNAPP ERKL\u00c4RT<\/h2>\n

Also kurz erkl\u00e4rt: 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\u00fcnschten Tabs, wird dem User der entsprechende Inhalt angezeigt. Alle weiteren Inhalte der anderen Tabs werden dabei auf der Website \u201eversteckt\u201c. 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 <\/span>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\u00fcrlich, wie sollte es anders sein – Tabs lassen sich auf verschiedene Art und Weisen animieren. Der Kreativit\u00e4t von Designern und Entwicklern sind keine Grenzen gesetzt.
\n<\/span><\/p>\n

Mehr Vor- als Nachteile<\/b><\/h2>\n
\"\"

Der Tab Container kann unterschiedlichste Inhalte „nebeneinander“ zeigen und per Interaktion verf\u00fcgbar machen, ist f\u00fcr mobile aber schwierig.<\/p><\/div>\n

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\u00f6glichkeit, 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\u00fcr Suchmaschinen sichtbar. Also nebenbei auch gut zwecks SEO\u2026;)<\/span><\/p>\n

 <\/p>\n

Neugierig was sich hinter dem letzten Buchstaben versteckt? Im n\u00e4chsten C.A.T.S. Post geht’s weiter!<\/span><\/p>\n

Oder schau dir die komplette Blog Reihe an:<\/p>\n

Erster Teil der C.A.T.S. Reihe \/ Collapsible versus Akkordeon<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In Teil II. der C.A.T.S.- Reihe dreht sich heute alles um die Tab-Container \u2026 <\/p>\n","protected":false},"author":5,"featured_media":522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/381"}],"collection":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/comments?post=381"}],"version-history":[{"count":18,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/381\/revisions"}],"predecessor-version":[{"id":567,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/381\/revisions\/567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media\/522"}],"wp:attachment":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media?parent=381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/categories?post=381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/tags?post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}