Usability und Content Strategien: Eine Tabelle im Responsive Web Design

von Henry Zeitler

Die wichtigste Komponente einer Internetseite ist ihr Inhalt. Guter Content sorgt für glückliche und wiederkehrende Besucher und letztlich für ein besseres Ranking bei den Suchmaschinen. Doch gute Inhalte müssen auch optimal präsentiert werden, gerade auf mobilen Geräten. HTML-Tabellen benötigen dafür eine spezielle Strategie.

Bei größeren, mehrspaltigen Tabellen reicht meistens der zur Verfügung stehende Platz im Viewport eines Smartphones nicht mehr aus. Die Tabellenzellen müssen neu angeordnet werden um den Inhalt lesbar darstellen zu können. Dabei darf aber die Sortierung nicht durcheinander geraten. Als Lösung habe ich mir vor einiger Zeit ein jQuery-Plugin geschrieben, das ich in viele meiner Web-Projekte implementiere.

Von der Tabelle zum Accordion

Als Grundvoraussetzung sollte im Quellcode für die ursprüngliche Tabelle kein zusätzliches Markup benötigt werden, damit auch alle generierten Tabellen (z.B. aus einem CMS kommend) genutzt werden können und alles valide bleibt. In diesem Beispiel werden erst später via JavaScript bzw. jQuery ein paar Helfer-Elemente hinzugefügt.

Von der Tabelle zum Accordion

Um dem Content genügend Platz zu bieten können die Tabellenzellen untereinander angeordnet werden, als Accordion. Um trotzdem die Zuordnung der Headlines der einzelnen Spalten zu den Inhalten beizubehalten, müssen die Headlines in die entsprechenden Tabellenzellen verpflanzt werden. Das geschieht mit jQuery.
Die Tabellenzeilen (tr) selbst werden dann über CSS zu Blockelementen transformiert, deren Inhalte mit max-width und overflow: hidden; versteckt und sie bekommen eine expand/collapse-Funktion via jQuery.

Das fertige Beispiel sieht so aus. Den Breakpoint am besten direkt auf jsFiddle testen.

 

Technische Content Strategien

Die Tabelle ist nur ein Element unter vielen, welches in den Zeiten der Optimierung für mobile Geräte eine besondere Beachtung verdient. Die guten Inhalte verlieren ihre Wirkung, wenn sie der Besucher nicht richtig erfassen kann, egal auf welchem Gerät er die Seite aufruft. Deswegen ist eine gute Strategie für die Usability enorm wichtig.
Ich denke weiterhin, dass der Mehraufwand für die Erstellung eines solchen Snippets durchaus überschaubar ist und in vielen Fällen kann auf herkömmliche Plugins und Libraries zu Gunsten der Performance und Wartbarkeit durchaus verzichtet werden.

comments powered by Disqus