cne _LOG

Für ein Projekt musste ich mich mit dem Thema fensterbreitenabhängiger Layouts beschäftigen. Viele Artikel im Netz (siehe Linksammlung unten) zeigen Lösungen auf, die entweder mit JavaScript und CSS oder nur mit CSS auskommen. Wir haben und für die erste Variante mittels JavaScript entschieden, da einige der Ansätze für unsere Ziele nicht ausreichten bzw. nicht funktionierten.

Zielstellung

Wir wollen ein Layout, in dem die dritte Spalte unter eine bestimmten Fensterbreite unter der ersten Spalte dargestellt wird:

Zusätzliche Schwierigkeit: Die Spalten sollen sich über die Inhaltsspalte verschieben, welche außerdem eine flexible Breite hat.

Verschiedene Ansätze auf verschiedenen Browsern = verschiedene Ergebnisse. Wir haben uns dann für folgende Struktur im Markup entschieden:

<div id="wrapper" class="layout-default">
	<div id="header"></div>
	<div id="main">
		<div id="sidebar"></div>
		<div id="extra"></div>
		<div id="content"></div>
	</div>
	<div id="footer"></div>
</div>
<div id="extra2"></div>

Ich weiß, über die Reihenfolge der Blöcke könnte man streiten; letztendlich folgt unsere Anordnung dem Inhalt (vom Allgemeinen zum Besonderen).

Unser Beispiel: Im Stylesheet werden einige Anweisungen für die Position der DIVs gegeben, dazu benutzen wir Floats. Später erhält der Wrapper per JavaScript unter einer Auflösung von 900 Pixeln eine andere Klasse (.layout-small), der Inhalt #content wird breiter, die entsprechende Spalte #extra wird nach links verschoben und rutscht somit unter die Sidebar:

/*** Normales Layout ***/
#content {
	width: auto;
	margin: 0 150px 0 200px;
}
#extra {
	float: right;
	width: 130px;
}

/*** Schmales Layout ***/
.layout-small #content {
	margin-right: 0px;
}
.layout-small #extra {
	clear: left;
	float: left;
	width: 180px;
}

Den gesamten Versuch (und das verwendete JavaScript) könnt ihr in meiner kleinen Sandbox sehen: Collapsible Layout.

Als Ausgangspunkt habe ich mich an den Ansatz von Richard Rutter/Clagnut, einer Variation des CollyLogic-Layouts von Simon Collison, gehalten. Ab einer bestimmten Fenstergröße wird eine Klasse im Markup geändert, die dann wiederum per CSS gesteuert wird.

Auch unser Beispiel ist noch nicht ausgereift, ich wollte es hier einmal zur Diskussion stellen. Momentan reicht allerdings meine Zeit nicht, um mich genau damit zu befassen und eine elegantere Lösung für das Projekt zu finden. Der Ansatz ist jedenfalls geschafft.

Linksammlung

Hier seht ihr die Artikel und Beispiele, die ich bisher gefunden habe:

CSS-Lösungen

• Muffin Research – CSS Drop Column Layout (Bsp. ansehen)
• morethanseven.net – CSS only collapsing layout

Lösungen mit JavaScript und CSS

• Richard Rutter mit einer Übersicht auf seinem Blog Clagnut – Variable fixed width layout (sein eigenes Dynamic Layout)
• Simon Collison über seine Redesign auf CollyLogic – Redesign Notes 1: Width-based layout
• Mint, Verdeutlichung in der Demo
• Site Launch: Rosenfeld Media von Dave Shea, mit einem Styleswitcher-Script von Cameron Adams
• ein Styleswitcher wird auch auf UX Magazine benutzt
• Phu Lys Blog mit “Dropable Columns”: If..Else Log, das Layout passt sich der Breite des Fensters an und Spalten werden je nach Breite als “echte Sidebar” oder großer Subcontent-Bereich angezeigt (allerdings nicht in der Pink-for-October-Version)