Responsive Umsetzung einer Sidebar

[sterope]

Hallo zusammen,

ich setze derzeit ein responsives Design um, wozu ich noch eine Frage habe.Das Design wird mobile-first (content-first) gecodet. Im Folgenden die Mockups der drei geplanten Versionen zur besseren Nachvollziehbarkeit.

Mockups:
1.Mobile-Version: 1-spaltiges Layout. Die aside mit den "Upcoming Matches" steht untereinander, darunter folgt das "main"-Element mit Lorem Ipsum-Content.
http://www.directupload.net/file/d/3686/mz4ye8g2_jpg.htm

2.Tablet-Version: Die aside mit "Upcoming Matches" zeigt die zwei blauen Boxen nun nebeneinander, das Aside-Element ändert aber nicht seine Formatierung, es steht immer noch über dem Content.
http://www.directupload.net/file/d/3686/dbn6m4w3_jpg.htm

3.Desktop-Version: Das Design ist nun 2-Spaltig. Die aside mit "Upcoming Matches" wird zu einer klassischen, rechten Seitenleiste, das "main"-Element ist nun links angeordnet.
http://www.directupload.net/file/d/3686/3uk4fve2_jpg.htm

Mein Problem:
Ich bin kein HTML-Anfänger, habe aber noch nicht oft responsive gearbeitet. Deshalb rätsle ich gerade, wie ich im am Besten die Positionierungs-Änderungen des aside- und main-Elements löse. Ich dachte daran, in der Mobile- und Tablet-Version diese zwei Elemente absolut zu positionieren und das Floating auf none zu stellen. In der Desktop-Variante hebe ich das auf und mache ein normales, zweispaltiges Design mit floating-Angaben.


Meine Frage:
Würdet ihr das auch so machen oder gibt es für die Umpositionierung dieser Eltern-Elemente noch eine bessere Variante?

Danke und Gruß
sterope

 

[Tronjer]

Ich dachte daran, in der Mobile- und Tablet-Version diese zwei Elemente absolut zu positionieren und das Floating auf none zu stellen. In der Desktop-Variante hebe ich das auf und mache ein normales, zweispaltiges Design mit floating-Angaben.

Auf gar keinen Fall. Nimm Bootstrap. Das hat ein vierstufiges Grid-Layout, mit dem sich je nach Auflösung unterschiedlich viele Spalten nebeneinander darstellen lassen. Damit wird die Aufgabe zum Kinderspiel.

 

[sterope]

Hallo,

danke für deine Antwort.

CSS-Systeme sind mir ein Begriff, wobei mich die Einarbeitungszeit etwas stört, bis man gelernt hat, welche CSS-Klasse für was verwendet wird bzw. welche Formatierungen diese beinhalten. Aber das sollte nicht das Problem sein.

Bleibt trotzdem noch die Frage für mich offen, wie ich das ganze umsetze, so dass die rechten Sidebar in den kleineren Versionen (Mobile und Tablet) seine Position ändert und dann oberhalb des Contents steht. Mir fehlt da gerade der gescheite Ansatz. Kanst du, oder jemand anders, mir dies bitte erklären?

Gruß
sterope

 

[Supercomputer]

Du könntest es mit einem Dynamischen Style Sheet (DSS) versuchen. Lass dir über PHP ober ähnliches ein paar grundlegende Informationen geben, die eindeutig zeigen was es ist. Dann jagst du diese Informationen durch einen Switch (oder das was in der entsprechenden Sprache zu Verfügung steht) und lässt von diesem dann entsprechende Variablen setzen.

Die dann z.B. so zum Einsatz kommen:

background-color: <?=$deinevariable?>;

Mit freundlichen Grüßen
Supercomputer

 

[Banana_Jones]

Mit Bootstrap, wie von @Tronjer angesprochen, überhaupt kein Problem. Das Grid-System erlaubt auch, Spalten zu pullen und pushen, sprich die Position zu ändern. Hier ein Beispiel:

http://jsfiddle.net/6BN55/

Im Prinzip wird hier durch die Klassen folgendes gesagt:
1. Bei einem xs-Viewport sind die Bereiche jeweils 12 Spalten breit (100%)
2. Bei einem md-Viewport sind die Bereiche 4 resp. 8 Spalten breit (25% / 75% )
3. Bei einem md-Viewport wird die erste Spalte (sidebar) um 8 Spalten nach recht verschoben, die zweite wiederum um 4 Spalten nach links. Damit haben sich die Positionen quasi gekehrt.

genauere Erläuterungen zum Grid-System findest du hier: http://getbootstrap.com/css/#grid

 

[Tronjer]

Du könntest es mit einem Dynamischen Style Sheet (DSS) versuchen. Lass dir über PHP ober ähnliches ein paar grundlegende Informationen geben, die eindeutig zeigen was es ist. Dann jagst du diese Informationen durch einen Switch (oder das was in der entsprechenden Sprache zu Verfügung steht) und lässt von diesem dann entsprechende Variablen setzen.

Die dann z.B. so zum Einsatz kommen:

background-color: <?=$deinevariable?>;

Mit freundlichen Grüßen
Supercomputer

Weil es auch besonders performant ist, das CSS bei jedem Seitenaufruf neu zu generieren, anstatt es im Browser-Cache abzulegen. Für die Ausgabe von Variablen innerhalb Stylesheets gibt es eigene Sprachen.

 

[Supercomputer]

Weil es auch besonders performant ist, das CSS bei jedem Seitenaufruf neu zu generieren, anstatt es im Browser-Cache abzulegen. Für die Ausgabe von Variablen innerhalb Stylesheets gibt es eigene Sprachen.

Man könnte auch einen Cockie anlegen und in dem dann die Daten speichern die gebraucht werden. + Die Seite Cachen.