Webdesign leichter gemacht?

XHTML-/CSS-Frameworks im Überblick
Kommentare

Es gibt mittlerweile zahlreiche Frameworks für PHP-, JavaScript- und AJAX-Lösungen, die einem das Leben leichter machen sollen. Warum also soll diese Form der Arbeitserleichterung auf Skriptsprachen beschränkt sein und nicht auch in der Erschaffung der Oberfläche die Arbeit erleichtern? Es gibt ein paar interessante Ideen, wie man sich beim XHTML-/CSS-Coding die Arbeit erleichtern kann.

Zwei Sachen haben Frameworks für PHP, JavaScript, AJAX und XHTML/CSS gemein: man benötigt sie erstens nicht zwangsweise, sie können aber eine enorme Arbeitserleichterung darstellen. Und zweitens ist es ist immer hilfreich, eine fundierte Ahnung davon zu haben, was dieses Framework leistet und wo man selber zu denken beginnen muss.

Was aber kann ich mir unter einem Framework vorstellen? Bei den oben genannten Skriptsprachen handelt es sich dabei um ein Set von Objekten und Klassen, die wiederkehrende Aufgaben standardisieren, ihre Lösung erleichtern. Ein Framework sollte uns also bei der Lösung von Standardaufgaben und -problemen helfen. Die Bandbreite der möglichen Lösungen sollte möglichst groß sein. Nun können wir im Falle von XHTML und CSS nicht von Objekten und Klassen im gleichen Sinne sprechen und doch gibt es auch hier die Möglichkeit, wiederkehrende Aufgaben und Probleme zu standardisieren. Die Definition eines XHTML-/CSS-Frameworks erscheint bei genauerer Recherche schwer. Denn im Web tummeln sich Unmengen an herunterladbaren Basislayouts, komplett durchgestylten Templates (siehe Dynamic Drive) oder auch nur Detaillösungen, wie beispielsweise Menüs (siehe Listamatic1 und Listamatic 2). Da wir bei der Erstellung einer Oberfläche mit XHTML und CSS nicht „programmieren“ und auch nicht objektorientierte Entwicklung betreiben, kann man ein Framework in diesem Bereich als einen Ansatz begreifen, möglichst viele Layoutvarianten mit möglichst einheitlichem Code zu erschaffen. Der Fokus liegt dabei immer auf der XHTML-Struktur einer Webseite.

Abb. 1: Dynamic Drive CSS Library

Angestachelt vom CSS-Zengarden, bei dem mittlerweile fast 200 unterschiedliche Designs auf einem einzigen XHTML-File beruhen, haben sich Entwickler Gedanken gemacht, wie sie ihren XHTML-Code so optimieren können, dass nur durch den Austausch des CSS-Files ein anderes Layout entsteht. Für einige Entwickler war dabei auch die „source order“ wichtig, also die Reihenfolge bestimmter Seitenbereiche im Quellcode.

Frameworks wie PEAR oder Ruby on Rails gibt es bei der Erschaffung von Oberflächen mittels XHTML und CSS nicht. Die hier vorgestellten Ansätze stehen im Spannungsfeld zwischen Templatesammlung und modularem Baukasten für Webseiten. Genauer betrachtet gibt es derzeit nur zwei wirkliche Frameworks für XHTML und CSS, die anderen hier vorgestellten sind entweder Layoutsammlungen oder theoretische Spielereien. Die Erschaffer hatten einen persönlichen Ehrgeiz, mit nur einer XHTML-Struktur und intelligent eingesetztem CSS möglichst flexibel in der Erschaffung von Layouts zu sein. Trotzdem verdienen auch diese Beachtung, eventuell genügen sie vollkommen den eigenen Ansprüchen.

Die kurze Vergangenheit vor allem eines Projektes hat aber gezeigt, dass es in diesem Bereich Entwicklungspotenzial gibt. Es werden bestimmt in der Zukunft noch ein paar weitere Frameworks das Licht der Welt erblicken, weil man mit dieser Grundidee die Entwicklung von Webseiten vereinfachen kann. Speziell der auseinanderdriftende Browsermarkt lässt in Webentwicklern den Wunsch aufkeimen, man hätte flexible Standardlösungen zur Hand, mit denen man sich keine Gedanken mehr über Bugs machen müsste.

Die zu vergleichenden „Frameworks“

Im Folgenden werfen wir einen genaueren Blick auf Alessandro Fulcinitis „Layout-Gala“, auf das „CSS-Framework“ von Mike Stenhouse, „Mollio“ von Pete Ottery, „Many CSS-Layouts“ von Tierry Koblentz, „CSS-Grids“ von Yahoo! und „YAML“ von Dirk Jesse, das einzig deutschsprachige im Test.

Layout-Gala

Alessandro Fulciniti präsentiert 40 Layouts, die allesamt auf der gleichen XHTML-Struktur beruhen. Man kann sich entweder einzelne Layouts herunterladen oder das gesamte Set. Die Layout-Gala ist im Prinzip das Ergebnis eines Selbstversuches, wie viele Layouts man mit der gleichen Seitenstruktur erschaffen kann. Alessandro gibt rudimentäre Hinweise zu den Layouts, erklärt aber keine Lösung en detail und gibt auch keine Hinweise an die Hand, welche Vorteile und Einschränkungen die Layouts haben. Auffällig ist, dass alle Layouts nur grob gefüllte Container sind, es fehlen Navigationen, sodass man nie den Eindruck hat, eine komplette Webseite vor sich zu sehen. Im Gegensatz zu normalen Layoutsammlungen ist hier hervorzuheben, dass alle Layouts auf der gleichen Struktur beruhen, nur das CSS sich ändert. Trotzdem können wir nicht von einem Framework sprechen, interessant ist das Ergebnis allemal.

Verschiedenen Layoutvarianten à la Mike Stenhouse

Ausgehend von der Frage, wie man sein CSS organisiert, dass man einmal gefundene Lösungen möglichst einfach in anderen Projekten wiederverwenden kann, erweiterte Mike Stenhouse die Grundidee auf komplette Webseiten. Bei seinem Ansatz konzentrierte er sich auf sechs verschiedene Layoutvarianten. Bei deren Auswahl ging er pragmatisch nach seiner Erfahrung und Beobachtung vor, um Grundtypen zu identifizieren. Sein „Framework“ beschrieb er nur einmal in einem Blogartikel und blieb auch da sehr oberflächlich. Seine Zielgruppe sind eindeutig Könner, denen er zutraut und zumutet, ihre eigenen Schlüsse aus dem Quellcode zu ziehen.

Stenhouse regt mit seiner Arbeit also mehr an, als dass er fertige Lösungen und Baukästen anbietet. Interessant ist, dass er die Einsatzfähigkeit seiner Idee gleich zu Beginn auf sechs Layoutvarianten beschränkt. Das Framework deckt hierbei auch nur den groben Aufbau der Seite ab, also die Frage ob zwei- oder dreispaltig, mit vertikaler oder horizontaler Navigation. Ab dieser Entscheidung muss man sich selbst zurechtfinden. Für Inhaltscontainer gibt es keine Vorlagen. Wichtig war für Stenhouse die „Source order“, also die Reihenfolge von Seitenelementen im Quellcode und die Fähigkeit, mit einer XHTML-Struktur mehrere Layouts realisieren zu können. Alle sechs Layoutvarianten beruhen auf dem gleichen XHTML-Code. Angesichts unserer oben gefundenen Definition eines Frameworks können wir Stenhouses Ansatz diesen Titel nicht zubilligen, obgleich er ihn sich selber vergibt. Das Toolkit ist nicht flexibel und allgemein genug.

Mollio

Pete Ottery entwickelte für das CMS „Far Cry“ ein Set an Standard-Layouts, das er nun jedem unabhängig vom CMS zur Verfügung stellt. Auch hier wird deren Realisierung nicht genauer besprochen. Die Nutzer bekommen ein Downloadarchiv mit allen Layouts und ein PDF, in der der Aufbau des XHTML skizziert ist. Als Goodie gibt es noch PSD-Dateien, die den schicken Mollio-Look transportieren, für diejenigen, die auch noch grafische Hilfe benötigen.

Dieses  Framework ist aus den Anforderungen der Praxis geboren. Es ist noch schmaler dokumentiert als das erste, es wird aber zumindest eine Google-Group zur Diskussion angeboten. Ottery geht mit seinem Ansatz einen Schritt weiter, indem er den Layouttypen eine eigene, attraktive Optik verleiht. Er regt damit auch das Nachdenken über die Gestaltung der Inhalte eines Templates an und verleiht damit seinem Ansatz eine eigene Attraktivität.

Leider muss man sich wegen der fehlenden Dokumentation selber durch den kaum kommentierten Code arbeiten. Dabei stellt man mit Überraschung fest, dass die eigentlichen CSS-Zeilen für das Arrangement der Spalten sehr spartanisch sind. Durch eine intelligente Kombination von absoluter Positionierung, relativen Breiten und variablen Margins erreicht Ottery ein flexibles Framework.

Many CSS-Layouts

Thierry Koblentz nahm eine Diskussion in der Mailingliste „css-discuss“ als Anlass, über ein Framework nachzudenken. Unter der Prämisse „one template to rule them all“ formulierte er zuerst eine Standardstruktur, die er dann mittels CSS unterschiedlich arrangieren wollte. Ergebnis seiner Bemühungen sind acht unterschiedliche Layouts. Koblentz erläutert nur spartanisch seinen Ansatz, auch seine Zielgruppe sind eindeutig Könner. Das Aussehen der einzelnen Layouts in unterschiedlichen Browsern kann man sich anhand der einzelnen Browsercam-Testseiten anschauen, ein Einzelfall unter den vorgestellten Frameworks. An den Code der jeweiligen Layouts kommt man nur über die Quellcodeansicht, es gibt keinen gesammelten Download. Auch daran sieht man gut, dass dieses Framework als intellektuelle Spielerei verstanden wird. Einsetzbar und erhellend ist es trotz alledem. Wie Fulciniti und Stenhouse zuvor geht es auch Koblentz nur um die ganz grobe Seitenaufteilung. Er macht sich keine Mühe, die Layouts ansprechend aussehen zu lassen, macht sich keine Gedanken über eventuelle Inhalte der Templates. Sein Ansatz bleibt auf einer sehr abstrakten Ebene stecken, vor allem für Profis anregend und interessant.

Abb. 2: TJK-Design
CSS-Grids (Yahoo!)

Im Rahmen seiner umfangreichen Yahoo! UI-Bibliothek stellt der Suchmaschinenbetreiber auch einen sehr praktischen und pragmatischen Ansatz zur Erstellung von standardkonformen Layouts vor. Das Framework orientiert sich an Grundrastern einer Webseite, deshalb auch der Name „Grids“. Es besteht aus drei CSS-Dateien und Benennungsrichtlinien für die XHTML-Seitenstruktur. In einer informativen, aber nicht sonderlich langen Beschreibung, wird die Erstellung unterschiedlicher Raster erläutert und in das Baukastensystem eingeführt. Von den drei CSS-Dateien ist nur eine für das eigentliche Baukastensystem zuständig. Die anderen beiden steuern Schriftgrößen und setzen die grundlegenden Formatierungen der Browser zurück. Warum dies auf zwei weitere Dateien ausgelagert wurde, bleibt das Geheimnis von Yahoo!.

