EfA 2004 – Teil 1
Im Frühjahr 2004 stand dann die nächste Überarbeitung an. Ziel dieses Relaunches war, Unzuzlänglichkeiten in der Navigationsarchitektur zu beseitigen und die Resultate von Tests und Rückmeldungen der Nutzer einzuarbeiten und gleichzeitig die Gestaltung auf ein noch zeitgemäßeres Erscheinungsbild zu bringen.
Autor: tc
Sowohl der statische Content im Bereich Artikel als auch der dynamische Content im Weblog blieben bis auf typografische Feinheiten und Farbänderungen weitestgehend unangetastet. Daher brauchte nur das Style Sheet »chrome.css« überarbeitet werden, in dem das Seitengerüst definiert ist.
Der gesamte Relaunch konnte durch die Qualität des Ausgangsmaterials in nur fünf Manntagen geleistet werden. Hier zeigen sich dann auch die wirklichen Einsparungspotenziale von CSS, nicht nur aus Sicht der Entwickler, sondern auch aus der betriebswirtschaftlichen Perspektive.
Der Code von Einfach für Alle
Prinzipieller Aufbau
Die Seite besteht prinzipiell aus einem Kopf und drei Spalten: Über den Spalten befindet sich ein Seitenkopf mit Logo und Titel der Initiative, einer Breadcrumb-Navigation und einer Primärnavigation zu den wichtigsten Bereichen der Site. Darunter die drei Spalten: links ein Weblog mit täglich aktualisierten Nachrichten, in der Mitte die Inhaltsspalte mit Teasern der aktuellen Artikel und rechts eine Spalte mit der Sekundärnavigation und einigen Tools wie der Suche. Wie später deutlich wird, enthält der Inhaltsbereich am unteren Ende noch ein paar spezielle Bereiche, die je nach Bedarf eingeblendet werden.
Ein Blick in den Quelltext der Seiten zeigt zunächst:
- Es werden keine Tabellen verwendet (außer natürlich zur Darstellung tabellarischer Daten).
- Alle Bereiche sind durch generische Container (
div>) mit Klassen und IDs oder semantische Tags (address>, <code>) gekennzeichnet. - Es werden diverse CSS-Dateien und JavaScripts referenziert.
Sehen wir uns die einzelnen Bereiche der Website genauer an und beginnen mit dem Dokumentenkopf (wir lassen aus Gründen der Übersichtlichkeit Bestandteile weg, die für den Rahmen dieses Artikels unwichtig sind).
Einfach für Alle: die Startseite
<?xml version="1.0" encoding="iso-8859-15"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ¬ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="de" lang="de">
Es handelt sich um ein XHTML-Dokument in der Variante strict. Dieser Dokumententyp aktiviert in allen Browsern, die so etwas kennen, den Standard-Modus (der Fachmann nennt das Doctype-Switching). Das vor der DTD stehende ?xml version…> wiederum wirft den MS IE 6 in den Quirks-Modus und er verhält sich nun wie seine Vorgänger 5 und 5.5. Dies hat im vorliegenden Fall den Vorteil, dass man spezielle Hacks oder Workarounds für die manchmal doch recht eigenwillige Interpretation von CSS im IE ohne Browserweichen oder ähnliches allen IE unter Windows zukommen lassen kann.
<head profile="/profile/">
Hier wird ein Meta-Profil der Site referenziert. Damit können auf zusätzliche Metadaten für eine Website verwiesen werden (mehr dazu finden Sie auf den Seiten des W3C; denkbar ist auch die Einbindung fremder Profile wie dem XFN relationships meta data profile. Danach folgt der Titel der jeweiligen Seiten – auf der Startseite ist dies eine allgemeine Beschreibung der Initiative; auf den Folgeseiten steht hier eine kurze Beschreibung des Themas der jeweiligen Seite:
<title>Barrierefreies Webdesign: Einfach für Alle – ¬ eine Initiative der Aktion Mensch</title>
Nun geht es los mit den Style Sheets:
<link rel="stylesheet" href="/css/hauptmenue.css" ¬ type="text/css" media="screen, projection" ¬ title="EfA House Style"><link rel="stylesheet" href="/css/basic.css" ¬ type="text/css" media="screen" ¬ title="EfA Basic Style"><link rel="alternate stylesheet" href="/css/vision.css" ¬ type="text/css" media="screen, projection" ¬ title="EfA XXL Style"><link rel="alternate stylesheet" href="/css/print.css" ¬ type="text/css" media="print, screen" ¬ title="EfA Print Style">
Die CSS-Struktur von ›Einfach für Alle‹ ist einigermaßen komplex: Zunächst werden zwei Dateien als Haupt-Style Sheets referenziert. Das erste dient dabei wie bereits beschrieben nur als »Ladestation« für weitere Style Sheets. Hier sein Inhalt (hauptmenue.css):
@import url("basic.css");@import url("chrome.css");@import url("linkespalte.css");
Es werden drei Style Sheets importiert – jedenfalls von modernen Browsern. Netscape 4 und Internet Explorer 4 können mit @import nichts anfangen und bekommen die komplexeren Angaben dieser Style Sheets gar nicht erst zu Gesicht. Für solche Browser kommt dann nur das danach verlinkte Style Sheet basic.css zur Anwendung.
Das gilt für die Startseite, auf den Unterseiten im Magazin-Bereich wird statt linkespalte.css dann artikel.css verwendet, das ebenfalls Style Sheets nachlädt – aber dazu später.
Die beiden letzten Zeilen binden alternative Style Sheets – zum Drucken und mit vereinfachtem Layout bei vergrößerter Schrift – ein, die später vom Besucher ausgewählt werden können.
Es folgen einige link rel-Angaben, die aber mit CSS nichts zu tun haben, sondern Metadaten zur Beschreibung und Bedienung der Seiten enthalten.
Nun werden verschiedene JavaScripts geladen:
<script type="text/javascript" src="js/cookies.js"></script><script type="text/javascript" src="js/efa_fontsize.js"></script><script type="text/javascript" src="js/toolbox.js"></script><script type="text/javascript" src="js/styleswitcher.js"></script>
cookies.js ist ein Skript zum Setzen von (ja was wohl) Cookies und wird von den folgenden Skripten benötigt. Mit efa_fontsize.js kann die Schriftgröße der Seite verändert werden toolbox.js blendet eine Möglichkeit ein, den Stil der Seite durch Auswählen eines der oben referenzierten alternativen Style Sheets zu ändern. Der dazu erforderliche Code steckt dann in styleswitcher.js.
Damit ist auch schon der Dokumentenkopf beendet und es beginnt der Body des Dokumentes:
</head><body id="startseite">
Durch die Zuweisung von Klassen und ID's im body-Element können nun ganz individuell einzelne Styles nur für bestimmte Bereiche der Website definiert werden. So haben alle Artikel im body-Tag die id="artikel", Seiten im Weblog die id="blog" usw. Die Zuweisung der Klasse class="efa04" kann zum Beispiel von erfahrenen Besuchern benutzt werden, um sich ein nur für EfA geltendes User Style Sheet zu schreiben und in ihrem Browser zu definieren.
<script type="text/javascript">if (efa_fontSize) efa_fontSize.efaInit();</script>
Hier wird die Schriftgröße initialisiert. EfA nutzt ein selbst entwickeltes Skript zur Schriftgrößenanpassung .
Dann beginnt das eigentliche Seitengerüst:
<div id="obenrechts"><div id="top">
Korrespondierend dazu im CSS die folgenden Angaben (in verkürzter Form):
#top {background: url("/img/chrome/lefttop.png") top left no-repeat;}#obenrechts {background: #fff url("/img/chrome/righttop.png") top right no-repeat;min-width: 590px;max-width: 65em;margin: auto;}
Hier werden zum einen zwei Hintergrundbilder definiert, die zusammen den Grauverlauf hinter den eigentlichen Inhalten ergeben. Zwei deswegen, weil die Breite des Inhalts sich dynamisch der Fenstergröße anpasst, da keine feste Größe angegeben ist, sondern nur eine Minimal- und eine Maximalausdehnung. Die Angabe min-width: 590px; garantiert, dass auch auf Monitoren mit der Auflösung 640x480 das Layout intakt bleibt.
Die Angabe max-width: 65em; hingegen legt fest, dass sich die Zeilenlängen bei Fenstergrößen jenseits der 1024 Pixel nicht ins Unendliche dehnen und damit die Lesbarkeit der Texte nicht mehr gegeben ist. Da diese Größenangabe in der Maßeinheit em erfolgt ist, besteht eine direkte Abhängigkeit zur voreingestellten Schriftgröße am Zielrechner. Der Effekt ist, dass bei relativ großen Fenstern das gesamte Layout skaliert wird, sobald der Benutzer die Schriftgröße verändert. Über margin: auto; wird zusätzlich die gesamte Seite zentriert.
Darauf folgt im Code der Kopfbereich der Seiten mit den Identity-Elementen der Initiative:
<div id="banner"><div id="bannerlinks"><h1>Einfach für Alle - Informationen zum Barrierefreien <span lang="en">Webdesign</span></h1></div></div>
Die dazugehörigen CSS-Angaben befinden sich ebenfalls in »chrome.css« und sehen so aus:
#banner {height: 80px;width: 100%;margin: 0 1% 0 1%;background: #5D6679 url("/img/chrome/bannerrechts.png") top right no-repeat;}html>body div#banner {width: 96%;margin: 0 auto 0 auto;}#bannerlinks {background: url("/img/chrome/bannerlinks.png") top left no-repeat;height: 80px;}#bannerlinks h1 {margin-left: -3000px;}
Durch die Schachtelung der DIV-Elemente und die Definition von unterschiedlichen Hintergrundbildern wird hier erreicht, dass auch der Kopfbereich sich dynamisch an Änderungen der Fenstergröße anpasst. Dazu wurde für das äussere div ein Hintergrundbild angegeben, das oben rechts ausgerichtet ist, für das innere DIV wiederum ein Hintergrundbild, das oben links ausgerichtet ist.
Dabei steht der Claim der Initiative »Einfach für Alle – Informationen zum barrierefreien Webdesign« im zweiten Hintergrundbild (bannerlinks.png). Im HTML-Quelltext steht jedoch an dieser Stelle die identische Information in Textform innerhalb einer <h1>, die für grafische Browser aber um -3000px nach links aus dem sichtbaren Bereich geschoben ist. Der Vorteil dieser Konstruktion ist nicht nur die Skalierbarkeit des Layouts, sondern auch die Möglichkeit, hierdurch Textinformationen für nicht-grafische User Agents und Suchmaschinen zu hinterlegen. Ohne CSS wird das Hintergrundbild gar nicht erst aufgerufen und stattdessen die gleichwertige Information in Textform gezeigt.
Hänsel und Gretel verirrten sich im Wald
Als nächstes folgen der mit div id="metanav eingeleitete Bereich der übergeordneten Navigation und die »Breadcrumbs« (so wird eine Navigationshilfe genannt, die den Pfad von der Startseite zur aktuellen Seite anzeigt).
<div id="breadcrumbs"><img src="/img/chrome/gps.gif" alt="Sie sind in: " width="11" height="12"><acronym title="Einfach für Alle">EfA</abbr> > Startseite<a href="#navigation"> <img src="/img/blank.gif" alt="Zur Navigation" width="1" height="1"></a><a href="#linkespalte"> <img src="/img/blank.gif" alt="Zu den Nachrichten" width="1" height="1"></a><a href="#rechtespalte"> <img src="/img/blank.gif" alt="Zu den Artikeln" width="1" height="1"></a></div>
Zuerst steht hier eine Grafik, die den Beginn der Breadcrumbs symbolisieren soll. Für nicht-grafische Anzeigegeräte enthält das alt-Attribut zusätzlich die Angabe Sie sind in:, das hier als Umschreibung des grafischen Symbols zu sehen ist.
<acronym> bezeichnet eine Abkürzung, die sich aus den ersten Buchstaben der Worte des abgekürzten Begriffs ergibt und erläutert hier den Titel EfA. Dafür und für den Tag abbr> (Abkürzung) existieren folgende Stile (Abkürzungen sollen buchstabiert werden, Akronyme normal ausgesprochen):
abbr {speak: spell-out;}acronym {speak: normal;}
Anmerkung: leider werden diese Angaben zur Aussprache bisher nur ungenügend unterstützt.
Eine Abschaltung der üblicherweise gepunkteten Unterstreichung von Abkürzungen und Akronymen mit title-Attribut per CSS kann dazu führen, dass diese innerhalb von Links ebenfalls nicht unterstrichen werden und der Link somit optisch unterbrochen wird. Daher die folgende Angabe:
a abbr, a acronym {text-decoration: underline;;}
In »chrome.css« geht es etwas fortschrittlicher weiter:
abbr[title], acronym[title] {border-bottom : 1px dashed #aaa;cursor : help;}
Hier sehen Sie einmal einen Attribut-Selektor im Einsatz. Wenn ein Tag abbr> oder acronym> einen Titel trägt (dieser sollte dann die ausgeschriebene Bedeutung der Abkürzung enthalten), wird der Begriff gebrochen unterstrichen und der Mauszeiger verwandelt sich beim Überfahren zur Verdeutlichung in ein Hilfe-Symbol (meist das Fragezeichen).
Skip Links
Neben der Pfadangabe der aktuellen Position innerhalb des Webangebotes finden sich hier noch einige versteckte Links zu einzelnen Unterbereichen der jeweiligen Seite, sogenannte »Skip Links«. Hiermit soll den Benutzern assistiver Werkzeuge wie Screenreadern die Möglichkeit gegeben werden, sich schnell und einfach auf den Seiten zu orientieren und zum Beispiel direkt zum Inhalt zu springen, ohne sich jedes Mal wieder die Navigation anhören zu müssen. Gleichzeitig erleichtern diese Links die Navigation auf den kleinen Displays mobiler Endgeräte, in dem sie endloses Scrollen verhindern und einen direkten Zugriff auf den Inhalt ermöglichen.
Realisiert sind diese Skip Links mit nahezu unsichtbaren 1x1 Pixel großen Leer-GIFs, die zum jeweiligen Sprungziel verlinkt sind. Wohin der Link führt wird über das alt-Attribut mitgeteilt (Zum Inhalt, Zur Navigation).
Eine Liste von Navigationspunkten ist? Eine Liste!
Ein weiterer Sonderfall ist die horizontale Primärnavigation im Kopfbereich der Seiten. In Ermangelung eines geeigneteren HTML-Elementes, mit dem man eine Navigation auszeichnen könnte, wurde hier eine geordnete Liste ol> benutzt, um diese Reihe von Links aufzubauen.
Die HTML-Arbeitsgruppe des W3C diskutiert zurzeit über ein neues Element navigation> für das kommende XHTML 2. Bis dieses Element in der Praxis einsetzbar ist muss man sich aber nach etwas nahe liegendem im vorhandenen Vokabular umsehen.
Die Idee, eine Liste (nummeriert oder nicht nummeriert) als Menü zu verwenden, geht auf Eric Meyer zurück und gilt inzwischen unter vielen Entwicklern als die syntaktisch korrekte Art, ein Menü in HTML zu realisieren. Denn was ist ein Menü anderes als eine Aufzählung von Navigationslinks? Der HTML-Code:
<div id="metanavlist"><ol><li id="nav-home" class="current"><a href="/">Start</a></li><li id="nav-inhalt"><a href="/inhalt/" rel="contents">Inhalt</a></li><li id="nav-blog"><a href="/blog/">News</a></li><li id="nav-links"><a href="/links/" rel="appendix">Links</a></li><li id="nav-help"><a href="/hilfe/" rel="help">Hilfe</a></li></ol></div>
N.B.: über class="current" können einzelne Reiter gezielt herausgegriffen und optisch verändert werden, um ihnen das Aussehen eines ausgewählten Reiters zu geben.
Üblicherweise werden Listen in grafischen Browsern so gerendert, dass die einzelnen Listenpunkte (li>, List Items) jeweils in eigenen Zeilen dargestellt werden. Mit ein wenig CSS lässt sich dieses Verhalten aber ändern und die Links können auch horizontal nebeneinander stehend gestaltet werden. Zunächst einmal werden durch:
#metanavlist ol {display: block;list-style: none;padding: 0;margin: 0;}
die Ordnungszahlen entfernt (list-style: none;) und die Abstände auf Null gesetzt, um die unterschiedliche Interpretation in MS IE und Gecko-basierten Browsern auf einen gemeinsamen Nenner (= Null) zu bringen.
Dann folgen einige allgemeine Angaben zum Aussehen der einzelnen Navigationspunkte, die das Aussehen von Reitern haben sollen:
#metanavlist li {width: 6em;max-width: 7em;min-width: 5em;height: 1.65em;padding: 0;margin: 0;color: #000;background: #bfbfbf url("/img/chrome/gradient_tabs.gif") no-repeat right top;font-size: 93%;border-left: 1px solid #fff;text-align: center;letter-spacing: 1px;
und hier nun der eigentliche Trick, der die List Items nebeneinander bringt:
display: block;float: left;position: relative;top : 1px;}
Durch display: block; wird den Listenpunkten ihr übliches Aussehen (in CSS 2 display: list-item;) genommen, so dass sie sich wie Block-Level-Elemente verhalten. Durch float: left; werden diese dann nebeneinander aufgereiht.
Das a>-Element ist normalerweise ein Inline-Element, das sich in der Breite immer seinem Inhalt anpasst. Damit aber die gesamten Reiter anklickbar sind und nicht nur der tatsächliche Linktext wird hier das Inline-Element a> in ein Block-Element verändert und diesem Block eine Breite von 100% des umgebenden Elemnts (li>) gegeben – damit füllt es den ganzen Reiter aus:
#metanavlist li a {display: block;width: 100%;background: transparent url("/img/chrome/gradient_tabs_left.gif") no-repeat left top;}
Zum Abschluss müssen noch die float-Zustände aufgehoben werden. Hierfür ist im HTML einiger zusätzlicher, aber eigentlich unnötiger Code, da insbesondere der MS IE die Möglichkeiten von CSS, float-Zustände z. B. über :after aufzuheben, nicht unterstützt. Erreicht wird dies durch:
<div class="fixfloat"> </div>
und das korrespondierende CSS:
.fixfloat {float: none;clear: both;width: 1px;margin: 0;padding: 0;font-size: 0px;line-height: 0px;height: 1px;}
Ohne ein explizites Beenden der float-Eigenschaft würde der Browser versuchen, die folgenden Elemente neben #metanav zu »quetschen«.
Soweit die Erläuterungen zum Kopfbereich der Seiten. In der nächsten Folge lesen Sie dann, wie es im eigentlichen Inhalt der Seiten weitergeht.
Diskutieren Sie mit!
Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.