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
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.
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.
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.
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.
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.
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.
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.
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.
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.