Übersichtlichkeit: 3-spaltiges Layout -> 1-spaltiges Layout

[Gunther]

Hallo Alex!

vielen Dank für deine Antwort.

Gern geschehen. ;-)

ich schließe mich Mathias Ausführungen (weitestgehend) an. Wobei ich so spontan eher der
Meinung bin, dass du auch mit verschachtelten Flex-Boxen durchaus eine Serialisierung erreichen könntest. Allerdings macht das aktuell aufgrund der verschiedenen Syntaxen und diverser Browser-Bugs alles andere als "Freude".

Bis die Browser und mein Kopf bereit für Flexboxen sind, werde ich erstmal darauf verzichten.

Dann wirst du es sehr schwer haben, ein "brauchbares" Responsive Design zu erstellen, da aktuell nur Flexbox die Möglichkeit bietet, die Reihenfolge von HTML Elementen rein per CSS zu ändern.

Mir stellt sich aber einige ganz andere Fragen:
Machen diese ganzen Boxen wirklich Sinn?
Wo steckt die Navigation?
Beherbergt Box 3 den eigentlichen Inhalt? Wenn ja, sollte sie in der 1-Spalten Version direkt nach dem Header kommen und nicht nach den Boxen 1 + 2.

Eine konkrete Verwendung habe ich nicht. Vielmehr wollte ich ein Prototyp bauen, welcher für verschiedene Projekte verwendet werden kann. Möglicherweise auch als Joomlatemplate.

Ich bin da eher der Auffassung, dass "Responsive Design" so sehr vom jeweiligen Einzelfall abhängig ist, dass "Prototypen" hier nicht unbedingt zum bestmöglichen Ergebnis führen.

Vorstellbar wäre, dass Box1 die Hauptnavigation beinhaltet und Box2 eine wichtige Infobox (News) darstellt. Box3 ist der Inhalt. Box4 und 5 sind eher zu vernachlässigende Box mit weniger wichtigen Infos. Box4 könnte z. B. eine Statistik sein (angemeldete User etc.) und Box5 ein zufälliges Bild aus einer Galerie. Deshalb sollen diese auch in der "Kleinansicht" unter den Content rutschen.

Box1 und Box2 zwei halte ich hingegen für so wichtig, dass diese vor dem Inhalt dargestellt werden; möglicherweise in minimierter Form (Nur Navigationspunkte 1. Ebene).

Auch das sehe ich anders ...! ;-)
Als Besucher weiß ich ja, welche Seite ich gerade angesteuert habe. Ergo erwarte ich (mit) als Erstes auf der Seite den eigentlichen Content zu sehen, und nicht jedes Mal erst über die Navigation und immer dieselbe Infobox (die spätestens ab der zweiten Seite eben nicht mehr "new" ist) hinwegscrollen zu müssen.

Responsive Design hat für mich auch viel damit zu tun, seine Inhalte auf das Wesentliche zu beschränken und dem Benutzer ein Höchstmaß an "Übersichtlichkeit" zu bieten.

Da stimme ich dir grundsätzlich zu; wobei das generell und nicht nur für Responsive Design gilt. Dennoch oder gerade deswegen wollte ich so flexibel sein, dass ich Inhalte in unterschiedlichen Boxen platzieren kann, um so die Übersichtlichkeit auch auf kleinen Bildschirmen zu wahren, indem weniger wichtige Informationen unter den Inhalt rutschen; währende zwingend notwendige Bedienelemente (Navigation) davor erscheinen.

Es gibt durchaus die häufig anzutreffende Meinung, dass auf "schmalen (lineare einspaltige Darstellung) Viewports" die Navigation *nach* dem Inhalt kommen sollte. Persönlich bevorzuge ich einen Link/ Button ganz oben, um die Navigation ein- & auszublenden.

Gerade bei der Navigation entspricht dies doch auch der allg. Erwartung; zumindest ist dies auf den von mir besuchten Seiten meist der Standard (Navigation oberhalb des Contents).

Nicht ubedingt - s.o.

Jetzt könnte man die weniger wichtigen Informationen natürlich auch in der "Großansicht" unterhalb des Inhalts positionieren, aber da hätte ich unnötig Platz (links und rechts) verschenkt und wenn man trotz dieses Platzes unter den Inhalt scrollen muss, spricht das ja auch nicht gerade für Bedienungsfreundlichkeit.

Es gibt zahlreiche Untersuchungen (Eyetracking Verfahren), dass solche "Randinhalte" kaum wahrgenommen werden. Ich persönlich beachte solche Randspalten auch kaum, da ich quasi automatisch davon ausgehe, dass sie für mich keine relevanten Informationen beinhalten.

Denn was sich auf einem "breiten Viewport" (bspw. 1440px) noch halbwegs als "zusätzliche Informationen" in Randspalten unterbringen lässt (ohne zu sehr vom eigentlichen Inhalt abzulenken), wird auf "Small Screen Devices" zur "Scroll-Orgie" ...!

Dem stimme ich zu. Aber wenn es Inhalte von Relevanz sind, die nicht durch den v. g. Filter gefallen sind, ist es immer noch besser dafür zu Scrollen, als Besuchern diese Inhalte vorzuenthalten, nur weil sie mit einem kleineren Bildschirm auf die Seite kommen.

Stark vereinfacht könnte man wie folgt argumentieren:
Entweder sind Inhalte für die jeweilige Seite relevant, dann gehören sie zum Inhalt der Seite. Oder sie sind es nicht, dann gehören sie auch nicht "zwingend" auf die Seite.

Man sollte ja auch an das Datenvolumen denken, insbesondere wenn User die Seite nicht über ihren heimischen DSL Anschluss oder irgendein flottes W-LAN abrufen.
Unter diesem Aspekt sehe ich "zusätzliche Informationen", die mir quasi ungefragt bei jeder Seite mitgeliefert werden, eher als Ärgernis, denn als wirklichen "Mehrwert".
Denkbar wäre bspw. auch diese Inhalte per AJAX abrufbar zu machen, oder gar auf eine eigenständige Seite auszulagern.

Aber wie gesagt, das ist in weiten Teilen alles vom jeweiligen individuellen Fall abhängig.

Gruß Gunther