All diejenigen, die noch nie mit der Größeneinheit em eine Seite aufgebaut haben, werden sich umgewöhnen müssen, denn Grids arbeitet mit dieser relativen Größeneinheit, nicht mit Pixeln. Überhaupt scheint dieses Framework sehr mächtig zu sein und erfordert eine ordentliche Einarbeitung. Die CSS-Dateien sind nicht besonders übersichtlich, spärlich kommentiert und dokumentiert. Wenn man sich allerdings in das System eingearbeitet hat, hat man gleich zwei Vorteile: Man beherrscht ein sehr flexibles System zur Erstellung von Webseiten und man hat eine Basis, die für die Dynamisierung mittels der Effektbibliotheken von Yahoo! direkt vorbereitet ist. Aus Yahoo!-Entwicklerkreisen hört man, dass man jetzt dabei sei, die Dokumentation für die gesamte YUI zu verbessern und teilweise auch zu übersetzen. Ob Grids dabei berücksichtigt wird, müssen wir noch sehen, es scheint ein wenig stiefmütterlich behandelt zu werden. Zur Unterstützung für interessierte oder tatsächliche Anwender gibt es eine Mailingliste. Auch im Rahmen des Yahoo! Developer-Networks finden sich ein paar Beispielraster. Das System ist sehr interessant und vielversprechend. Umso bedauerlicher sind deshalb die oberflächliche Dokumentation und die schwer verständlichen CSS-Dateien. Die Anwendung gleicht einem Baukasten und ist einfach, wenn man sich auf die Funktionsweise eingelassen hat. Eine Abschätzung der Möglichkeiten und Einschränkungen fällt jedoch schwer.

YAML (Dirk Jesse)

Dirk Jesses YAML sticht aus dem Feld der besprochenen Frameworks heraus. Es ist das einzige deutschsprachige Projekt und wird in relativ kurzen Zyklen erweitert und verbessert. Auch Dirk suchte nach einem Toolkit, das ihm die Erstellung unterschiedlicher Webseiten auf einer Codebasis ermöglichte und zudem Standardprobleme löste, auf dass er nicht immer wieder im Gedächtnis danach kramen musste. Dabei ist ein Framework herausgekommen, das durch seine umfangreiche und informative Dokumentation genauso besticht, wie durch seinen intelligenten Aufbau.

Völlig gleichgültig, ob man YAML nutzen möchte oder nicht, ein Besuch der Webseite lohnt sich auf alle Fälle, denn man lernt durch die Dokumentation die Grundlagen, Feinheiten und Tücken des Weblayouts mittels Floating. Dirk ist der Einzige in der Runde, der schon in die Zukunft blickt und YAML gegen jede offizielle IE7-Beta testet.

YAML beruht auf einer XHTML-Struktur, die mittels eines wohldurchdachten Geflechts aus CSS-Dateien in unterschiedlicher Art und Weise gelayoutet werden kann. Im Urzustand handelt es sich um ein dreispaltiges Layout, das durch Wegnahme von Containern in die gewünschte Struktur und durch Modifikation eines zentralen Stylesheets in das gewünschte Layout gebracht wird. Auch Dirk hat neuerdings kleine, variable Inhaltscontainer vorgesehen, wie bei Grids.

Nicht nur die Webseite zum Framework ist informativ und lehrreich, auch die CSS-Dateien sind sehr ausführlich dokumentiert, meist mit Links zu weiteren Informationen. Der Clou steckt im Detail: Einzelne wichtige Klassen reparieren IE-Float-Bugs, eine ausgeklügelte aber verschachtelte Struktur hilft bei der Bekämpfung des IE-Boxmodell-Bugs. Es gibt zudem spezielle CSS-Dateien für den IE. Und da alles dokumentiert und erläutert wird, fühlt man sich nie unsicher oder im Unklaren gelassen.

YAML hat auch noch zwei weitere Alleinstellungsmerkmale: Zum einen gibt es spezielle Varianten für TYPO3 und Joomla (weitere Open-Source-CM-Systeme werden folgen) und zum anderen gibt es spezielle CSS-Dateien, die es auch Dreamweaver-Nutzern ermöglichen, trotz dessen verbesserungswürdiger Renderingengine mit YAML zu arbeiten.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -