Responsive Pricing Tables

Responsive Pricing Tables

Pricing Tables bieten uns eine gute Möglichkeit Produkte und sonstige Angebote im Web miteinander zu vergleichen und dies zu Visualisieren. Hier findet ihr einen Pricing Tables Konfigurator einer Responsive Design Lösung zum vertikalen scrollen auf mobilen devices.

Mit solchen Produktvergleichs-Tabellen bzw. dessen technischer Umsetzung wollte ich einfach mal ein wenig rumspielen, daraus ist auch direkt ein kleines aber feines Projekt (Pricing Tables Konfigurator) entstanden welches ich hier kurz vorstellen möchte.

Technische Umsetzung

Das Ganze ist fast eine reine CSS Umsetzung, um aber flexibeler zu sein und die Spaltenhöhen der einzelnen Elemente nicht auf eine fixe Höhe setzen zu müssen, wird der optionale Tabellenheader (zumeist die linke Spalte) mit jQuery an die richtige Position gesetzt. Alles weitere ist pures CSS. Dabei sollten vielleicht das kleine fluid Grid-System (12 oder 16) für die einzelnen Spalten, als auch die CSS-Ribbons oder aber die Hover-Animationen erwähnt werden.

Vertikales Scrolling für mobile Endgeräte

Das was diese Umsetzung allerdings von einigen anderen (es gibt sicherlich tausende) Pricing Tables unterscheidet, ist das Verhalten bei kleineren Auflösungen (Responsive Design). Die einzelnen Spalten werden nicht wie bei meisten anderen Lösungen ab einer gewissen Auflösung einfach umgebrochen und untereinander dargestellt (hierbei ist die Vergleichsmöglichkeit der Artikel nur noch sehr schwer möglich), sondern die komplette Tabelle ansich bleibt bestehen und läßt sich vertikal scrollen. So kann man auch sehr schön auf mobilen devices die einzelnen Positionen vergleichen, also genau das wofür eine Pricing Table auch angewendet werden sollte.

Konfigurator

Mit dem Konfigurator kann man nun zwischen 5 unterschiedlichen Darstellungen (z.B. Flat oder EyeCandy Design, mit/ohne Rahmen, Abstände, etc.) und zwischen 4 verschiedenen Farb-Skins auswählen. Als dritte Einstellmöglichkeit dient ein Farbwähler für die Hintergrundfarbe der Seite. So kann man sich recht einfach und komfortabel seine bevorzugte Konfiguration zusammenklicken, quasi WYSIWYG.

Download Sourcen

Die Sourcen stehen hierbei natürlich auch zum Download zur Verfügung. Enthalten sind neben den HTML- und CSS-Dateien auch die SASS files um das Ganze auch noch individueller nutzen zu können.

Anleitung

Eine kleine Anleitung (auf englisch) zur detaillierten Verwendung findet ihr ebenfalls im Download-Paket als auch auf der Webseite. Sollte ihr dennoch Hilfe benötigen oder sonstige Anmerkungen, so nutzt bitte die Kommentar-Funktion auf dieser Seite.

So, genug geschrieben. Schaut es euch einfach an…

Pricing Tables

Kommentare sind geschlossen.