Mobil und übersichtlich: So designst du Tabellen für liquid-responsive

10. Dezember 2015 von Sebastian Maier

Wie Tabellen auf allen Bildschirmen und Endgeräten gleichermaßen gut lesbar angezeigt werden können

Auch im Webdesign bieten Tabellen die einfachste Möglichkeit, komplizierte oder umfangreiche Inhalte übersichtlich dazustellen. Vor allem in Kombination mit Filterfunktionen lässt sich die Findung von Informationen mit Tabellen sehr stark vereinfachen. Ob Eventankündigungen, Immobilienbeschreibungen oder Produktvarianten – sinnvolle Einsatzmöglichkeiten sind im Prinzip grenzenlos.

Für den Designer sind Tabellen jedoch bereits bei Desktop eine Herausforderung. Zum einen muss man sich um Übersichtlichkeit bemühen, zum anderen sollte man drauf achten, dass die wichtigsten Informationen direkt im Sichtbereich des Nutzers sind.


Mobile Endgeräte bedeuten neue Herausforderungen

Neben der Überlegung, wie die Darstellung von Tabellen auf Desktop am besten funktioniert, sollte man direkt die Darstellung auf den mobilen Endgeräten mitberücksichtigen. Da es nicht immer einfach ist, dieselben Informationen wie auf dem Desktop in gleichem Umfang mobil anzuzeigen, kommen einige auf die Idee, die Tabelle in Form einer PDF zum Download anzubieten. Allerdings ist das nicht gerade benutzerfreundlich und doppelte Arbeit bei der Aktualisierung des Content.

Aber nicht nur die Darstellung der Tabellen selbst ist eine verzwickte Sache, auch der Umgang mit langen Wörtern ist nicht immer einfach – ich sage nur “Donaudampfschifffahrtsgesellschaft”. Silbentrennung könnte eine Lösung sein. Hier gibt es aber zwei Dinge zu beachten: Macht man die Silbentrennung händisch, ist dies dann auch auf der Desktopvariante zu sehen. Nutzt man dafür CSS, funktioniert die Silbentrennung zwar automatisch, aber nicht immer zuverlässig.


Welche Möglichkeiten gibt es denn aber nun, Tabellen und deren Inhalte vernünftig mobil darzustellen? 


1. Spalteninhalte untereinander darstellen

Desktop

Darstellung der Tabelle auf der Desktop-Version der Website erlebnisritte.de

Dank des Abstands zwischen den einzelnen Spalten bleibt genug Platz, um bei liquid-responsive beziehungsweise kleinerem Bildschirm die Darstellung noch eine Weile beizubehalten.

Mobil

Auf der mobilen Version der Website erlebnisritte.de werden die Spalteninhalte untereinander dargestellt

Mobil werden die Spalten untereinander dargestellt, die Spaltenbeschriftungen werden nicht angezeigt. Diese Variante ist daher nur für Tabellen geeignet, deren Inhalte für sich sprechen und keinem Fachjargon enthalten – wie in diesem Beispiel.


2. Spalten und Schriften verkleinern

Desktop

Bei der Tabelle auf vpf.de stellt sich die Schriftgröße abhängig vom Browserfenster ein

Bei dieser Tabelle haben wir die Schriftgröße abhängig vom Browserfenster eingestellt. Dadurch können sich die Spalten an die unterschiedlichen Gerätegrößen anpassen.

Mobil

Die mobile Version der Website vpf.de verzichtet rechts und links auf einen Tabellen-Rand

Um die Darstellung auf einem Smartphone hochkant zu optimieren, wurde hier auf einen Rand rechts und links der Tabelle verzichtet. Auch wurde hier die Silbentrennung per CSS verwendet.


3. Spalten ausblenden

Gibt es in der Tabelle Informationen, die mobil aufgrund des unterschiedlichen Nutzungsverhaltens nicht benötigt werden, kann man diese ausblenden.


Fazit

Tabellen sind beim Webdesign meist eine knifflige Angelegenheit. Ob man nun die Silbentrennung händisch oder per CSS vornimmt, zwischen den Spalten Abstand lässt oder nicht – bei jeder Website muss der Designer individuell entscheiden, was am besten funktioniert.



Wie designt ihr Tabellen für liquid-responsive? Habt ihr eine präferierte Methode? 


zurück
comments powered by Disqus