Eines der größten Probleme die man als Webdesigner heutzutage hat, ist es Inhalte für die Vielzahl an verschiedenen Displays anzupassen. Natürlich kann man responsive Designs entwickeln, die sich an unterschiedliche Anzeigen anpassen oder man kann andere Wege einschlagen und separate Seiten und Apps für Mobilgeräte schreiben. Aber das Problem bleibt bestehen – was macht man mit all dem Inhalt.

Bedenkt man Apples Smartwatch und andere sog. wearables, ist der mobile-first Ansatz momentan die vielseitigste Option für Webdesigner aus Jena. Aber das hilft einem auch nicht weiter wenn man ein gutes Webdesign für massenweise Text und Bild braucht. Deswegen steht man immer wieder vor der Frage: Wie bringe ich viel Inhalt auf begrenztem Raum unter? Leider gibt es keine einfache Antwort auf diese Frage aber heute möchte ich über eine simple Möglichkeit schreiben, die von vielen Webdesignern gerne übersehen wird.

Inhalte in Tabs organisieren

Sie werden Tabs bereits aus vielen Seiten kennen. Sie kommen besonders häufig auf eCommerce Seiten für Produktbescheibungen und Spezifikationen vor.

sony-tabs-2

Immer wenn der Platz eng wird, kann man getrost auf Tabs zurückgreifen. Oben ist ein Beispiel von einer Sony Seite. Natürlich ist es nicht immer die schönste Variante aber man arbeitet ja auch mit Limitationen.

Tabs funktionieren auch im mobil-first Ansatz. Pixel Palace hat vertikal organisierte Tabs, um die Breite nicht zu sprengen.

cbd-tabs2

Es ist eine simple Implementation und wird sicher nicht der Hingucker des Designs aber es löst das Problem und ist ein intuitiver Weg mehr Inhalt auf kleinen Bildschirmen zu präsentieren.

Man muss sich auch nicht auf eCommerce Seiten beschränken. Ein wenig aufgehübscht gibt es keine Grund Tabs nicht auch auf Dienstleister-Seiten oder Business-Websites einzusetzen, um textlastige Teile des Deisgns zu gestalten.

Warum Tabs sich so gut im Responsive Design machen

Langes Scrollen und parallax Effekte sind gerade voll im Trend aber Nutzer wissen nie was als nächstes kommt. Wenn man übersichtlich arbeiten möchte und die Inhalte strukturiert und zugänglich präsentieren möchte, sind Tabs einfach nicht aus dem Design wegzudenken. Ein weiterer Grund: wenn man nichts dynamisch lädt, ist alles für die Suchmaschine sichtbar und der SEO aus Jena freut sich

Der Nachteil von Tabs

Der Nachteil an Tabs besteht darin, dass man an JavaScript, jQuery oder irgendeiner anderen Bibliothek einfach nicht vorbei kommt. Natürlich, macht das keinen Unterschied zum parallax-Scrollen, media queries oder vielen anderen Features aus modernem Webdesign.

Nach einer kurzen Google-Suche stößt man auf  Chris Coyier’s solution to CSS3-only tabs bei CSS Tricks. Leider geht es hier mehr darum die Möglichkeiten von CSS3 zu erforschen und weniger darum eine funktionieren Lösung zu finden, die ohne JS auskommt. Leider ist das Resultat nicht zufriedenstellend und kommt nur mit starken UX Problemen aus. Keine Löung für richtige Webdesigns.

Tabs für WordPress

Wenn man eine Tab-Lösung für WordPress braucht, gibt es eine breite Auswahl und man findet viele Themes in denen Tabs bereits eingebaut sind oder zumindest die Option bieten.

Die andere Möglichkeit sind natürlich plug ins und – man wird es schon vermuten – es gibt sehr viele davon. Welches genau das beste tab plug in ist, hängt natürlich immer von den genauen Anforderungen ab aber es lohnt sich die Auswahl mal genauer unter die Lupe zu nehmen. Eine davon sollen hier erwähnt werden.

Easy Responsive Tabs

easy-responsive-tabs

 

Das Easy Responsive Tabs plugin tut genau das was der Name sagt. Responsive Tabs – super leicht. Ein Klick auf das Icon im Texteditor ist alles was zu tun ist.

Tabby Responsive Tabs

tabby

Tabby Responsive Tabs verwandelt horizontale tabs automatisch in verticale, je nach Bildschirmbreite. Es ist kostenlos aber bietet eine Premium Version mit zusätzlichen Features.

WordPress Post Tabs

wordpress-post-tabs

WordPress Post Tabs ist eine weitere freiverfügbare Option, welche mit drei verschiedenen Stilen und einer Reihe von Modifizierungsmöglichkeiten kommt. Wieder gibt es eine Premium Version mit mehr Stilen und Funktionen.