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

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 twocols1) die Aufgabe Bilder korrekt auszurichten:

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

Das neue Layout von yatil.de mit überlagertem Grid

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.

Hier ist es nun: Aufgeräumt, schwarz auf weiß und überhaupt sehr neu: Die n+1. Version von yatil!

Aber Achtung! Hier und da muss die Farbe noch trocknen, das versteht sich ja wohl von selbst. Hier gibt es jetzt aber ein tolles (und völlig ohne Frameworks entwickeltes) Zwölf-Spalten-Layout. Es ist unglaublich (und für einen Non-Designer wie mich auch unverständlich) wie natürlich sich Seitenelemente zusammenfügen und das Layout einfach passt.

Was auch auf die Seite gefunden hat sind JavaScript-Spielereien, die allesamt mit jQuery umgesetzt wurden. Natürlich habe ich dabei auf die gute Tastaturbedienbarkeit geachtet. Trotzdem muss ich, vor allem unter dem bösen Betriebsystem, noch weiter testen.

Das Archiv ist mit einem eigenen, internen TXP-Plugin umgesetzt und auch zwei weitere Neuigkeiten (die ich noch nicht verraten kann, weil ich überhaupt nicht weiß, ob ich dazu komme oder nicht) werden ein Plugin benötigen.

Wer jetzt auf mehr Artikel und Einträge hofft wird wahrscheinlich enttäuscht: Die Uni beginnt morgen wieder einigermaßen ernsthaft und mit dem Snooker Grand Prix beginnt das aufwändigste Turnier für die Berichterstatter, zu denen ich ja leider auch gehöre: nach den bereits beendeten 224 Qualifikationsspielen gilt es ab dem 13. Oktober über 120 Gruppenspiele des Hauptturniers zu berichten. Eine Riesenaufgabe. Glücklicherweise konnte ich mir per TXP-Plugin die Arbeit in diesem Bereich deutlich erleichtern.

Meinungen?

Mit dem abschalten der Stilvorlagen beginne ich heute und morgen damit das XHTML anzupassen. Das sollte bis morgen abend beendet sein. Die Gestaltung wird erst an Allerheiligen dazu kommen.

Es kann durchaus sein, dass die Seite zwschendurch nicht funktioniert oder, dass Teile der Seite nicht korrekt angezeigt werden. Ich bitte um Ihr/dein Verständnis.

Ach ja, das ist übrigens das, was auch auf Handys oder anderen Zugangsgeräten angezeigt werden sollte.

Auf dem Bild (ich hoffe man kann es lesen) steht: »Zu unserem diesjährigen Herbstfest am Sonntag mit einer Ausstellung Den 10.Oktober 2004. Möchten wir Sie herzlich in die Sängerhalle einladen«.

Das ist natürlich grammatikalischer Selbstmord!

Richtig wäre: »Zu unserem Herbstfest am Sonntag, dem 10.Oktober 2004, möchten wir Sie in die Sängerhalle einladen.«

Und dass der Schoppen früh und nicht etwa »frü« getrunken wird ist sogar mir klar. Von der Gestaltung (Gewicht, Schriftart, Zentriertheit) möchte ich garnicht anfangen. Alles einfach hingeschludert. Schade.

Der TOPF ist mittlerweile nahezu ausverkauft…

Ich danke meiner Chefredaktion und den Redakteuren für die gute Themenwahl, der Druckerei Gabriel für den soliden Druck, den Werbetreibenden (insbesondere der Sparkasse, der AOK und der Physiotherapieschule) für die finanzielle Hilfe und Herrn Lesch für die tatkräftige Unterstützung.

Und bevor ich es vergesse: Ich danke allen Lehrern, die mir erlaubt haben ihre kostbare Unterrichtszeit zu opfern um den TOPF fertig zu stellen, sowie den Lesern des TOPFes, die ich hiermit aufrufe aus dem Chor aus und in den TOPF einzutreten.

Danke!