Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Responsive Webdesign und Tabellen

Samstag, 11. Oktober 2014

Tabellen — nein, natürlich keine Layouttabellen! sondern Datentabellen — und kleine Monitore: das ist eine echte Herausforderung. Die Standardtechniken des RWD (Responsive Web Design) helfen hier nicht weiter.
Natürlich kann man auf Smartphones pinchen (zoomen). Unterstellt, der Webworker hat das nicht per meta-Tag unterbunden, was ohnehin ganz schlechter Stil ist. Aber die Übersicht über die Tabelle, die Zuordnung der Tabellenzellen zu den jeweiligen Köpfen geht dabei schnell verloren.
Es gibt fertige Lösungen, die zumeist auf JavaScript und CSS basieren. Keine dieser Lösungen passte so richtig auf meinen Fall:

Screenshot Desktop
Die Preisliste einer Pension. In der Desktop-Version der Webseite passen die 4 Spalten gut ins Layout.

Die gewählte Lösung: Nur die Kopfspalte und jeweils eine Datenspalte anzeigen.

Screenshot 2 iPhone
Beim Aufruf der Preisliste mit dem Smartphone wird zuerst einmal abgefragt, für welche von 3 Saisonzeiten die Tabelle angezeigt werden soll.
Screenshot 3 iPhone
Eine Kopfspalte und eine Datenspalte können auf dem kleinen Monitor in normaler Schriftgröße ohne Scrollen angezeigt werden. Zusätzlich wird noch auf die Details zu den einzelnen Tabellenzeilen verzichtet. Die Details sind in den verlinkten Detailseiten nachzulesen.

Die Umsetzung in Stichworten:

  • Media Queries reichen (leider) nicht. Ich frage per PHP den User Agent ab.
  • Falls der User Agennt ein Smartphone ist, wird per PHP das Auswahlmenü ein-, und die Tabelle erst einmal ausgeblendet.
  • Je nach gewählter Option (Saison) wird nach Absenden des Formulars (onChange="this.form.submit()") die Tabelle mit der gewählten Spalte angezeigt, und die beiden anderen Spalten per CSS verborgen.


Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE