Relaunch für Yoga.raum in Responsive Webdesign

Ein Relaunch für die Website des Leipziger Yogastudios Yoga.raum stand an. Eine der Anforderungen war die Umsetzung in Responsive Webdesign. Als Redaktionssystem kam WordPress zum Einsatz. Auf Basis des Responsive Themes entstand mittels Child-Theme das neue Webdesign, das Farben und Grafikelemente des alten Designs übernommen hat.

responsive-webdesign-leipzig

Beim wöchentlichen Kursplan habe ich mich gegen Responsive-Tables-Umsetzung entschieden, da die Übersichtlichkeit darunter gelitten hätte.  Per media query gibt es zwei Varianten – eine Tabellenansicht für große Bildschirme und eine Listenansicht für Smartphones.

stundenplan-tabelle
Kursplan Tabelle

 

stundenplan-liste
Kursplan Listenansicht
Auf der Seite Workshops kommen Responsive Data Tables (css-tricks) zum Einsatz.
Ab einer bestimmten Bildschirmbreite werden Tabellen per media query und CSS dazu gezwungen, sich nicht wie Tabellen zu ‚verhalten‘. Alle Tabellenelemente bekommen die CSS-Eigenschaft block-level. Im Falle dieser Tabelle reicht das schon. Die einzelnen Workshops werden optisch voneinander getrennt durch die alternierenden Farben der geraden und ungeraden Tabellenzeilen.
Responsive Data Tables
Workshops große Bildschirme
Responsive Data Tables
Tabelle für Smartphones

www.yogaraum-leipzig.de

 

One thought on “Relaunch für Yoga.raum in Responsive Webdesign

Kommentare sind geschlossen.