Hinweise
- Erste Schritte
- Bekannte Probleme / Bugs
- Nutzung für eigene Projekte
5.1 Erste eigene Schritte
Die Anpassungs- und Variationsmöglichkeiten sind nicht auf die gezeigten Beispiele begrenzt. Grundsätzlich lässt sich mit YAML noch einiges mehr anstellen. In einem Weblog befasse ich mich in dem umfangreichen Artikel YAML Variationen & Barrierefreiheit mit möglichen Gestaltungsvarianten. Dabei gehe ich sowohl auf mögliche Anordnungen der Spalten am Bildschirm als auch auf die strukturellen Anwendungsmöglichkeiten des XHTML-Markups ein.
Für erste Gehversuche mit dem YAML-Framework nutzen Sie am besten die Datei example.html. Hierbei handelt es sich um ein vollständiges Grundgerüst ohne Inhalte.
Hinweis: Als weiterführende Informationsquelle, vor allem was die Funktionsweise von float-Umgebungen und den Umgang mit verschiedenen Browsern betrifft, sei an dieser Stelle auf den sehr ausführlichen Artikel "Grundlagen für Spaltenlayouts mit CSS" von Mathias Schäfer im SelfHTML-Weblog verwiesen.
Welche CSS-Dateien benötige ich für den Start?
Wie schon in der Einführung erwähnt, besteht das Basis-Layout aus drei Grundbausteinen:
Damit wird die korrekte Darstellung des Layouts in allen unterstützten Browsern abgesichert. Im Grunde war's das bereits. Ab hier haben Sie alle Freiheiten.
Die weiteren CSS-Bausteine des Frameworks sind nicht zwingend erforderlich. Sie dienen dazu, das YAML-Grundgerüst in Hinblick auf gute Optik und Nutzungsqualität zu gestalten. Sie haben die Wahl:
- Sie können ihr eigenes Layout von Grund auf selbst gestalten indem Sie ihre eigene basemod.css schreiben, Schriften- und ein Drucklayout selbst festlegen.
- Sie können aber auch die vorhandenen CSS-Dateien für die Layoutgestaltung, Schriftformatierung und Drucklayout übernehmen und nach ihren Wünschen und Erfordernissen anpassen.
Meine Empfehlung: Betrachten Sie das Vorhandene als Anregungen für eigene Ideen. Nutzen Sie fertige Codefragmente und erweitern Sie diese nach Ihren Anforderungen und Wünschen.
Bearbeitungshilfen für Dreamweaver
Der Dreamweaver ist eines der meist verbreiteten Softwaretools zur Erstellung von Webseiten. Allerdings hat er auch noch in der Version 7 einige Schwierigkeiten, YAML-basierte Layouts in der WYSIWYG Ansicht seines Editors darzustellen.
Der Dreamweaver bietet für die Bearbeitung von Webseiten im integrierten WYSIWYG-Editors die Möglichkeit, alternative Stylesheets für diese "Entwurfsphase" zu verwenden. Diese alternativen Stylesheets werden also ausschließlich für die Darstellung im Editor verwendet. Auf diese Weise können mit Hilfe speziell angepasster Entwurf-Stylesheets die Anzeigeprobleme des Dreamweavers bei komplexen CSS-Layouts beseitigt werden.
Hierzu finden sich im Verzeichnis Hilfsmittel/Dreamweaver die entsprechenden alternative Stylesheets für die Arbeit im Dreamweaver. Mitgeliefert werden zentrale Entwurfs-Stylesheets für die im YAML-Tutorial verwendeten Layout-Variationen:
- entwurf_2col_left.css
- entwurf_2col_right.css
- entwurf_3col_abb.css
- entwurf_3col_standard.css
Dazu muss das reguläre zentrale Stylesheet in der Entwurfsphase ausgeblendet und statt dessen das entsprechende Entwurf-Stylesheet verwendet werden. Details dazu entnehmen Sie bitte dem Dreamveaver-Handbuch.
5.2 Robuste Flexible Layouts
Zum Abschluss noch einige Hinweise, die bei der Erstellung flexibler Layouts beachtet werden sollten.
Es ist wichtig, die Funktionsweise eines Spaltenlayouts auf Basis von float-Umgebungen zu verstehen. Die statische Spalte #col3 "umfließt" die beiden float-Spalten #col1 und #col2 (auch wenn das im Layout nicht sichtbar wird) .
Hintergrund: Der Internet Explorer ist in diesem Punkt als einziger Browser fehleranfällig bei der Handhabung von Elementen, die zu breit für die statische Spalte #col3 sind. In diesem Fall wird die gesamte Spalte #col3 vertikal unter die float-Spalten geschoben bzw. sogar ausgeblendet. Das Layout wird dadurch zerstört — die Funktion der Webseite ist beeinträchtigt.
Alle anderen modernen Browser lassen hingegen die zu breiten Elemente in die Nachbarspalten hineingleiten und brechen die Spalte nicht um. Dadurch bleibt das Layout intakt.
Dennoch sollte bei flexiblen Layouts diesem Umstand grundsätzlich Beachtung geschenkt werden. Nachfolgend werden einige Hinweise zur Content-Aufbereitung gegeben.
Kleine Bildschirmgrößen
Flexible Layouts passen sich der zur Verfügung stehenden Breite an. Die Formatierung (Abstände, Größen) der Content-Elemente sollte daher auf die gewählte (oder zumindest auf eine sinnvolle) Mindestbreite abgestimmt werden.
Eine übliche Untergrenze für die Bildschirmdarstellung stellt die VGA-Auflösung mit 800x600 Pixel dar. Bei dieser Auflösung verbleibt ein maximal nutzbarer Viewport im Browserfenster von 760 Pixeln, da Fensterränder und ggf. erforderlicher vertikaler Scrollbalken die verfügbare Breite reduzieren. Die Beachtung dieses Umstandes ist wichtig, da horizontale Scrollbalken unter allen Umständen vermieden werden sollten.
Alle Content-Elemente (Überschriften, Tabellen, Formulare) sollten auf diese Mindestbreite ausgerichtet sein, so dass das Layout fehlerfrei und ohne Überlappung von Elementen dargestellt wird.
YAML bietet diesbezüglich zur Kontrolle die Festlegung einer Mindestbreite an (siehe Abschnitt 4.3: Minimale & maximale Breiten).
Für noch kleinere Auflösungen, wie sie beispielsweise auf PDA's üblich sind, sollte über die CSS-Regel @media handheld ähnlich wie bei der Druckvorbereitung ggf. ein spezielles Mini-Layout definiert werden. Für die Darstellung auf mobilen Geräten sempfiehlt sich die Linearisierung des Spaltenlayouts, sodass diese wie im Drucklayout untereinander angezeigt werden.
Breite für flexible Randspalten in %
Die Breite der statischen Spalte #col3 ergibt sich automatisch aus der Gesamtbreite des Browerfensters abzüglich der Breite der dargestellten float-Spalten. Sollen die float-Spalten #col2 oder #col2 eine flexible Breite erhalten, so ist die Definition über em und %-Angaben prinzipiell möglich.
Bei der Breitenangabe auf Basis von em für die float-Spalten ist jedoch folgender Umstand zu beachten: Die float-Spalten dehnen sich immer in Richtung der statischen Spalte #col3 aus. Beim größer werdendem Textzoom wird somit die Spalte #col3 übermäßig gestaucht, denn einerseits wächst die Schriftgröße und dazu wächst die Breite der float-Spalten proportional zur Schriftgröße aufgrund der Breitenvorgabe auf Basis von em. Für die Spalte bleibt an Breite nur, was die float-Spalten an Platz "übrig lassen".
Für flexible float-Spalten empfehle ich daher eine Breitenangabe in %. Damit bleiben die Proportionen zwischen den Breiten der einzelnen Spalten unabhängig von Schrift- und Fenstergröße konstant.
