Tabellen im Responsive Webdesign

tabellen-responsive-design

Wer schon einmal eine Website mit tabellarischen Inhalten für mobile Endgeräte optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Ich spreche hier natürlich nicht von Tabellen die für das Layout missbraucht wurden (es dürfte klar sein, dass Tabellen NIE im Layout verwendet werden) sondern von Inhalten die in Form eine Tabelle abgebildet werden sollen. Solche Tabellen eignen sich nicht gut für die Darstellung auf einem kleinen Bildschirm und werden recht schnell unübersichtlich.
Ich möchte euch in diesem Beitrag verschiedene Lösungsansätze für Tabellen im Responsive Design vorstellen und die jeweiligen Vor- und Nachteile aufzeigen.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Kompromisse sind gefragt

Tabellen werden in der Regel dazu verwendet umfangreiche Datenmengen übersichtlich abzubilden. Dazu wird Platz benötigt und auch die Schriften müssen eine lesbare Größe beibehalten.

Im Responsive Design werden immer identische Inhalte visuell für verschiedene Displaygrößen optimiert. Eine große Tabelle passt aber nicht auf das Display eines Smartphones, es sei denn die Schriftgröße wird bis zur Unleserlichkeit verkleinert. Eine Tabelle verliert daher auf einem Smartphone fast immer an Übersichtlichkeit oder Lesbarkeit. Unser Ziel ist es die Inhalte der Tabelle bestmöglich darzustellen.

Welche der folgenden Lösung dabei zum Einsatz kommt und am geeignetsten ist hängt vor allem von den abgebildeten Informationen ab.

Möglichkeit 1: Tabellen zoomen

Smartphones und Tablets verfügen von Haus aus über eine Zoomfunktion. Grundsätzlich besteht daher die Möglichkeit eine große Tabelle herausgezoomt abzubilden. Der Besucher kann anschließend die Tabelle selbst auf die gewünschte Darstellung vergrößern und in der Tabelle scrollen.
Diese Variante halte ich für sehr benutzerunfreundlich. Zum einen geht die Übersicht in einer zumutbaren Schriftgröße völlig verloren, zum anderen ist es lästig sich über den Zoom in der Tabelle zu bewegen.

Gezoomte Tabellen im responsive Design
Gezoomte Tabelle auf dem Smartphone. Beide Ansichten sind benutzerunfreundlich.

Möglichkeit 2: Überflüssige Inhalte ausblenden

Über CSS3 Media Queries können auch Inhalte ausgeblendet werden (display:none; / visibility:hidden;). Es ist also möglich weniger wichtige Tabellenzeilen oder –spalten mit einer entsprechenden Klasse auszuzeichnen und dann auf dem kleinen Bildschirm zu verstecken. Hierbei wird allerdings zusätzliches, überfüssiges Markup erzeugt.
Alternativ können die Tabellenzellen auch über den CSS-Selektor :nth-child mathematisch identifiziert und ausgeblendet werden.

Inhalte werden im responsive Design aus der Tabelle ausgeblendet
Tabellenzellen können versteckt werden sobald zu wenig Platz zur Verfügung steht.

Eine einfache Erklärung zum Thema :nth-child findet ihr hier, die gesamte Technik im Bezug auf responsive Design wird ausführlich auf irishstu.com beschrieben.

Möglichkeit 3: Tabellen drehen oder umstrukturieren

Tabellen werden meist horizontal angelegt, da diese Art der Darstellung angenehmer zu lesen und übersichtlicher ist. Auf mobilen Endgeräten dominiert jedoch häufig das Hochformat.
Über CSS oder JavaScript können Tabellen auch vollständig umstrukturiert bzw. gedreht werden. Aus einer horizontalen Darstellung wird somit eine vertikale Darstellung mit untereinander abgebildeten Zellen. Auf CSS-Tricks und auf DBUSHELL werden zwei unterschiedliche Techniken vorgestellt.

Tabellen im responsive Design drehen oder umstrukturieren
Tabellen können auch wie in diesem Beispiel gedreht werden.
Technik 1 von DBUSHELL
Demo: dbushell.com/demos/tables/rt_05-01-12.html
Erklärung: dbushell.com/2012/01/05/responsive-tables-2/
Technik 2 von CSS-Tricks
Demo: css-tricks.com/examples/ResponsiveTables/responsive.php
Erklärung: css-tricks.com/responsive-data-tables/

Möglichkeit 4: Scrollende Tabellen mit fester 1. Spalte

Die Entwickler von Zurb haben ein Framework für Responsive Tables veröffentlicht (Vielen Dank an Isabell für den Link-Tipp) mit dem Tabellen per JavaScript und CSS für kleine Bildschirme optimiert werden können. Das Script lässt sich sehr einfach integrieren und passt die Darstellung der Tabelle über den z-index an. Die erste Spalte der Tabelle wird auf eine eigene Ebene ausgelagert und fest positioniert. Die anderen Tabelleninhalte können horizontal unter dieser Ebene gescrolled werden.

Responsive Tables
Responsive Tables mit fester 1. Spalte und scrollendem Tabellen-Körper.

Durch diese Technik ist sichergestellt, dass die erste, wichtige Spalte immer sichtbar bleibt. Gleichzeitig können alle Inhalte der Tabelle sehr benutzerfreundlich angezeigt und mit Spalte 1 verglichen werden.

Möglichkeit 5: Tabellen per JavaScript umstrukturieren

Mit dem jQuery-Plugin "FooTable" können Tabellen für die mobile Ansicht vollständig umgestellt werden. Mit Hilfe des Data-Attributes von HTML5 werden bestimmte Zellen markiert, den Rest übernimmt das Script. Eine Live-Demo könnt ihr euch hier anschauen.

Drei Ansichten der mit FooTable umstrukturierten Demo-Tabelle
Drei Ansichten der mit FooTable umstrukturierten Demo-Tabelle

Fazit

Es gibt mittlerweile einige sehr brauchbare Ansätze und Lösungen für Tabellen im responsive Webdesign. Insbesondere das Script Responsive Tables und die Möglichkeit Tabellen umzustrukturieren gefallen mir persönlich sehr gut.

Wichtig ist, dass man sich gut überlegt welche Lösung sich für die jeweilige Tabelle am ehesten anbietet. Eine Drehung der Tabelle macht beispielsweise eher bei Tabellen mit starker horizontaler Ausrichtung Sinn. Die erste Spalte zu fixieren ist nur dann sinnvoll, wenn hier die für einen Vergleich relevanten Informationen abgebildet werden etc.

Nachteilig ist, dass nahezu alle Lösungen Inkompatibiltätsprobleme mit älteren Browsern oder dem Internet Explorer haben. Da die angepasste Darstellung allerdings meist auf einem mobilen Endgerät angeschaut wird, auf dem normalerweise auch ein moderner Browser installiert ist, halte ich diesen Punkt für nicht sehr problematisch.

Welche Lösung gefällt euch am besten? Kennt ihr vielleicht noch weitere Scripte oder Techniken? Dann freue ich mich über eure Kommentare.

Die besten Scripte für responsive Tables

Eine stets aktuelle Liste der brauchbarsten Scripte findet ihr auf Best Webdesign Tools.

Links zum Thema / Quellen: