Der Prinz und der Gloeckner
Kunst und Literatur

Layout

Ich habe im September 2003 damit begonnen, das alte Layout des Projektes durch ein neues zu ersetzen. Statt des traditionellen Tabellenlayouts mit nur wenigen CSS-Elementen zu verwenden, habe ich mich entschlossen, komplett auf Layout-Tabellen zu verzichten und nur noch mit CSS für das Layout zu arbeiten, vor allem um die Zugänglichkeit des Projektes zu erhöhen, aber auch, um die Möglichkeiten moderner browser für das Projekt zu nutzen.
Die verwendeten Standards HTML4.01 und CSS2 sind nunmehr seit dem Frühjahr 1998 verfügbar. Wann also sie benutzen, wenn nicht jetzt?
Inzwischen gibt es auch einige browser, die die Standards wirklich beherrschen, namentlich sind das derzeit (September 2003) die browser der fünften Generation (Gecko-Maschinen wie Mozilla 5 >1.0 und Netscape 7, Galeon etc, aber auch der davon unabhängig entwickelte Opera 7, dessen Leistungen vergleichbare Qualität erreichen. Auch browser wie der KDE-browser Konqueror (2 oder 3) und der damit eng verwandte Safari für das MacIntosh-Betriebssystem liefern mit kleinen Abstrichen gute Ergebnisse, auch Opera 6 mag bereits für viele Layouts ausreichen.

Durch kleinere Tricks sollten nunmehr (Mai 2004) alle Stilvarianten dem älteren browser microsoft internet explorer 6 zugänglich sein. Fehler dieses browsers werden soweit möglich vor dem Nutzer des Seite verborgen, der dann einen minimalistisches, aber funktionsfähiges Layout zu sehen bekommt. Dies wird erreicht durch gezieltes gegeneinander Ausspielen von bekannten Fehlern dieses browsers. Dieses wird genutzt, um Anweisungen vor diesem browser zu verbergen, die er falsch interpretieren würde. Standardkonforme browser hingegen führen die Anweisungen wie gewünscht aus, so daß die Stilvorlage auch unverändert standardkonform bleibt.

Allerdings soll auch Text-browsern wie lynx und älteren browsern eine funktionierende Seite geboten werden, die deren Möglichkeiten berücksichtigt. Die browser der dritten Generation (vor allem ist das Netscape 3) und noch ältere beherrschen kein CSS - sie ignorieren es, weshalb diese praktisch keine Anzeigeprobleme haben werden, da die Seite so erstellt wurde, daß sie auch ohne CSS-Interpretation ein gutes und sinnvolles Layout bietet. Ebenso wird es den Text-browsern oder Spezial-browsern (zum Beispiel für Blinde) gehen, die ebenfalls CSS zu ignorieren pflegen. Kritisch sind die browser der vierten Generation, deren CSS-Unterstützung stark lückenhaft ist. Allen voran ist das Netscape 4, aber auch die microsoft internet-explorer 4, 5 und 6 zählen dazu. Bei diesen kann ein Layout nicht funktionieren, welches den Standard CSS2 voll ausschöpft.
Bei Netscape 4 ist heutzutage dringend zu empfehlen, CSS zu deaktivieren, weil dieses praktisch durchgehend falsch interpretiert wird.
Um trotz der Lücken und teils gravierenden Anzeigefehler dieser browser ein sinnvolles Layout bieten zu können, habe ich mich entschlossen, verschiedene frei wählbare Varianten anzubieten, so daß für jeglichen browser mindestens zwei bis drei komplett funktionierende Stilvorlagen vorhanden sind. Im Zweifelsfalle sind das die Stilvorlagen N, 0 und 1. Bei 0 und 1 können aufgrund von Mängeln der browser immer noch fehlerhafte Anzeigen vorkommen, diese sollten aber trotzdem noch ein ansehnliches, wenn auch deutlich einfacheres Layout bieten als die korrekte Darstellung desselben Layouts.

Die eigentlichen Stilvorlagen entstehen durch die Kombination aus CSS2 und dynamisch mit PHP erzeugten Komponenten, die je nach Stilvorlage vor allem kleine Änderungen am Kastenmodell der XHTML-Seite vornehmen, den Inhalt jedoch ungeändert lassen. Es wird kein java-script, flash oder eine ähnliche Technik verwendet, die Barrieren für die Benutzbarkeit der Seite sein können. Zur Auswahl einer Stilvorlage steht ein kleines Menü zur Verfügung. Im folgenden werden die einzelnen Stile kurz beschrieben. Allen Stilen gemeinsam ist, daß für die Schrift und die Dimensionen von Schriftstrukturen allgemein keine absoluten Größenangaben definiert werden. Es wird entweder die bevorzugte oder die mittlere Schriftgröße übernommen, die der Nutzer am browser voreingestellt hat. Dieses sollte den Lesekomfort des Nutzers erhöhen und respektiert dessen Voreinstellungen hinsichtlich einer optimalen Lesbarkeit.

Stil 0

Hierbei handelt es sich um eine linearisierte Darstellung des Inhaltes der Seite. CSS-Formatierungen gibt es praktisch nur für Farben, Größenangaben und für den Abstand von Strukturen vom linken Rand. Egal ob ein browser überhaupt CSS interpretieren kann oder wie fehlerhaft seine Interpretation sein mag. Dieser Stil liefert zwar nicht für jeden browser dasselbe einfache Layout, aber für jeden ein sinnvolles und ansehnliches.

Stil 1

Diese Stilvorlage wird voreingestellt angeboten, wenn der Nutzer selbst keinen Stil ausgewählt hat. Daher bietet auch dieser Stil mit jedem browser ein sinnvolles Layout. das tatsächliche Erscheinungsbild der Seite hängt jedoch bereits stark vom den Fähigkeiten des browsers ab.
Das Seitenlogo ist zusammen mit dem Inhaltsmenü relativ zum browser-Fenster auf der linken Seite fixiert, das Stilvorlagen-Menü rechts oben. Lediglich der eigentliche Inhalt der Seite ist scrollbar.
Wird das Stilvorlagen-Menü mit dem Mauszeiger berührt, vergrößert es sich und ist so einfacher bedienbar.
Als dekorative Elemente ändern sich in den Strukturen Logo, Menü und Inhalt Hintergrund- und Textfarben leicht, wenn die Maus in diesen Bereich gelangt. Mit dem Verweis-Symbol ¤ im Inhaltsmenü kann zu einer Version gewechselt werden, wo Logo und Menü relativ zur Seite fixiert werden, also mitrollen.
Für ältere browser typische Mängel sind, daß sich die Hintergrundfarben nicht ändern, ebenso wenig wie die Größe des Stilvorlagenmenüs. Auch die Fixierung von Logo und Menü relativ zum browser-Fenster funktioniert bei Netsape 4 und auch bei allen microsoft internet-explorern nicht. Bei diesen scrollen diese Elemente einfach mit dem Inhalt mit.

Stil1. (Punkt!) ist lediglich eine buntere Variation zu Stil 1 - Die Farben des rechts unten fixierten, nicht wiederholten Hintergrundbildes ändern sich, wenn sich die Maus in dem entsprechenden logischen Bereich befindet. Neben CSS muß der browser dafür teiltransparente PNG-Graphiken darstellen können.
Bei älteren browsern wird das nicht alles zutreffen und wohlmöglich wird das Hintergrundbild wiederholt oder falsch positioniert angezeigt.

Stil 2

Dieser Stil ist bereits für neuere browser ausgelegt und kann bei Netscape 4 oder MSIE 4/5 zu groben Fehlern in der Anzeige der Seite führen, die diesen Stil für solch überforderte browser schnell unbenutzbar machen, wenn dort nicht CSS deaktiviert wird.
Dekoration und Anordnung von Logo, Menü und Stilvorlagenmenü sind gegenüber dem ersten Stil variiert. Das Inhaltsmenü ist horizontal oben angeordnet, mit dem Stilknopf kann wieder von derHintergrundbild fixierten Version zur rollbaren umgeschaltet werden. Das Logo wird bei Bedarf durch das Annähern mit der Maus vergrößert.

Stil2. (Punkt!) ist lediglich eine buntere Variation zu Stil 2 - Das Hintergrundbild ist rechts open fixiert und wird wiederholt. Wenn sich die Maus im Inhaltsbereich befindet, wird der Hintergrund mit einer teiltransparenten Graphik ausgebleicht und die Farbe des Textes ändert sich .
Der teiltransparente Hintergrund von Logo, Menü und Stilvorlagenmenü wird komplett weiß,wenn sich die Maus im jeweiligen Bereich befindet.
Bei älteren browsern wird das nicht alles zutreffen.

Stil 3

Bei dieser Variante sind das Logo und die Menüs ergonomisch auf der rechten Seite neben dem rollbaren Inhalt angeordnet. Auch hier ist das Umschalten zwischen fixierter und komplett rollbarer Varianten möglich.
Auch hier können browser-Fehler die Nutzbarkeit der Seite stark einschränken.

Stil 4

Grundidee dieses Stils ist neben der Ergonomie, daß im wesentlichen Inhalt angezeigt werden soll. Das Logo kann bei Bedarf vergrößert werden und das Menü wird nur bei Bedarf angzeigt. Beides funktioniert durch Annäherung mit der Maus. Das Menü funktioniert mit den Geckos (Mozilla5, Netscape 7) und mit Opera 7, Bereits Konqueror und Safari dürften damit leider noch Probleme haben. Für die internet explorer ist das Layout unbrauchbar, weil diese browser ganz allgemein Probleme mit dem Pseudoformat hover haben. Wegen noch größerer Lücken scheint das Layout allerdings mit Netscape 4 wieder sinnvolle Ergebnisse zu liefern, die zwar ganz anders aussehen als es korrekt wäre aber trotzdem sinnvoll funktionieren.
Im Menü gibt es einen Umschaltknopf zur dauerhaften Anzeige des Menüs.
Für die fehlerhaft arbeitenden browser, wo dieses nicht erreichbar ist, ist neben der Bezeichnung "Menü" mit dem Pfeil die Variante mit dauerhafter Anzeige des Menüs zugänglich.
Rechts unten erscheint bei Bedarf beim Darüberfahren über das Stilvorlagenmenü ein Kasten mit einer Kurzinformation zur Stilvorlage, die bei den anderen Stilen im Titel-Attribut des Verweises steht. Das kommt den Gecko-Maschinen entgegen, die den Inhalt von Titel-Attributen in der Regel nicht ohne größere Umstände anzeigen.

In Zukunft ist bei diesem Stil noch eine weitere Verbesserung der Menüstruktur geplant, die weitere Untermenüs umfassen soll.

Stil N

Bei dieser Version erfolgt gar keine Formatierung mit Stilvorlagen, es sei denn, es handelt sich um eine Direktformatierung im Inhaltsteil, die in der Regel auf den Einzelinhalt bezogen ist und nicht auf das allgemeine Layout.
Die Darstellung ist bei allen browsern ähnlich der von browsern, die kein CSS unterstützen. Hier zeigen sich die Stärken von html. Der browser formatiert die Seite selbständig sehr schön ohne weitere Stilanweisungen.
Diese Variante wird nicht nur Puristen begeistern, sie eignet sich auch hervorragend dafür, eine selbst angefertigte Stilvorlage zu verwenden, die einfach beim eigenen browser angegeben werden kann. Der Nutzer der Seite ist selbst gefordert! Eigene Ergebnisse und Varianten können mir gern als CSS-Datei zugesandt werden!
Als Ausgangspunkt für die wesentlichen Elemente sei dafür die CSS-Ausgabe zu Stil 0 oder 1 empfohlen.

Stil D

Dieser Stil eignet sich besonders zum Drucken von Seiten Mit Ausnahme des Logos und gegebenenfalls vorhandener bunter Bilder wird nur schwarzer Text auf weißem Grund verwendet. Das Menü wird nicht angezeigt. Durch einen Auswahlknopf mit dem Symbol ¤ knapp unter dem Logo kann jederzeit zur vorherigen Stilvorlage gewechselt werden.

Stilauswahl mit dem browser-Menü

Unabhängig von den Stilvorlagen des Stilvorlagenmenüs können die Stile 0, N und D in der Stilvorlagenauswahl des browsers als Alternativen ausgewählt werden. Diese Auswahl ändert natürlich nicht die formatierungsspezifischen XHTML-Anweisungen auf der Seite sondern nur die CSS-Angaben, daher können kleine Unterschiede zur Version des Stilvorlagenmenüs auftreten. Diese Auswahl eignet sich besonders für Situationen, wo auf einzelnen Seiten Probleme mit der Interpretation der Stilvorlagen durch den browser auftreten. Durch Auswahl eines Verweises sollte wieder die vorherige Stilauswahl zum Tragen kommen.
Wenn der verwendete browser nicht über ein solches Menü verfügt (zum Beispiel Netscape 4, microsoft internet-explorer), so entfällt diese Möglichkeit.

Stil: 0  1. 2. 3  4  N  D