Donnerstag,
20. März 2008

Ein Blick zurück

Grid-Layouts sind der letzte Schrei - hört man jedenfalls überall. Nach den zähen Jahren des Erlernens von CSS trauen wir Webentwickler uns wieder an eine Gestaltungsvariante für Webseiten, die bereits vor 10 Jahren eine Blütezeit erlebt hatte. Damals nämlich als man mit Tabellen und transparenten GIFs so ziemlich alles crossbrowser (IE 4,5 & Netscape 4) hinbekommen hat.

Schließlich haben die Grid-Layouts - wie irgendwie fast alles im Netz - ihren Ursprung im Printdesign. Mit dem Aufkommen von CSS 2 und der Verbannung der Layouttabellen waren jedoch plötzlich selbst einfache 2 und 3-Spaltenlayouts anspruchsvoll genug, um Layoutentwickler aufgrund zahlloser Bugs ins Schwitzen zu bringen. Die Technik zu beherrschen war eine Kunst (zuweilen auch Voodoo) und demzufolge wurden Layouts geradliniger, einfacher ... Spaltenlayouts halt.

Grids mit Blueprint

Seit einiger Zeit jedoch gibt es sie wieder, die Grid-Layouts. Dieses Mal sind sie CSS-getrieben und mit Hilfe von CSS Frameworks wie Blueprint CSS soll auch die Erstellung einfacher von der Hand gehen.

 

Leider arbeitet Blueprint CSS ausschließlich mit fixen Breiten und opfert damit viele Vorteile flexibler Layoutgestaltung für ein rein visuelles Gestaltungskonzept. Wenn ich ein anderes Wort dafür suchen müsste, würde mir wohl wieder die Layouttabelle einfallen. Nun ist YAML auch ein CSS-Framework, allerdings bekanntermaßen auf spaltenbasierte Layouts ausgerichtet. Zwar stehen mit den Subtemplates und dem YAML-Builder zwei extrem vielseitige Werkzeuge für die Erstellung Grid-basierter Layouts zur Verfügung, offenbar hat sich das aber noch nicht allzuweit herumgesprochen. Grund genug für ein kleines Experiment. Ich habe mir die Beispiel-Website des Blueprint-Frameworks genommen (ein klassisches Grid-Layout) und diese mit YAML nachgebaut. Ich wollte sehen, wie gut sich YAML mit seinem flexiblen Ansatz für solch anspruchsvolle Aufgaben eignet und sich somit einige Kritikpunkte der Grid-Layouts abschwächen lassen.

Erstellung des HTML-Grundgerüstes

Das Grundgerüst wurde im Builder erstellt. Dabei wurde auf die Nutzung herkömmlicher Spalten verzichtet und die zugrundeliegende Quelltextstruktur ausschließlich mit Subtemplates umgesetzt. Dank der Möglichkeiten, diese beliebig zu schachteln, lässt sich auch ein gewisses Maß an struktureller Gliederung in solche Layouts bringen, auch wenn erwähnt werden muss, dass mit suchmaschinenoptimierter Spaltenreihenfolge nicht mehr viel zu machen ist.

Endmontage - das CSS kommt hinzu

Aufenthalt im YAML Builder: ca. 5 Minuten. Anschließend ging es in den Dreamweaver zur Endmontage. Der Quelltext blieb ohne Optimierungen, womit auch die Flexibilität des Layouts erhalten bleibt. Ich habe lediglich einige Abstände entsprechend der Grid-Struktur definiert sowie die wichtisten typographische Vorgaben (Stichwort: Vertical Rhythm) nachgestellt, um eine Vergleichbarkeit zu ermöglichen. Als Grundmaße wurden definiert, die Schriftgröße mit 12px und eine Zeilenhöhe mit 18px.  Alle anderen Abstände im Layout errechnen sich aus ganzzahligen Fakoren dieser beiden Grundwerte, bzw. sind in schriftgrößenabhängig (1.0 em und 1.5 em) definiert.

Screenshot

Das Layout war letztlich schneller fertig als gedacht, die CSS-Deklarationen für das Screenlayout beschränken sich auf wenige Zeilen. Ein bisschen hat das alles natürlich schon gedauert, mehr als eine halbe Stunde war es aber nicht. Wer sich vom Ergebnis selbst überzeugen möchte, die finale Fassung steht im Netz. Mir ging es hierbei nicht um einen pixelgenauen 1:1 Nachbau des Blueprint-Layouts, sondern um die Darstellung des prinzipiellen Vorgehens bei Verwendung flexibler Elemente. Ich denke, ich bin in der kurzen Zeit recht weit gekommen.

Codeeffizienz: Blueprint und YAML im Vergleich

Abschließend habe ich mir den jeweils nötigen HTML-Code beider Frameworks angesehen und verglichen. Nach Angleichung aller Randbedingungen (Doctype, Dateinamen, Kommentare, Content usw.) standen bei Blueprint CSS für das HTML-Gerüst exakt 1019 Bytes und für YAML 1167 Bytes zu Buche. Der Sieg für den schlanksten Code geht also mit einem Vorsprung von 148 Bytes an Blueprint CSS. Ich bin damit absolut zufrieden, denn die 148 Byte bewirken auf der Seite von YAML ein vollständig flexibles und skalierbares Layout, welches sich dem jeweiligen Ausgabemedium perfekt anpasst. Und das Grid? Skaliert fröhlich mit. Für den optischen Eindruck kritische Abstände wie der seitliche Versatz des Bildes oder die horizontalen Abstände wurden größtenteils mit fixen Breiten realisiert, der Rest passt sich dem verfügbaren Platz an oder skaliert mit der Schriftgröße.

Mir hat diese kleine Fingerübung heute nachmittag sehr viel Spaß gemacht und vielleicht wirkt sie ja als Anregung für die eigene Spielereien. Einfache Spaltenlayouts sind jedenfalls nur der Anfang der Möglichkeiten, die YAML bietet. In diesem Sinne wünsche ich schonmal frohe Ostern ...


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.