5.1 Hilfsmittel
Neben dem YAML-Framework und den Beispiellayouts liegen dem Download-Paket im Ordner tools/ weitere kleine Hilfsmittel bei, die die Arbeit der Layouterstellung erleichtern können.
Dynamisch generierte Blindtexte
js/ftod.js
Dieses kleine Javascript-Tool generiert Blindtexte (Lorem ipsum ...) innerhalb beliebiger DIV-Container. Dabei können über zwei dynamisch eingefügte Textlinks Blindtext-Absätze hinzugefügt oder entfernt werden.
Das Script kommt bei verschiedenen Layoutbeispiele im Ordner examples/ des Download-Paketes zum Einsatz. Die Anwendung des Scripts ist einfach. Die Einbindung erfolgt im Header der Webseite:
<script type="text/javascript" src="your_path/ftod.js"> </script>
Direkt im Anschluss daran erfolgt die Konfiguration — die Festlegung in welchen Bereichen der Webseite die Blindtexte generiert werden sollen. Dazu muss das betreffende HTML-Element über eine eindeutig zuordenbare ID identifizierbar sein.
In den Layoutbeispielen sind dies die Container #col1_content bis #col3_content der drei Content-Spalten des Basislayouts.
<script type="text/javascript">
window.onload=function(){ AddFillerLink( "col1_content", "col2_content", "col3_content"); }
</script>
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.
Dreamweaver MX 2004 (V7.0)
tools/dreamweaver_7/base_dw7.css
Der Dreamweaver bietet für die Bearbeitung von Webseiten im WYSIWYG-Mode des Editors die Möglichkeit, alternative Stylesheets für die so genannte "Entwurfsphase" zu verwenden. Diese Stylesheets werden also ausschließlich für die WYSIWYG-Darstellung im Editor verwendet und stellen somit eine Möglichkeit dar, die Anzeigeprobleme des Dreamweavers bei komplexen CSS-Layouts zu umgehen.
Für den Dreamweaver MX 2004 finden Sie im Verzeichnis tools/dreamweaver_7/ ein alternative Basis-Stylesheet base_dw7.css, in welchem die für den Dreamweaver problematischen Deklarationen auskommentiert sind. Die Einbindung ist in der beiliegenden lies_mich.txt beschrieben.
Dreamweaver 8
In der aktuellen Version hat sich die Darstellungsqualität im WYSIWYG-Mode des Editors weiter verbessert, sodass in der Regel keine speziellen Anpassungen der CSS-Bausteine von YAML erforderlich sind. Das derzeit einzige bekannte Problem beruht auf einem Bug der Verarbeitung der @media-Regeln im Dreamweaver. Dadurch kann es passieren, dass der Dreamweaver Regeln der Screen-Ansicht mit Regeln für den Druck überlagert.
Sollte dies der Fall sein, reicht es in den meisten Fällen aus, die Print-Stylesheets in der Entwurfsansicht auszublenden. In der Datei lies_mich.txt im Ordner tools/dreamweaver_8/ sind die notwendigen Arbeitsschritte dafür beschrieben.
5.2 Tipps zum Entwurf flexibler Layouts
Zum Abschluss noch einige Hinweise, die bei der Erstellung flexibler Layouts beachtet werden sollten.
Umgang mit großen Elementen
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. Sie finden hierzu im Abschnitt 3.5.2 verschiedene Lösungsansätze.
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. Generell sollte bei flexiblen Layouts dieser Problematik erhöhte Beachtung geschenkt werden, denn auch bei minimaler Layoutbreite sollten die Inhalte immer noch ausreichend Platz in ihren Spaltencontainern finden.
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 eine sinnvolle Mindestbreite hin abgestimmt werden.
Eine übliche Untergrenze für die Bildschirmdarstellung stellt die SVGA-Auflösung mit 800x600 Pixel dar. Bei dieser Auflösung verbleibt ein maximal nutzbarer Viewport im Browserfenster von ca. 760 Pixeln, da Fensterrahmen und ggf. erforderlicher vertikale Scrollbalken des Betriebssystems 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, Grafiken) sollten auf diese Mindestbreite abgestimmt sein, so dass das Layout fehlerfrei und ohne Überlappung von Elementen dargestellt wird.
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 empfiehlt sich die Linearisierung des Spaltenlayouts, sodass die Spalten wie im Drucklayout untereinander angezeigt werden.
Flexible Randspalten
Die Breite der statischen Spalte #col3 ergibt sich innerhalb eines flexiblen Layouts in der Regel automatisch aus der Gesamtbreite des Browserfensters abzüglich der Breite der dargestellten float-Spalten. Sollen auch die float-Spalten #col1 oder #col2 eine flexible Breite erhalten, so sind dabei Maßeinheiten EM oder Prozent-Angaben möglich.
Bei Verwendung der Maßeinheit 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. Mit steigendem Textzoom wird somit die Spalte #col3 übermäßig gestaucht, denn erstens wächst die Schriftgröße in allen Containern und zweitens wächst die Breite der float-Spalten proportional zur Schriftgröße aufgrund des Bezugs auf EM. Für die #col3 bleibt an Breite nur, was die float-Spalten an Platz "übrig lassen".
Für flexible float-Spalten empfehle ich daher Maßangaben in Prozentwerten. Damit bleiben die Proportionen zwischen den Breiten der einzelnen Spalten unabhängig von Schrift- und Fenstergröße konstant.
