Lösungen für responsive Tabellen, damit der online Handel weiter boomt

responsive Tabellen, unterschiedliche Lösungen und Ansätze
responsive Tabellen, unterschiedliche Lösungen und Ansätze

Bereits 2011 gab es mehr als 11 Millionen Tablets in Deutschland. Diese werden sehr gern zum online Shopping genutzt. Gerade in online Shops sind Tabellen sehr oft vorhanden. Hier unterschiedliche Ansätze und Lösungen wie man diese responsive machen kann.

Tablets sind nicht Tablets – daher greift eine responsive Lösung nicht immer

Wer nun denkt Tablet sei Tablet, der irrt gewaltigst, als WebDesigner steht man vor dieser Vielfalt, die es zu beservicen gilt: Tablet INFO.

Auf Tablet-Screendesign.info findet man die unterschiedliche Bildschirmauflösungen von 1366 x 768 bis 800×600, unterschiedlichste Betriebssysteme und extrem unterschiedliche Zollgrößen, von den Browsern mal gar nicht zu reden.

Nicht immer ist ein APP eine gute Lösung, wer also sein Shop modernisieren mag hat dies nicht immer als Alternative. eCommerce ohne hilfreiche Tabellen ist kaum denkbar, daher machte ich mich auf die Suche nach Lösungen.

Tabellen und responsive Design

Es ist nicht nur die Technik, die es zu beachten gilt, sondern auch die Benutzerfreundlichkeit einer Lösung. Und ob diese auch von älteren Smartphones angezeigt wird. Spannende INFO dazu gibt es hier in diesem Beitrag und auch in den Kommentaren dazu: Responsive Tables bei David Bushell.

Daher habe ich hier Links zu Lösungen wie man Tabellen responsive machen kann gesammelt. Die Ansätze sind sehr unterschiedliche und bedürfen unterschiedlicher Eingriffe in das MarkUp der Tabelle. Je nachdem was man wo nutzen kann oder mag.

Footable nutzt data Attribut
Diese responsive Lösung arbeitet mit dem data Attribut. Wer also Tabellen mit einem Plugin //Zusatzmodul seines Shops verwendet, wird eventuell dabei Probleme haben. Footable.
Zurbs arbeitet mit CSS Klassen
Hier braucht der table Tag eine spezielle CSS Klasse und schon ist alles responsive: Zurb.
Fileamentgroup bietet ein DropDown
Hier kann der Nutzer in einem DropDown wählen welche Spalten er angezeigt haben mag. Die Anzahl der angezeigten Spalten ergibt sich aus der Größe des verwendeten Bildschirmes. Auch bei dieser Lösung bedarf es spezieller CSS Klassen. Fileamentgroup responsvie Tabellen mit dropdown.
Hier ist der Link zum Download auf Github.
Stewart Curry CSS Freak
Er nutzt „nchilds“. Daher ist kein zusätzliches MarkUp bei der Tabelle nötig. Allerdings werden hier Spalten auf kleinen Bildschirmen versteckt. Ich bin unsicher, ob dies immer praktikabel und im Sinne der Nutzer ist. eine CSS Lösung
Marco Pegoraro laßt den User auswählen
Er liefert eine Lösung für komplexe Tabellen. Der User kann auswählen welche Spalten er sehen mag. MediaTable Auch hier der Link zum Github Download.

weitere Lösungen sammle ich gern

Ich veröffentliche gerne weitere Lösungen für responsive Tabellen. Daher freue ich mich über Erfahrungen oder weitere Links.
Dass ich dabei den Spamordner für Kommentare hier kontrolliere ist selbstverständlich.

mts

Ebenfalls informativ und lesenswert