Online Sports-Manager Frontend Teil 2: Responsive Design

Nachdem wir im letzten Teil das Grundkonzept mit einem Dummy-Design präsentiert haben, widmen wir uns dieses Mal der Darstellung unseres „finalen“ Designs in verschiedenen Auflösungen.

Responsive Design

Dieser Ausdruck geistert schon seit einiger Zeit wie ein Modewort durchs Netz. Wikipedia sagt dazu:

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um die technische Umsetzung eines anpassungsfähigen Website-Layouts. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neueste Webstandards wie HTML5 und CSS3.

Tabellen

Eine besondere Herausforderung stellen Datentabellen in responsiven Webdesigns dar. Oftmals können die Spalten nicht mehr vernünftig angezeigt werden, wenn die Auflösung in der Breite nicht ausreicht – oder es kommt zu einem sehr unschönen horizontalen Scrollen.

Die für uns optimale Lösung des Problems besteht darin, dass die einzelnen Zeilen der Tabellen ab einer bestimmten Auflösung nicht mehr als Tabelle angezeigt werden, sondern jede Zeile als ein Block, in dem die Spalten untereinander aufgelistet werden. Die Optik ist etwas schwierig in Worten zu erklären, daher haben wir euch ein Video / Screencast von der Veränderung des Designs in verschiedenen Auflösungen erstellt, das ihr am Ende dieses Beitrags findet.

„Finales” Design

Warum final in Anführungszeichen? Das Layout ist im Grunde schon so, wie es sein soll. Sicherlich werden wir jedoch beim Entwickeln einzelner Funktionen noch Änderungen am Layout vornehmen. Zudem ist die Ansicht für kleine Auflösungen noch nicht optimal angepasst, daher ist das „final” nur auf das Grundlayout bezogen.

Auch die Aufteilung der einzelnen Auflösungen, also ab wann wird welche Ansicht genutzt, ist noch nicht endgültig festgelegt.

1080px und größer

Bei diesen Auflösungen wird das Design in seiner vollen Breite angezeigt. Es ist durchaus möglich, dass wir den Mittelteil noch verbreitern und unterhalb des Menüs eine feine blaue Linie bis zum linken und rechten Bildschirmrand ziehen. Eine endgültige Entscheidung ist hierzu noch nicht gefallen.

Das Navigationsmenü wird im oberen Seitenbereich angezeigt, die Untermenüs klappen bei MouseOver nach unten aus.

zwischen 950px und 1080px

Der Mittelteil wird nun immer so breit dargestellt, dass rechts und links ein Rand von 40px verbleibt. Dieser wird zum Beispiel für die Icons zum Anpassen der Tabelle genutzt.

Das Navigationsmenü ist weiterhin im oberen Seitenbereich angesiedelt.

zwischen 850px und 950px

Die Tabellenansicht wird nun umgeschaltet. Es werden jeweils 4 Zeilen der Tabelle nebeneinander in Blöcken angezeigt.

zwischen 750px und 850px

Es werden jetzt nur noch 3 Zeilen der Tabelle nebeneinander gesetzt.

zwischen 500px und 750px

Es werden jetzt nur noch 2 Zeilen der Tabelle nebeneinander gesetzt.

Weiterhin wird nun das Menü nicht mehr im oberen Bereich angezeigt. Stattdessen wird eine dunkle Leiste am oberen Rand eingeblendet (noch nicht fertig designt!), bei der über einen Button ein Menü am linken Rand eingeblendet werden kann. Dieses belegt 1/3 der Seitenbreite. Die Untermenüs klappen nicht mehr nach unten aus sondern nach rechts.

Auflösungen mit weniger als 500px Breite

Alle Zeilen der Tabelle werden nun als Blöcke untereinander angezeigt.

Das Menü an der linken Seite belegt nun 1/2 der Seitenbreite.

Video

Hier nun das Video zur Demonstration der Designveränderungen. Im Video in der oberen linken Ecke wird die aktuell simulierte Auflösung angezeigt.

https://www.youtube.com/watch?v=gmeNJJuMoig