t3n News Entwicklung

Responsive Webdesign, Teil 4: Steuerungselemente und Datendarstellung

Responsive Webdesign, Teil 4: Steuerungselemente und Datendarstellung

Mit der Serie „Responsive Webdesign“ wollen wir euch die flexibler Projekte erleichtern. In Teil 4 zeigen wir Möglichkeiten auf, wie ihr Formulare, Steuerungselemente und Diagramme für die responsive Darstellung fit machen könnt.

Responsive Webdesign, Teil 4: Steuerungselemente und Datendarstellung
„Responsive Webdesign“ – DAS Buch für flexibles Webdesign von Ethan Marcotte.
Die Entwicklung von Webprojekten hat bekanntermaßen ihre Tücken – besonders, wenn eine Website auch auf mobilen Geräten wie Smartphones oder Tablets dargestellt werden soll. Ein großes Hindernis stellen auch Formulare und deren Steuerelemente dar. Komplexe Formulare darzustellen und das auch noch im Sinne der Usability, kann so manchen Entwickler zur Weißglut bringen. Ein weiteres Thema sind Tabellen und Diagramme. Heute zeige ich euch einige Bibliotheken und Lösungsansätze, die euch das Entwicklerleben vielleicht etwas vereinfachen – trotz der wenigen vorhandenen Möglichkeiten.

Formulare und Tabellen im Responsive-Webdesign

Bildschirmfoto 2013-11-28 um 14.23.45
Ein Formular-Skript für Responsive-Webdesign. (Screenshot: kumailht.com/gridforms/

Mit Grid forms bekommt ihr eine schöne Lösung, um komplexe Formulare, responsive darstellen zu lassen. Ihr könnt euch das Skript bei Github herunterladen.

Eine ähnliche Funktionalität bietet euch Stackable.js. Allerdings kopiert dieses Skript eure Tabelle und stellt sie in einer 2-Spalten-Ansicht neu dar. Auch Stackable.js ist auf Github verfügbar.

Mit Tablecloth.js bekommt ihr ein Skript, das euch Themes für eure Tabellen vorgibt. Das zeitfressende Gestalten einer Tabelle kann euch dadurch abgenommen werden. Dabei baut es auf Twitters Bootstrap auf und unterstützt jQuery-Manipulationen von Tabellen, wie zum Beispiel mit Tablesorter.

Eine sehr umfangreiche Library ist auch FooTable. Einen Überblick über den Funktionsumfang dieser Bibliothek könnt ihr euch auf der Demo-Seite machen. Dieses Skript bietet ebenfalls Themes an. Zusätzlich verfügt das Skript noch über eine Paginierungs-, Filter- und Sortier-Funktion.

Datendarstellung und Filter im Responsive-Webdesign

Eine vernünftige Darstellung von Daten entweder in Tabellen oder Diagrammen beziehungsweise eine benutzerfreundliche Dateneingabe generell, wird vom Kunden oft gewünscht, ist aber technisch nicht immer leicht umzusetzen.

Benutzereingabe

Bildschirmfoto 2013-11-28 um 13.43.27
„Touch-friendly“ und nett anzusehen. (Screenshot: ionden.com)

Abhilfe kann hier Ion.RangeSlider.js schaffen. Dieser Slider ist auch mit „Touch“-Geräten kompatibel.

Wenn ihr mit Dropdown-Menüs arbeiten wollt, dann solltet ihr unbedingt einen Blick auf Bootstrap-Select werfen. Damit könnt ihr euren Bootstrap-Formularen das gewisse Etwas verleihen. Auch Minimalect, Populous und Selectric dürften eure Herzen höher schlagen lassen – es werden Optionen zum „Themeing“ und diverse Callbacks geboten, um Steuerelemente benutzerfreundlicher zu machen.

Als letztes in dieser Kategorie möchte ich eure Aufmerksamkeit auf einen „Date-Picker“ lenken. DateTimePicker von XDSoft lässt euch Zeit, Daten und beides in Kombination „picken“. Auch eine Maskierung der input-Felder ist möglich.

Filter und Sortierung

Die eierlegende Wollmilchsau in Bezug auf Sortierung ist wohl MixItUp. Dieses Skript kann alles, was ein Webentwickler rund um das Thema Filter benötigt. Zieht euch das Skript über Github. Apropos Filter: Wenn ihr eine Alternative benötigt dann wird euch Filtrify gefallen. Seht euch die beindruckenden Demos an.

Diagramme

Bildschirmfoto 2013-11-28 um 13.51.55
Schönere Tabellen sind kaum möglich. (Screenshot: chartjs.org)

Der Markt mit responsiven Diagramm-Skripten ist ziemlich begrenzt, mit Chart.js werdet ihr trotzdem eine Freude haben, denn die Darstellungsoptionen sind absolut genial.

Derzeit kann man als Entwickler nur hoffen, dass es bald bessere Möglichkeiten gibt, um Daten im RWD besser darstellen zu lassen, oder man entwickelt seine eigenen Lösungen.

Welche Skripte vermisst ihr?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Banana Jones am 29.11.2013 (15:05 Uhr)

    Die Verwendung von Bootstrap Select bzw. anderen ähnlichen Plugins, die auf klassichen s basieren, wirkt sich zwar positiv auf die Optik eines Formulars aus, aber meiner Meinung nach leidet die Usability gerade auf mobiler Ebene enorm, weil das native Handling von s komplett ausgehebelt wird. Und das ist imho sowohl auf iOS als auch auf Android deutlich besser und intuitiver zu bedienen als es ein Bootstrap-Select je sein kann.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?