Monika Andergassen

Nachdem ich nun Websites sowohl mit dem YAML (= Yet Another Multicolumn Layout)-Framework als auch mit dem YUI (=Yahoo! User Interface Library)-Framework erstellt habe, möchte ich die beiden hier kurz vergleichen.

Vorab: Wozu ein solches Framework?

Das Erstellen von Websites mit div-basierten Layouts hat sich in den letzten Jahren durchgesetzt. Die Vorteile davon sind bereits zahlreich (zB. hier) beschrieben worden.

Allerdings ist es mühsam, für jede Website das gesamte Grundgerüst neu aufzubauen, und zwar so dass sie auch plattform- und browserübergreifend funktioniert. Die eigentliche Gestaltung der Benutzeroberfläche gerät dabei leicht ins Hintertreffen.

Und hier kommen die Frameworks ins Spiel. Sie bieten dieses Grundgerüst fix-fertig an, und es kann im Prinzip für jedes beliebige Layout modifiziert und erweitert werden. YAML und YUI sind nicht die einzigen, aber nach meinen Recherchen die best entwickelten und umfassendsten. Es ist ein bisschen so, als würde man sich für das Schreiben eines digitalen Textes nicht erst die Software programmieren müssen, sondern würde diese (~Framework) als Basis für das Schreiben und Gestalten des Textes verwenden (~Website). Im Vergleich wird schon deutlich, dass sowohl für den Text als auch für die Website, das Programm/das Framework beherrscht werden muss und ein Gestaltungskonzept existieren sollte, damit nicht das Programm/das Framework die Herrschaft über das Design übernimmt…

YAML

(Zitat aus der YAML-Website):
“Das YAML-Framework ist ein Open-Source-Projekt von Dirk Jesse und wird seit der Veröffentlichung im Oktober 2005 kontinuierlich weiterentwickelt. Unterstützt wird das Projekt aktiv durch die Agentur itratos (Shopbetrieb) und Webhosting Franken (Hosting). Creative Commons License Dieses Projekt wird unter der Creative Commons Attribution 2.0 Germany License veröffentlicht.”

Das Yaml Download-Paket besteht aus mehreren Dateien in mehreren Ordnern, es sind auch Layout-Beispiele enthalten. Die HTML- und CSS-Dateien können nun beliebig verändert und erweitert werden – die “core” (Herzstück)- Dateien sollten dabei unangetastet bleiben und alle Änderungen aussen herum stattfinden.

Als Unterstützung wird zum einen der YAML Builder angeboten, eine interaktive Web-Applikation, mit welcher Grundeinstellungen, wie die Breite der Spalten, verändert und als CSS heruntergeladen werden können. Zum anderen gibt es verschiedene Layout-Bausteine, die bei Bedarf in das Basis-Gerüst eingefügt werden können, zB. das Layout für eine horizontale Menuleiste mit Pulldown, usw. Mit etwas Geduld lässt sich die Struktur sehr gut nachvollziehen und an die eigenen Layout-Wünsche hervorragend anpassen.

YUI

(Zitat aus der YUI-Website):
“The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.”

Bei YUI muss erstmal unterschieden werden, ob “nur” vom Grids CSS die Rede ist oder vom gesamten YUI Paket. Für div-basierte Layouts kommt YUI Grids CSS zum Einsatz:

Der Ansatz mutet im Vergleich zu YAML beinahe mathematisch an. Eine einzige CSS-Datei (reset-font-grids) setzt alle Browser-Layoutvoreinstellungen “auf Null”, und enthält die Definitionen für die verschiedenen mehrspaltigen Layouts. Eine HTML Datei mit wenigen Zeilen beschreibt ein einfaches Basis-Layout. An Bezeichnungen wird nicht aufwändig gearbeitet – auf einem A4-Blatt sind die wichtigsten Layout-Klassen zusammengefasst, mit denen sich beliebige Verschachtelungen von Layouts realisieren lassen.

Ein Highlight am Rande: zum ersten Mal wird mir erklärt, dass 1 em 13 px entspricht, ausser im Internet Explorer, wo 1em 13.3px entspricht. Damit lassen sich pixelgenaue Layouts endlich errechnen! Wow.

Erweiterungspotential bieten bei YUI nicht vorgefertigte Layout-Elemente auf CSS Basis wie bei YAML, sondern Javascript-Bausteine für zB animierte Menus uvam.

Fazit

Ich bin begeistert von beiden Initiativen und finde es toll, dass an Framework-Standards gearbeitet wird. Nach meiner Einschätzung ist YAML gut geeignet für Einsteiger, weil es viele Bausteine gibt und die einzelnen CSS-Definitionen gut nachvollziehbar sind. Der Nachteil liegt in einigem überflüssigen Material, das im Basispaket enthalten ist, und dieses für die jeweilige Website und deren Anforderungen auszusieben ist relativ aufwändig.

YUI hingegen ist etwas für Fortgeschrittenere. Das Material ist auf das nötigste reduziert, verlangt aber auch eine gute Beherrschung von CSS. Es muss nichts mehr entfernt werden, sondern man beginnt beim Layout wirklich bei 0.

Einziger Nachteil: derzeit gibt es Grids CSS nur für die Version YUI 2, obwohl YUI 3 (also das Javascript Paket) schon seit einiger Zeit zum Download bereit steht. ..

February 19th, 2010. von admin. (2) Comments.
Kategorie: Web Design. .

Seit heute ist sie online: die neue Website der TKI – Tiroler Kulturinitiativen/IG Kultur Tirol.

Mein Beitrag daran liegt zwar schon ein Weilchen zurück – zuletzt waren Programmierung und Inhaltsgenerierung am Zug – trotzdem ist das heute ein Meilenstein auch für mich.

Mein Beitrag… das Layout und die CSS/HTML Vorlage. Wir haben hier zum ersten Mal das YAML Framework eingesetzt und ich muss sagen, ich bin begeistert. YAML steht für “yet another multicolumn layout” und ist ein Open-Source-Projekt rund um Dirk Jesse. Mit YAML sollen “robuste und flexible Layouts einfach erstellt werden”, wobei sich (fast) jedes Layout in das Rahmenwerk einarbeiten lässt:

- “basierend auf Webstandards
- ausgerichtet auf zugängliche Webseiten
- robustes, flexibles Layoutkonzept
- modularer Aufbau, anwenderorientierte Funktionalität”
(Quelle: YAML-homepage)

Die Programmierung der Website (CMS…) stammt von Christoph Lechleitner.

June 2nd, 2009. von admin. No Comments.
Kategorie: Web Design. .