Layout-Raster

Kein Designer, der was kann, arbeitet mit einem komplett leeren Blatt Papier. Egal ob Flyer, Zeitung oder Magazin, Grundvoraussetzung für ein gutes Layout ist ein Raster.

Interessanterweise hat es diese Herangehensweise im Internet bisher kaum gegeben. Durch das Aufkommen zweier grid-based CSS frameworks grid960 und blueprint wurde das Thema populär und ist nun als “Neuerfindung” an allen Ecken des Webs zu sehen. Was jedoch gut ist, da an Rastern justierte Webseiten viel aufgeräumter, harmonischer aussehen und somit die Usability erhöhen.

Man kann nun eines der vielen CSS Grid frameworks herunterladen und darauf aufbauen

Man kann allerdings auch die Essenz extrahieren und sein eigenes Raster erstellen. Wichtig hierbei ist, dass es einen Umfassenden DIV Container gibt, in dem sich die Spalten orientieren. Ich halte mich an das 960er System. 960px ist eine Zahl, die sich durch viele andere Teilen lässt, und somit eine flexible Anzahl von Spaltenlayouts ermöglicht.

Also, erst ein wrapper-DIV mit 960px Breite, das zentriert auf der Seite platziert wird.

.wrapper {width:960px;margin:0 auto}

Dann die Spalten. Damit sie einander nicht berühren oder untereinander dargestellt werden bekommen sie einen 10px Abstand und werden inline dargestellt

.spalte_viertel {width:220px;position:relative;margin:10px;float:left;display:inline}
.spalte_halb {width:460px;position:relative;margin:10px;float:left;display:inline}
.spalte_ganz {width:940px;margin:10px}
.break {clear:both;}

Im HTML geht man dann mit den Klassen folgendermaßen um

<div>Das ist ein Container, der über die gesamte Breite der Seite geht.</div>
<div>Erste Spalte, ganz links</div>
<div>Zweite Spalte, neben der ersten</div>
<div>Dritte Spalte, eher rechts</div>
<div>Vierte Spalte, die ist ganz rechts</div>
<div>Fünfte Spalte, die ist wieder ganz links, in der nächsten Zeile</div>
<div>Sechste Spalte, die ist auch in der nächsten Zeile</div>

So kann man dann die Inhalte in Spalten ordnen, wie auf dieser Seite die Blogeinträge dargestellt werden, oder das Portfolio. Der Trenner-Container  mit der Klasse “break” ist dazu da, dass die Floats wieder aufgehoben werden.