Bereits im Oktober hatte ich versprochen ein wenig über das neue Design, insbesondere die Gridstruktur zu schreiben. Hiermit mache ich dieses Versprechen wahr.

Grid auf dieser Seite anzeigen/ausblenden

In den letzten beiden Jahren haben Grids auf Webseiten einen regelrechten Boom erlebt, so auch hier. Auslöser dieser Bewegung sind sicher Mark Boulton (mit seiner Serie “Five Simple Steps to designing grid systems” von 2005) sowie Khoi Vinh (mit eigentlich allem, was er tut).

“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.” Mark Boulton

In Zeitungen gibt es Grid- bzw. Rastersysteme schon eine halbe Ewigkeit. Bei Webseiten jedoch gibt es diese Gestaltungstradition nicht. Das liegt sicherlich daran, dass man zu Beginn das Internet nicht als designbares Medium wahrnahm.

Zudem kommen die meisten Webdesigner eher aus der Programmierung, nicht aus der klassischen Gestaltung. Und die klassischen Gestalter versuchten sich nur zögerlich am Design von Websites.

Irgendwann entdeckte man Tabellen und damit 3-Spalten-Layouts, die heute noch oft als das A und O des Webdesigns gesehen werden (wenn auch mittlerweile ohne Tabellen). Doch die haben mit Grids nichts zu tun.

“The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic building block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.” Khoi Vinh & Mark Boulton (PDF)

Ein Grid ist eine unterschwellige Aufteilung einer Zeitung, eines Magazins oder hier im Speziellen: einer Webseite. In diesem Beitrag kann das Grid eingeblendet werden. Es besteht aus 12 Spalten à 70 Pixel (bei einer Standard-Schriftgröße von 16px). Dabei werden zwei Spalten jeweils zusammengefasst zu einer sog. „Superspalte“.

Der Planungsaufwand ist bei so einem Layout natürlich höher, Bildgrößen müssen – zumindest in der Breite – vorher festgelegt werden. Mit einem einfachen float:left; ist es plötzlich nicht mehr getan, hier übernimmt eine Klasse (nämlich twocols¹) die Aufgabe Bilder korrekt auszurichten:

¹ twocols ist dabei ein ungeschickter Name, weil das Bild in Wirklichkeit keine zwei sondern sechs Spalten überspannt, bzw. drei „Superspalten“.

Das Grid hier ist durch die konsequente Verwendung von em (der Einheit, nicht des Elements) für alle Breitenangaben von Elementen sowie padding und margin beliebig skalierbar, ohne seine Gestalt zu verlieren. Leider führt dieses Vorgehen (schnell) zu horizontalen Scrollbalken.

“I paid serious attention to establishing a rational and sustainable layout grid that would see me through at least a few more years of doing this. Yes, I hope to keep at it that long.” Khoi Vinh

Zudem habe ich die meisten Seitenelemente mit Float und negativen Margins in die entsprechenden Randspalten geschoben – die Zitate sind ein Beispiel dafür.

Der große Vorteil bei Grids ist, dass sich alles wie von selbst ineinander fügt. Proportionen funktionieren einfach so und die Gestaltung der Seite wirkt aufgeräumter. Ein klares Grid und viel Vorarbeit sind nötig, zahlen sich aber aus, wenn es um eine klare Seitenstruktur und zusammenpassende Elemente geht.