Responsive Data Table Roundup

Seit ich erstmals darüber berichtet habe, gab es eine Menge Ansätze für responsive Datentabellen.

Die Idee des Originals war, das Rasterlayout der Tabelle aufzugeben und jede Zelle zu einer eigenen Zeile zu machen. Jede dieser Zeilen wird mit einem Pseudo-Element beschriftet. Dies ergibt eine wesentlich höhere Tabelle, die mehr vertikales Scrollen erfordert, aber kein horizontales Scrollen. Es ist einfacher, die Daten zu durchsuchen, ohne den Kontext dessen zu verlieren, was was ist. Der Nachteil ist, dass Sie möglicherweise den Kontext des Datenvergleichs verlieren, da Sie keine Zellen von Daten mehr direkt neben anderen Zellen dieses Typs sehen.

Mobifreaks veröffentlichte eine sehr ähnliche Idee, die die gleiche Layoutänderung und Pseudo-Element-Beschriftung verwendet. Sie verwendeten HTML5 data-* Attribute für die Beschriftung, wodurch benutzerdefiniertes CSS für verschiedene Tabellen überflüssig wird. Ich glaube nicht an den SEO-Teil, aber der Code ist gut.

Derek Pennycuff nahm das Original und wendete das „Mobile First“-Konzept an. Anstatt mit Tabellen-Markup zu beginnen, beginnt es mit Definition List-Markup und zwingt es dann in ein Tabellenlayout, wenn der Bildschirm groß genug ist, um es zu verarbeiten. Während ich das Denken hier liebe, bin ich mir nicht sicher, ob mir gefällt, was es braucht, um es zu erreichen. Das Markup ist viel schwerer und (ironischerweise) meiner Meinung nach nicht semantisch. Tabellarische Daten sollten als Tabelle markiert werden. Ich denke, die Philosophie hinter „Mobile First“ ist, die Dinge standardmäßig einfach und leichter zu halten und für größere Bildschirme schwerer und komplexer. Diese Demo beginnt und bleibt schwer.

Drew Dyksterhouse erstellte eine Demo, die berechnet, wo die Tabelle unterbrochen werden soll, indem sie misst, ob die Tabelle breiter als der Bildschirm geworden ist, und dann diesen Breakpoint zur Effizienz speichert.

---

Scott Jehl entwickelte zwei clevere Ideen. Eine bestand darin, aus den Daten in der Tabelle ein Diagramm zu erstellen. In dieser Demo ist es ein Tortendiagramm, das viel schmaler ist als die vollständige Datentabelle und daher besser für kleine Bildschirme geeignet ist.

Ziemlich cool, aber offensichtlich können nicht alle Tabellen in Diagramme umgewandelt werden. Ich würde auch argumentieren, dass eine Datentabelle und ein Diagramm ziemlich unterschiedliche Dinge sind. Wenn Sie sich die Mühe machen, ein Diagramm zu erstellen, wäre es wahrscheinlich gut, dies auch dem größeren Bildschirm zu zeigen, da es den Kontext auf eine nützliche alternative Weise liefert. Oder zumindest die Option haben, es zu sehen.

Scotts andere Idee konzentriert sich auf das Problem, dass große Datentabellen die Breite eines übergeordneten Containers über das hinaus dehnen können, was ein kleiner Bildschirm darstellen kann. Um dies zu verhindern, wird eine Media Query verwendet, um die Tabelle auf kleinen Bildschirmen zu verbergen und sie durch eine kleine Mock-Tabelle und einen Link zur Ansicht der vollständigen Tabelle zu ersetzen.

---

Stewart Curry hatte die Idee, einfach weniger wichtige Spalten auszublenden für kleinere Bildschirme. Einer der frühesten Kritikpunkte an mobilspezifischen Websites war, dass nur weil sie sich auf einem Mobilgerät befinden, sie kein weniger als vollständiges Erlebnis als ein Benutzer mit einem größeren Bildschirm verdienen (insbesondere da diese Geräte völlig in der Lage sind, mit „vollständigen“ Websites zu navigieren).

Ich denke jedoch, Stewart war auf dem richtigen Weg. Kleine Bildschirme zu nutzen, um Informationen auf die wichtigsten Dinge zu konzentrieren, ist großartig, es sollte nur keine Informationen ohne Rückgriff einschließen. Maggie Costello Wachs von Filament Group hatte auch die Idee, nicht essenzielle Spalten auf kleineren Bildschirmen auszublenden, aber auch ein Dropdown-Menü bereitzustellen, in dem Sie sie bei Bedarf wieder aktivieren können (was Sie durch horizontales Scrollen sehen können).

David Bushell ging auch die Idee an, das grundlegende Tabellenformat nicht zu ändern, aber dennoch das Problem des „zu breiten“ zu lösen. Sein Konzept dreht die Tabelle auf die Seite und wendet overflow-x: auto auf das tbody an, was bedeutet, dass die Datenzellen nach links und rechts scrollen können, wenn sie aus einem kleinen Bildschirm herausfallen, aber Sie immer noch die Kopfzeilen sehen (als ob sie eine feste Position hätten).

Brad Czerniak hat eine Idee namens Rainbow Tables, bei der auf kleineren Bildschirmen die Gitterstruktur der Tabelle aufgegeben wird und die Datenzellen so eng wie möglich zusammengepresst werden, während sie immer noch eine „Zeile“ sind. Anstatt die Daten anhand der Spalte zu identifizieren, werden die Daten farbkodiert, um einem Schlüssel zu entsprechen.

Update 26. Mai 2012: Zurb hat eine neue Technik veröffentlicht. Sie konzentriert sich darauf, dass die linkeste Spalte die „Schlüssel“-Spalte ist. Auf breiten Bildschirmen ist es nur eine normale Spalte. Auf kleinen Bildschirmen wird sie fest/haftend links und die restlichen Spalten können scrollen. Dies ermöglicht den Vergleich von Zeile zu Zeile.

Es ähnelt David Bushells Technik mit der festen linken Spalte, ist aber vielleicht robuster, da sie JavaScript für ein wenig DOM-Manipulation und Bildschirmgrößenmessung verwendet. Zusätzliche Abhängigkeiten, tiefere Unterstützung, Ihre Entscheidung.

Aktualisierungen

Hier sind noch ein paar weitere, die aufgetaucht sind

• Filament Group kombinierte mehrere der besten Muster zu einer „Gruppe von Plugins für responsive Tabellen“ namens Tablesaw.
• Stackable.js
• FooTable
• jQuery-rt-Responsive-Tables
• RWD-Table-Patterns

Außerdem hat Jason Grigsby einen Artikel zur Auswahl einer Lösung basierend darauf, was der Benutzer mit der Tabelle machen möchte.

Um dieses Problem noch schwieriger zu machen, überlegen Sie, mit welchem Markup Sie beginnen müssten, damit die Daten ohne CSS und ohne JavaScript funktionieren. Die Idee ist dann, dass sie in E-Mails und RSS und so weiter gelangen und in Ordnung sind. Ich habe versucht, das hier zu lösen. Es ist ziemlich unordentlich, aber es funktioniert.