EfA 2003
Ende 2002 war klar, dass Netscape mit der Version 4 den Browserkrieg verloren hatte, der Internet Explorer hatte den Markt überrollt. Aus Sicht der Webentwickler hatte diese Umkehrung der Marktanteile auch etwas Positives: der MS IE wurde von Version zu Version immer besser, bis mit dem 6-er ein Browser auf den Markt kam, mit dem man zum ersten Mal reine CSS-Layouts anbieten konnte, ohne das HTML mit zusätzlichen Hacks zu verunstalten.
Autor: tc
Da die 4-er Browser mittlerweile in manchen Monaten gar nicht mehr in der Statistik von EfA auftauchten, fiel die Entscheidung für einen Relaunch mit aufwändigerem, dreispaltigem Layout. Gleichzeitig sollten ältere Browser eine stark reduzierte Gestaltung erhalten, das sich im Wesentlichen auf die Möglichkeiten von CSS1 beschränkte.
Für aktuellere Browser wurde ein Layout entwickelt, mit dem demonstriert werden sollte, dass zugängliches Webdesign nicht bedeutet, Textwüsten unformatiert auf farblosen Hintergründen zu präsentieren. Gleichzeitig war dieser Relaunch auch eine Machbarkeitsstudie für die zwischenzeitlich in Kraft getretene »Barrierefreie Informationstechnik-Verordnung« (BITV) des Bundes. Erklärtes Ziel war, sämtliche Vorgaben dieser deutschen Adaption der Web Content Accessibility Guidelines des W3C zu erfüllen oder die Fälle zu dokumentieren, wo eine Erfüllung technisch nicht möglich, inhaltlich nicht sinnvoll war oder nur mit nicht mehr zu rechtfertigendem Aufwand zu erfüllen.
Positiv bei diesem Relaunch wirkte sich aus, dass das Ausgangsmaterial bereits weitestgehend semantisch strukturiert und standardkonform war. So ließen sich tief greifende Änderungen im Layout und der Informationsarchitektur und Navigation mit Hilfe von ausgefeilten Suchmustern durchführen, was bei einem Tabellen- und Font-Tag basierten Layout ohne die eingebaute Logik barrierefreier Seiten nicht möglich gewesen wäre. Gleichzeitig wurde im Zuge des Umbaus und der Erweiterung durch ein Weblog der Sprung von XHTML 1 transitional zu XHTML 1 strict vollzogen.
Semantik ist die Lehre von der Bedeutung der Dinge. Auf das Web übertragen bedeutet dies, dass alle HTML-Tags eine Bedeutung in sich tragen, also ihren Inhalt selbst definieren. Hier klaffen weite Lücken im HTML-Standard, denn nicht für jede Bedeutung gibt es ein entsprechendes HTML-Element.
Die wichtigen Unterschiede auch für die Barrierefreiheit liegen nicht zwischen HTML 4 und XHTML 1, sondern zwischen den jeweiligen Varianten strict und transitional. Eine Website in HTML 4 strict kann also durchaus weniger Barrieren haben als eine vergleichbare Site in XHTML 1 transitional.
Der Aufbau der Artikel wurde weitestgehend beibehalten, Seiten mit Verteilerfunktion wie die Homepage oder Startseiten der Unterbereiche bekamen nun jedoch aufgrund des erweiterten Funktionsumfangs ein 3- und mehr spaltiges Layout.
CSS und die Informationsarchitektur
Bei diesem Relaunch wurde das Konzept hinter Cascading Style Sheets bereits in einer Phase eingesetzt, für die diese Technik eigentlich nicht vorgesehen war: in der Informationsarchitektur. In Macromedia Dreamweaver, das für diese Zwecke eine wirklich hervorragende Siteverwaltung bietet, wurde zunächst die gesamte Struktur der Website angelegt. Bereiche, die in sämtlichen Seiten identisch waren, kamen in ein Template, die einzelnen Inhaltsmodule (Primär- und Sekundärnavigation, mögliche Inhaltstypen etc.) wurden als Bibliotheksobjekte angelegt und aus diesen der Prototyp in Form von sogenannten Wireframes aufgebaut. Der Vorteil an dieser Arbeitsweise war, dass Änderungen an der Struktur zwischen Kunde und Entwicklern am lebenden Objekt besprochen werden konnten und die Funktionalität in Echtzeit getestet werden konnte.
Der größte Vorteil für die Entwicklung der CSS bestand aber darin, daß am Ende dieser Projektphase damit bereits die Struktur der Style Sheets feststand. Aus den Wireframes war nun ersichtlich, in welche Bereiche die Seiten zu unterteilen waren, welche möglichen Inhalte und damit welche Tags in diesen Bereichen auftauchen konnten und in welcher Abfolge diese erschienen. Da die Wireframes HTML- & CSS-basiert waren, war somit das Gerüst der Style Sheets bereits fertig und musst nun nur noch mit den Vorgaben des Photoshop-Layouts aufgefüllt werden.
Gleichzeitig wurden die Style Sheets modularisiert, d. h. Angaben die global für die gesamte Website benötigt wurden (Seitengerüst, Primäravigation etc.) kamen in ein eigenes Style Sheet, Angaben die nur für Unterbereiche zutrafen kamen in wiederum in separate Style Sheets, die nur in diesen Unterbereichen aufgerufen werden.
Browser über ihre Fähigkeiten sortieren
Der Aufruf dieser Style Sheets geschieht seit dieser Version mit der herkömmlichen Methode der link relations ohne Browserabfragen, d. h. die Browser sortieren sich selbst über ihre jeweiligen Fähigkeiten und Fehler:
<link rel="stylesheet" href="/css/hauptmenue.css" media="screen, projection" title="EfA House Style"><link rel="stylesheet" href="/css/basic.css" media="screen" title="EfA Basic Style">
Über die beiden Werte "screen, projection" des media-Attributs filtert sich der Netscape 4 ganz von alleine aus, da er durch die Angabe von zwei Medientypen das gesamte Tag ignoriert und nur das darauf folgende basic.css lädt. Dieses Basis-Style Sheet ist weitestgehend mit CSS 1 aufgebaut, das auch von älteren Browsern weitestgehend korrekt interpretiert wird. Das Ergebnis ist eine ›schlanke‹ Gestaltung mit Angaben zur Typografie, aber ohne Positionierung. Hier zu sehen im Netscape 4 unter MacOS 9:
Gleichzeitig wird hier auch der Opera im Full Screen-Modus bedient, da dieser hierbei den Medientyp "projection" verlangt. Beide Style Sheets werden durch die Angabe eines title-Attributs zu sogenannten Preferred Style Sheets.
Das erste Style Sheet hauptmenue.css besteht nur aus drei Zeilen Code. Hier werden lediglich weitere Style Sheets importiert, die nach der oben beschriebenen Art modular aufgebaut sind. Dieser Ansatz hat gerade bei komplexen Style Sheets den Vorteil, dass immer wiederkehrende Angaben in einer Datei stehen, die spätestens bei der ersten Folgeseite aus dem Cache des Anwenders gezogen wird und nur noch seitenspezifische Styles nachgeladen werden. Gleichzeitig erwies sich diese Aufteilung auch als unschätzbarer Vorteil für den nächsten Relaunch, über den Sie in der nächsten Folge lesen…
Diskutieren Sie mit!
Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.