Das Layout Fairly Liquid

Das Layout Fairly Liquid stellt die HTML-Basis dar, auf welcher Themes als Design aufsetzen. Es handelt sich dabei um ein JS unterstütztes Layout-System.

Fairly Liquid als unterstützendes Layout für ein bis zwei Spalten

Seiten werden über das Netz an Geräte unbekannter Dimensionierung und Eigenschaft ausgeliefert. Als offensichtliches Beispiel gilt der Unterschied zwischen einer erwünschten Bildschirm- und einer Print-Ausgabe. Diese Medientypen verlangen ihre eigene Dimensionierung. Damit dies möglich ist, braucht es eine unterstützende Basis.
Fairly Liquid macht möglichst wenig Grundannahmen bezüglich einer verfügbaren Bildschirmbreite. Bei deaktiviertem Javascript wird deshalb dem Inhalt die ganze Breite geschenkt, während Beigaben unter diesem zweispaltig erscheinen. Mit Javascript jedoch verändert sich das Layout, wenn das Dokument geladen oder die Viewport­grösse verändert wird. Steht genug Platz zur Verfügung, dürfen die Beigaben auch als rechte randliche Spalte erscheinen.
Was jedoch, wenn das CSS nicht gelesen oder nur selektiv ausgewertet wird, wie dies im Falle von Screenreader oder Braille-Zeilen als unterstützende Technologien der Fall ist? Der Quelltext zeigt die grundlegende Reihenfolge:

  1. Schnelle Links zu den einzelnen Dokument-Sektionen
  2. Den Titel der Seite (das Logo)
  3. Die Navigation
  4. Den Inhalt
  5. Die Beigaben
  6. Einen Fussbereich

Wichtige Sektionen haben eine Überschrift zweiter Ordnung, die wichtige Orientierungspunkte für unterstützende Technologien darstellen. Damit dürfte dieses Layout die rudimentären Zugänglichkeits­kriterien erfüllen.

Ein Layout formatiert nicht selbst, gibt aber ein Raster ab, in welchem sich via CSS Themes realisieren lassen. CSS und die Geräte-Implementierung sind derzeit nicht so weit ausgereift, um Inhalte vollständig unabhängig von der Struktur darzustellen. CSS kann sich also nur im Rahmen der grundlegenden Abfolge der Bereiche bedienen. CSS braucht aber im Layout geeignete Selektoren, vorzüglich Identifikatoren und Klassennahmen, aber auch eine semantisch sinnvolle Wahl von Elementen, soweit dies HTML 4.01 zulässt.
Fairly Liquid ist nicht mit sinnleeren Elementen ausgestattet, um CSS Selektoren auf Vorrat zu liefern. Dadurch ist der Ausschmückung des Grundlayouts eine Grenze gesetzt.
Zu jedem Layout gehören jedoch auch die in den Hauptbereichen importierten Templates. Diese können editiert und erweitert werden und mit den zugeordneten CSS Templates verbunden werden. Dadurch ergibt sich dann die mögliche Reichhaltigkeit innerhalb des vom Anwender geschriebenen Bereichs.

Spezielles

MSIE

Das Layout enthält als einziges Childelement des Body-Elements einen Conditional-Comment für MSIE 7, der eine Id msie für das CSS bereit stellt.
<!--[if IE 7]><div id="msie"><![endif]-->
Der Selektor wurde deshalb auf MSIE 7 beschränkt, da von MSIE 8 erwartet wird, dass er bezüglich CSS Unterstützung keiner Sonderhacks mehr bedarf.
MSIE 6 hingegen dürfte bis zur praktischen Anwendung dieses Layouts irrelevant werden.
Der Vorteil des Conditional-Comments im HTML liegt darin, dass CSS-Files nicht extra für MSIE separiert werden müssen.

Ein Theme Selektor

User-Stylesheets können auch über verschiedene Themes stimmig angepasst werden. Das CMS ergänzt das Layout deshalb um den Namen des aktuellen Themes.
Beispiel für das Theme Maroony
<body id="body" lang="de-CH" class="maroony">
Der Name der Klasse ist hierbei identisch zum Namen des Theme-Ordners.

Technische Daten:

HTML Version
HTML 4.01
HTML Variante
strict
Slots
head, content, aside1, aside2, foot
Wichtige CSS Selectoren
  • body#body.$themename
    • div#msie
      • ul.usability
      • div#head
        • #logo
        • #motto
      • h2#navigation
      • ul.navigation
      • div#main
        • div#content
        • div#sidebar
          • li#aside1
          • li#aside2
      • div#foot
Javascript
Bildschirm-Grösse abhängige Splitpoints schreiben Klassen um.
  • mehr als 1200px:
    #content, #sidebar, #aside1 und #aside erhalten die Klasse inline
  • 800 - 1200px:
    #content und #sidebar erhalten die Klasse inline
    #aside1 und #aside erhalten die Klasse block
  • 500 - 800px:
    #content und #sidebar erhalten die Klasse block
    #aside1 und #aside erhalten die Klasse inline
  • weniger als 500px:
    #content, #sidebar, #aside1 und #aside erhalten die Klasse block

Testen Sie dieses Layout

Sie können dieses Layout einfach testen, indem Sie bei eingeschaltetem oder deaktiviertem Javascript das Fenster verkleinern oder vergrössern. Benutzen Sie auch die Zoom-Funktionen ihres Browsers. Lassen Sie sich den Quelltext im Browser anzeigen. Nutzen Sie auch die Möglichkeit einer Druckvorschau in Ihrem Browser.