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.
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 ...
Donnerstag, 20.03.08 (02:09 Uhr)
Sehr schön. Der Clou an den Grid-Layouts ist ja nicht, welches Framework man benutzt, sondern, dass man sich überhaupt Gedanken darum macht, we Elemente zusammen passen können und inwiefern Relationen eine Rolle spielen.
Blueprint hat mich durch das Überangebot an Klassen für die Präsentation abgeschreckt. Es ist sicherlich toll für flexible Designes, die von Nichtdesignern zusammengeklickt werden soll, andererseits wäre es natürlich möglich YAML-Vorlagen bereit zu stellen um einen ähnlichen Effekt zu erreichen.
Donnerstag, 20.03.08 (09:11 Uhr)
Jup, hab das flexible_grids aus Yaml auch schon probiert und hab gestaunt, was man damit alles machen kann!
Donnerstag, 20.03.08 (09:33 Uhr)
Sensationelle Sache. Den Vorschlag von Eric finde ich klasse, mehr Layoutvarianten in YAML bereitzustellen. Da ich demnächst meine Website endlich mal umstellen möchte, werd ich das wohl gleich mal testen müssen. Wobei mich mehr der vertical rhythm Ansatz interessiert.
Donnerstag, 20.03.08 (15:14 Uhr)
habe es auch mal ausprobiert und war zwar auf der einen seite wirklich davon begeistert, glaube aber kaum dass sich grid-layouts als neuer trend durchsetzen werden.
Donnerstag, 20.03.08 (15:20 Uhr)
Gut zu wissen. Ich habe nämlich just ein halbes Grid-Layout etworfen, welches ich mit YAML umsetzen muss. Jetzt weiß ich, dass es ohne Verrenkungen gehen wird.
Samstag, 22.03.08 (01:41 Uhr)
Einfach genial! Danke für die Konzeptstudie. Wenn man bedenkt, das flexible Layouts den Nutzern des WWW am Besten gerecht werden, hat YAML bei den CSS-Frameworks eindeutig auch hier die Nase vorne.
Ups! Wollte gerade die Empfehlung aussprechen, flexible Grids als Layoutbeispiele aufzunehmen. Da hätte ich mich aber blamiert, denn da gibt es ja schon ein Beispiels unter 05_layouts_advanced.
Wünsche schöne Ostern!
Dienstag, 25.03.08 (04:37 Uhr)
Danke für die Inspiration.
Ich bin gerade dabei eine Website mit viel Inhalt etwas unkonventionell aber dennoch möglichst benutzbar zu strukturieren. Dazu möchte ich das klassische Spaltenlayout aufbrechen.
Nach einem zweiten Blick in den IE6 habe ich dann vorerst gestoppt, denn das zeigte mir, der Weg ist noch weit.
Ich weiß gar nicht, warum ich nicht auf YAML gekommen bin, wo mich der Builder wirklich beeindruckt hat. Dein Post hier hat mich nun überzeugt, es damit zu versuchen. Ich bin auf den Vergleich gespannt.
Mittwoch, 09.04.08 (14:42 Uhr)
Danke für die Tipps. Mit YAML ist es wirklich einfacher und der Builder ist ohne Zweifel ein echtes Hilfsmittel.
Sonntag, 21.03.10 (09:52 Uhr)
Hi,
vielen Dank für den interessanten Artikel. Ich habe mir in letzter Zeit des Öfteren den Kopf zerbrochen, welches die “beste” Methode für das Erstellen von Designs ist.
Da ich häufig mit Ruby On Rails arbeite habe ich aus Bequemlichkeit compass in meine Rails-Apps integriert. (Compass ist eine Art Meta-Framework, welches SASS und ein Framework wie beispielsweise Blueprint in Rails Applikationen integriert.)
Mir fehlt bei Blueprint allerdings die Flexibilität und genau daher finde ich YAML sehr interessant. Habe soeben auch ein yaml-compass plugin auf github entdeckt. Bin mal gespannt wie sich das nutzen lässt. Auf jeden Fall probiere ich es nun einmal aus.
Viele Grüße
Bijan