Harmonie mit dem Goldenen Schnitt

von Fries Websolutions

Eine "Erfindung" verspricht die Harmonie in der Optik. Der so genannte Goldene Schnitt teilt die Flächen und Strecken in ein ganz bestimmtes Verhältnis auf, das vom Betrachter als ganz natürlich empfunden werden soll.

Der Goldene Schnitt hat nichts mit Mode oder Medizin zu tun, sondern es ist ein mathematisches Teilungsverhältnis. Konkret geht´s dabei um eine Strecke, die in zwei unterschiedlich lange Abschnitte geteilt ist. Der längere Abschnitt verhält sich dabei zum kürzeren wie die Gesamtstrecke zum längeren Abschnitt. Rechnerisch entspricht das etwa dem Verhältnis von 3:5 oder 1:1,618. Oder etwa 38:62 Prozent.

Die Proportionen des Goldenen Schnitts im Web-Layout

Das klingt erstmal nach trockener Mathematik. Aber es ist gerade diese Asymmetrie, die als besonders harmonisch empfunden werden soll - zumal sich derartige Proportionen häufig auch in der Natur wieder finden, beispielsweise beim Seestern, dessen Diagonalen ebenfalls die Proportionen des Goldenen Schnitts aufweisen.

Die Proportionen des Goldenen Schnitts sind aber auch auf das Layout einer Webpage übertragbar. Es sind zwei Wege möglich, um den Bildschirm aufzuteilen - und zwar unabhängig von der Größe des Browser-Fensters. In unseren Beispielen haben wir die kürzere Strecke nach oben und nach links gesetzt, genauso gut kann sie nach unten und nach rechts verlagert werden.

Weg 1: Frames
Der simpelste Weg zum Layout nach den Proportionen des Goldenen Schnitts führt über Frames. Die Frames teilen den Screen horizontal und vertikal in das Verhältnis 38:62 Prozent ein. Das funktioniert mit allen Browsern stressfrei.

<FRAMESET border=0 framespacing=0 frameborder=0 cols=38%,*>
<FRAMESET rows=38%,*>
<FRAME name=frame1 src="eins.html" scrolling=no>
<FRAME name=frame2 src="zwei.html" scrolling=no>
</FRAMESET>
<FRAMESET rows=38%,*>
<FRAME name=frame3 src="drei.html" scrolling=no>
<FRAME name=frame4 src="vier.html" scrolling=no>
</FRAMESET>
</FRAMESET>

Weg 2: Tabellen-Layout per HTML skalieren
Hier lässt sich mit dem height-Attribut tricksen, das die Höhe der Gesamttabelle auf 100% skaliert und die obere Tabellenreihe auf 38% festlegt. IE 6, Netscape 7 und Mozilla verarbeiten die height-Angaben problemlos. Opera 6 verwurstelt die height-Angabe der Tabellenreihe auf Pi mal Daumen 50%; Netscape 4 kehrt die Proportionen gar um.

Live Demo (im neuen Fenster)

<table height=100% width=100% cellspacing=0 cellpadding=0 border=0>
<tr height=38%>
<td width=38%>Eins</td>
<td width=62%>Zwei</td>
</tr>
<tr height=62%>
<td>Drei</td>
<td>Vier</td>
</tr>
</table>