5.1 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 Aufbereitung der Inhalte 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.6: 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 empfiehlt sich die Linearisierung des Spaltenlayouts, sodass diese wie im Drucklayout untereinander angezeigt werden.
Flexible Randspalten
Die Breite der statischen Spalte #col3 ergibt sich automatisch aus der Gesamtbreite des Browserfensters abzüglich der Breite der dargestellten float-Spalten. Sollen die float-Spalten #col1 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. Mit steigendem 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.
5.2 Kleine Hilfsmittel
Neben den CSS-Bausteinen des Frameworks liegen dem Download-Paket weitere kleine Helfer bei, die die Arbeit des Webdesigners erleichtern können.
Javascript ftod.js
Das kleine Javascript kommt im Rahmen der Dokumentation des YAML-Frameworks in den verschiedenen Layoutbeispielen zum Einsatz.
Es erzeugt automatisch generierte Blindtexte innerhalb beliebig DIV-Container. Zusätzlich lassen sich die in Absätzen eingefügten Blindtexte auch wieder entfernen.
Die Verwendung des Scripts ist ausgesprochen einfach. Die Einbindung erfolgt im Header der Webseite:
<script type="text/javascript" src="Pfad/ftod.js"> </script>
Direkt im Anschluss daran erfolgt die Konfiguration - die Festlegung in welchen Bereichen der Webseite die Blindtexte generiert werden sollen. In den Beispiellayouts des YAML-Frameworks sind dies die Content-Container #col1_content bis #col3_content der drei Spalten.
<script type="text/javascript">
window.onload=function(){ AddFillerLink( "col1_content", "col2_content", "col3_content");
}
</script>
Um die Blindtexte innerhalb eines HTML-Elementes zu erzeugen, muss dieses über eine eindeutig zuordenbare ID verfügen.
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 alternativen Stylesheets für die Arbeit im Dreamweaver. Mitgeliefert werden zentrale Entwurf-Stylesheets für die in der YAML-Dokumentation 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 stattdessen das entsprechende Entwurf-Stylesheet verwendet werden. Details dazu entnehmen Sie bitte dem Dreamveaver-Handbuch.
