1.1 Was ist YAML ?

YAML wurde als Basis für die Entwicklung flexibler Layouts entworfen. Fixe Layouts sind mit YAML ebenso leicht möglich, der Schwerpunkt lag jedoch bei den Anforderungen, die sich aus der Arbeit mit variablen Größenangaben ergeben.

Die wichtigsten Features:

  • Flexibles, auf Barrierefreiheit ausgelegtes Basislayout mit ein bis drei Spalten, Header und Footer
  • Browserübergreifend einheitliches Erscheinungsbild des Layouts
  • Beliebige Reihenfolge der Spalteninhalte im Quelltext
  • Funktional gegliederte Stylesheetvorlagen
  • Jede Spalte kann zur längsten werden
  • Spaltentrenner und Spaltenhintergründe können ohne Grafikeinsatz erzeugt werden und laufen immer bis zum Footer
  • Alternatives Layoutkonzept über Subtemplates

Mit dem vorhandenen System lassen sich Designs mit ein bis drei Spalten (mit fixen oder flexiblen Breiten) innerhalb sehr kurzer Zeit entwickeln. Auch an gestalterische Anforderungen, wie die Bereitstellung von extra DIV-Containern für schattierte Ränder, wurde gedacht. Wozu brauche ich das alles?

Es gibt zwei grundsätzliche Arbeitsweisen bei der Erstellung eines Layouts:

Anpassen durch Hinzufügen

In diesem Fall ist ein Basislayout nicht vorhanden bzw. nicht erforderlich. Der Webdesigner baut das Layout bei Null beginnend auf und kümmert sich während der Erstellung des Layouts um die Beseitigung evtl. auftretender Browserbugs.

Anpassen durch Weglassen

In diesem Fall steht eine umfangreich ausgestattete, funktionstüchtige Basis mit verschiedensten Bausteinen zur Verfügung. Der Webdesigner modifiziert das Basislayout und optimiert anschließend den XHTML- und CSS-Code, indem er nicht benötigte Bausteine der Basis aus dem Layout entfernt.

YAML wurde nach dem zweiten Prinzip entworfen. Die Begriffe »Baukasten-System« oder »Framework« bezeichnen YAML wohl am treffendsten.

1.2 Was ist YAML nicht?

YAML ist kein Fertiglayout. Dies zu behaupten, widerspräche dem Entwurfsgedanken »Anpassen durch Weglassen«, welcher hinter dem eben beschriebenen Baukasten-Konzept steht.

Anmerkung des Autors: Das YAML-Framework stellt die technische Grundlage des Layouts zur Verfügung, so dass dem Webdesigner wieder mehr Zeit und Raum für die kreative Gestaltung bleibt.

Nichts liegt mir ferner, als die monotone Optik von Reihenhäusern im Bereich des Webdesigns zu fördern, indem YAML als Fertiglayout angepriesen wird.

Natürlich ist es erlaubt, YAML samt seiner zusätzlichen Bausteine als »ready to use« Layout einzusetzen. Im Hinterkopf jedes Webdesigners sollte neben der individuellen Gestaltung des Webauftritts jedoch immer auch der Anspruch stehen, möglichst einfachen und schlanken Code zu erzeugen, um die Wartbarkeit groß und die Fehleranfälligkeit gering zu halten. Nicht benötigte Elemente der XHTML-Struktur bzw. der CSS-Dateien sollten daher - nachdem das eigene Layout steht - aus dem Code entfernt werden.

1.3 Vorteile des Frameworks

YAML ist mehr als ein einfaches Layout-Tutorial. Es ist ein praxisorientiertes Layout-Framework. YAML stellt verschiedenste Bausteine für die Layouterstellung bereit und sorgt für deren reibungsloses Zusammenspiel. Einige Vorteile des YAML-Frameworks sind:

Browserkompatibilität

Die Grundbausteine von YAML garantieren eine browserübergreifend korrekte Darstellung des Layouts. Alle für die Darstellung des Layouts erforderlichen Browser-Hacks sind in den Grundbausteinen bereits eingearbeitet. Die während der Layouterstellung üblicherweise erforderlichen umfangreichen Kompatibilitätstests in den verschiedensten Browsern können so auf ein Minimum reduziert werden.

Baukasten-Prinzip

Das Baukasten-Prinzip ermöglicht eine besonders effiziente Nutzung des vorhandenen Codes bei der Layouterstellung.

Die Grundbausteine stellen einen Basis-Layout mit voller Funktionalität bereit. Zusätzliche Bausteine ergänzen oder modifizieren diese Basis. Diese CSS-Bausteine sind universell einsetzbar. Einmal geschrieben und gestestet, können sie bei Bedarf eingebunden werden und stehen für zukünftige Projekte zum Einsatz bereit.

Beispiele dafür sind die verschiedenen Layoutvariationen mittels der basemod-Dateien oder auch die vorgefertigten Druck-Stylesheets.

Flexibilität in der Layoutgestaltung

Die Gestaltungsmöglichkeiten des Frameworks gehen weit über ein einfaches 3-Spalten-Layout hinaus. Die flexible Basis ermöglicht sowohl die freie Platzierung der Spalten am Bildschirm. Der dynamische Charakter der verwendeten float-Umgebungen ermöglicht mit nur wenigen Handgriffen die Modifikation hin zu 1- oder 2-Spalten-Layouts.

Robustheit im Code

Der Aufbau der XHTML- und CSS-Struktur der Grundbausteine garantiert eine fast vollständige Unabhängigkeit von den späteren Inhalten. Die Kapselung der Hauptelemente der Webseite in separaten DIV-Containern sichert die korrekte Positionierung der Elemente am Bildschirm, unabhängig von der Art der späteren Nutzung der Container.

Updates

Ein weiterer Vorteil des Baukasten-Prinzips innerhalb des YAML-Frameworks ist die einfache Handhabung von Updates.

Alle Änderungen, die die Robustheit des Layouts bzw. der browserübergreifend einheitlichen Darstellung betreffen, werden in den Grundbausteinen base.css und iehacks.css vorgenommen.

Da diese Bausteine im Layoutprozess mit YAML unverändert bleiben (Modifikationen über basemod-Dateien), können Sie diese beiden Dateien jederzeit in bestehende Layouts einspielen und profitieren sofort von den jeweiligen Verbesserungen.

Alle weiteren Änderungen jeder Version werden im Changelog dokumentiert und ggf. auf detailiertere Informationen im Tutorial hingewiesen. So können auch diese Änderungen einfach nachvollzogen und bei Bedarf in bestehende Layouts eingearbeitet werden.