Zuersteinmal danke ich allen, die sich mit dem Entwurf auseinandergesetzt haben und ihre Anregungen und Kritik mit mir geteilt haben, egal ob hier, auf anderen Webseiten oder per E-Mail.

Es sind jedoch auch ein paar Fragen aufgetaucht, die ich hier beantworten will.

1. Weshalb hast du die Seite nicht direkt redesignt?
Das war nicht Sinn dieser Aufgabe. Es sollte demonstriert werden, dass ein vorgegebenes Layout browserübergreifend, semantisch und barrierearm aufgebaut werden kann.

2. Warum hast du kein liquides Layout (passt sich der Fensterbreite an) genommen statt einem elastischen (passt sich der Schriftgröße an)?
Bei hohen Auflösungen läuft die Schrift zu weit und das Lesen fällt schwer. Beim elastischen Layout jedoch wird die Relation zwischen Laufweite und Schriftgröße auch bei einer Vergrößerung erhalten.

3. Ein paar Zahlen, bitte!
Okay. Ich habe die Beispielseite um Linkziele erweitert, um einigermaßen eine Vergleichsbasis zu haben. Dann ergibt sich folgendes Bild:

  • (X)HTML-Datei von 115kB auf 49,2kB (-57%)
  • CSS-Datei(en) von 34,3kB auf 12,9kB (-62%)
  • JS-Aufrufe von 23 auf 0 (-100%)
  • Class-Attribute von 610 auf 150 (-75%)
  • Style-Attribute von 413 auf 19 (-95%)
  • Listen (ul) von 0 auf 28
  • Überschriften (h1) von 1 auf 20 (+2000%)
  • Absätze (p) von 0 auf 76

4. Wieso hast du überhaupt Style-Attribute im Quelltext?
Das sind alles Angaben über Bildbreiten. Ich habe versucht sie so gering wie möglich zu halten. Zumindest ist diese Angabe – neben der Angabe in der Stylesheet-Datei – die einzige Möglichkeit die Bilder mit der Schrift vergrößern zu lassen.

5. Weshalb ist es überhaupt wichtig, dass Überschriften, Listen und Absätze vorhanden sind?
Weil es nicht nur Leute gibt, die sich die Seite anschauen. Sehbehinderte beispielsweise können sich ausschließlich die Überschriften vorlesen lassen und dann direkt zu diesem Abschnitt springen.

6. Bedeutet das, dass deine Umsetzung barrierefrei ist?
Nein. Barrierefreier vielleicht oder barrierearm, aber nicht barrierefrei. Das hat zwei Gründe: Zuersteinmal war die Seite nie barrierefrei konzipiert und es gibt designerische Schwächen hinsichtlich der Barrierefreiheit, die auch durch ein Recoding mit Webstandards überwunden werden können. Allerdings ist das Zoomverhalten und die semantische Auszeichnung bereits ein Schritt in die richtige Richtung.

7. Weiß die Redaktion des Focus davon?
Wenn, dann nicht von mir. Ich arbeite aber zusammen mit anderen Webkrauts an einem Anschreiben. Das Anschreiben der Wbkrauts ist raus.

8. Wie verhält es sich mir dem Copyright?
Für die Texte und Bilder beanspruche ich überhaupt keine Rechte, lediglich der Quelltext die Umsetzung ist wie im Dokument beschrieben geschützt.

Im Rahmen der Serie Failed Redesigns in Germany hat die (empfehlenswerte) Website Vorsprung durch Webstandards die Webseite des Magazins FOCUS unter die Lupe genommen. Das Ergebnis:

Focus hat den Trend erkannt. Websites werden ja heutzutage tabellenlos gebaut. Soweit, so gut: Hurra, keine Tabellen. Mehr Fachwissen hatte die Relaunch- Chaostruppe allerdings nicht. Der Code ist vollkommen verschwurbelt (a href vor h), strotzt vor div– Verschachtelungen, wo ein li genügt hätte, und ist voll gestopft mit Inline-Stylesheets, altbewährten Blind-Gifs und esoterischer Abstands- div– Kunst.
Vorsprung durch Webstandards: Failed Redesigns in Germany – Episode 1

“Stimmt”, werden die kenner der Webstandardsszene sagen. Aber auch nur die. Für Außenstehende ist weder die Polemik noch das anschließende Codebeispiel hilfreich. Darauf macht Jeena Paradies in seinem Kommentar aufmerksam:

Ich glaube ehrlich gesagt, dass dieses Anprangern, vor allem bei großen und bekannten Seiten, eigentlich gar nichts bringt, außer vielleicht ein wenig Selbstbeweihräucherung und wie Alp letztens sagte, gegenseitiges auf die Schultern Klopfen, weil wir Webstandards benutzen.

So lange wir nicht dahinter kommen, warum sich Qualität, wie wir sie verstehen, nicht auch kommerziell durchsetzt, so lange bekämpfen wir nur die Symptome, anstatt das Problem an der Wurzel zu packen.

Genauere, konkete Vorschläge macht er zudem einem Weblog-Eintrag:

Ja, es ist einfach anderen zu Zeigen was sie so alles falsch machen […], schwieriger wird es aber vorzuleben wie es wirklich gehen kann und soll. Angefangen bei den konkreten Beispielen sollte man vielleicht daran denken die richtige Alternative dazuzuposten, über Vorleben in eigenen Projekten, was ja schon ziemlich viele machen, bis hin zur kommerziell erfolgreichen Seite, die auf Webstandards aufsetzt. Und genau da fehlt es meiner Meinung nach. Modernes Webdesign professionell an den Mann/Frau gebracht

Und recht hat er! Doch wer bitte setzt sich hin und schreibt den Code einer kommerziellen Seite um, verbessert ihn und postet dann noch eine Woche Details des Redesign-Prozesses, Tricks und Kniffe? Soviel Zeit hat doch niemand.

Naja, sagen wir fast niemand. Ich habe mir meinen freien Sonntag, die paar freie Stunden am Montag und Dienstag, die mir neben meinem Zivi-Job noch blieben, genommen und dieses Projekt nicht nur in Angriff genommen sondern auch vollendet. Dies soll keine Selbstbeweihräucherung sein, sondern zeigen, dass eine standardnahe Umsetzung eines solchen Layouts in zwei bis drei Arbeitstagen möglich ist.

Screenshot des Focus mit Webstandards

Noch ist nicht alles perfekt und der Code könnte noch ein wenig schlanker, das CSS besser dokumentiert sein. Aber genug der Vorrede, kommen wir zum Recoding der FOCUS-Startseite. Herausstechendstes Merkmal: Die Seite ist komplett skalierbar, inklusive Bilder und Flash(-Werbung). Einfach mal ausprobieren. Links funktionieren allerdings keine.

HINWEIS: Wie Jeena mir gerade per E-Mail mitteilt haben Firefox-Versionen unter Version 1.5 einen Fehler und zeigt unmengen von Scrollbalken an. Ich arbeite an einer Lösung für dieses Problem. OK, das hab ich geändert, es sollten keine Scrollbalken mehr da sein. Dafür zeigt der Internet-Explorer noch einen kleinen Fehler.

Update 19.01.2006, 21:11: Ich habe die Version 1.35 der Seite hochgeladen, die jetzt zumindest beim ersten Laden die Fehler in Opera und Safari ändern könnte. Beim Reload zeigt Opera 8.5 einen Fehler an (#content-Spalte rutscht nach unten). Weshalb auch immer. Hinweise zur Ergreifung des Täters lieferte im Übrigen Ingo.

Ach ja: Der gesamte Quelltext ist unter einer Creative Commons Lizenz veröffentlicht, die Namensnennung bei der Verwendung voraussetzt. Für eine angeregte Diskussion bin ich natürlich offen.

Die Bundesregierung hat nun endlich ihr Subventionsprogramm von 25 Mrd. Euro beschlossen und nennt das Wachstumspakt. Angelegt ist das Projekt für vier Jahre…

Moment, vier Jahre? Rechnen wir das mal auf Einwohner pro Jahr herunter: 75,75 Euro pro Person und Jahr… und pro Monat 6,31 Euro.

Ja, es sind pro Mitbürger 6,31 Euro pro Monat, die für Bildung und Straßenbau ausgegeben werden. Das bringt – vorsichtig gesagt – rein garnichts. Was her muss ist ein radikaler Systemwechsel, Entbürokratisierung und die Senkung der Lohnnebenkosten.

Ach ja, und eine deutliche Verbesserung des Bildungssystems. Alles andere ist bloß ein Strohfeuer zur Beruhigung der Bürger.

Heute geht es um die Erstellung eines einfachen 3-Spalten-Layouts mittels XHTML und CSS.

Vorbetrachtungen

Zuerst müssen wir uns im Klaren sein, welche Bereiche unser 3-Spalten-Layout enthalten soll:

  • Eine Kopf- und eine Fußzeile
  • eine Navigationsspalte
  • eine Hauptspalte für den eigentlichen Seiteninhalt
  • eine Spalte für Zusatzinformationen.

Screenreader sollen außerdem zuerst den Inhalt vorlesen, dann die Navigationspunkte und zuletzt die Zusatzinformationen.

Abbildung 1: Visueller Aufbau

Systematische Darstellung des Seitenlayouts: Oben Kopfzeile, unten Fußzeile. Links die Navigation, rechts Zusatzinformationen. Dazwischen die Inhalte. 

Abbildung 2: Struktureller Aufbau

Systematische Darstellung der Struktur des Seitenlayouts: Zuerst Kopfzeile, dann Inhalte. Danach die Navigation, zuletzt die Zusatzinformationen. 

Für das Design streben wir Spalten an, die bis zur Fußzeile reichen. Dass dies keine Selbstverständlichkeit ist wird sich später noch zeigen.

Die Dokumentstruktur

Der Einfachheit halber werden die hier folgenden Beispiele nur Auszüge aus dem <body>-Element sein. Für die gesamte (X)HTML-Datei kann der Quelltext der Beispielseite herangezogen werden.

Wie man am strukturellen Aufbau erkennen kann haben wir fünf Bereiche: Die Kopfzeile mit der Seitenidentität (also Logo und Tagline), die drei Spalten und den Fußbereich mit rechtlichen Hinweisen.

Wir könnten das folgendermaßen im Quelltext umsetzen:

<div id="identitaet">...</div>
<div id="inhalt">...</div>
<div id="navigation">...</div>
<div id="extra">...</div>
<div id="rechtliches">...</div> 

Dieser Quelltext wäre eine optimale Lösung:

  • Die Elemente sind ihrem Zweck nach benannt.
  • Es gibt keine Elemente die ausschließlich für das Design eingefügt wurden.

Allerdings ist die Erstellung eines Dreispalters mit diesem Quelltext äußerst schwierig umzusetzen. Eine möglichst einfache und browserübergreifende Lösung benötigt noch ein weiteres Element. Zudem werden die Bereiche von einem weiteren <div>-Element eingefasst (<div id="wrap">), mit dem sich das Layout ebenfalls verändern lässt.

<div id="wrap">
  <div id="identitaet">...</div>
    <div id="hauptbereich">
      <div id="inhalt">...</div>
      <div id="navigation">...</div>
    </div>
  <div id="extra">...</div>
  <div id="rechtliches">...</div>
</div>

Float as float can.

Diese Struktur erlaubt es uns die gesamte Seite mittels „Floats“ (Schwebende Elemente) zu positionieren, was mir als die nachvollziehbarste Lösung vorkommt. Nun müssen wir uns noch über die Breite der Spalten klar werden. Die Inhaltsspalte soll die Hälfte des wrap-Elements einnehmen, die beiden anderen Spalten jeweils 25%.

Das Prinzip der Floats ist schnell erklärt: Die Elemente werden aus dem Dokumentenfluss herausgenommen und an eine Seite verschoben. Andere Texte/Elemente laufen dann daran vorbei. Die Bilder in Zeitungen werden auf eine ähnliche Weise gesetzt.

Zuerst legen wir eine allgemeine Regel im CSS fest. Wieder ist es der Vereinfachung geschuldet, dass die Stilangaben im Beispieldokument nicht ausgelagert sondern im Dokument vorhanden sind.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Verdana, Arial, sans-serif;
}

Nun müssen wir das CSS für die verschiedenen Bereiche schreiben.

Kopf- (#identitaet) und Fußzeile (#rechtliches)


#identitaet {
  background-color: #369A3D;
  color: #fff;
  padding: 1.2em;
}
#rechtliches {
  background-color: #707883;
  color: #fff;
}

Das reicht uns hier bereits. In einem „echten“ Layout würde man wahrscheinlich noch Hintergrundbilder oder andere Gestaltungselemente einfügen. Dies benötigen wir aber in diesem Beispiel nicht.

Die Spalten

Zuerst kümmern wir uns um die Spalte für Zusatzinformationen (#extra) und den Hauptbereich (#hauptbereich). Den Hauptbereich wollen wir mit 75% Breite an den linken Seitenrand schieben, die Extraspalte an den rechten:

#hauptbereich {
  float: left;
  width: 75%;
}

#extra {
  float: right;
  width: 25%;
  background-color: #D39815;
}

Mit der Inhalts- und der Navigationsspalte verfahren wir ähnlich. Lediglich die Breite der beiden Spalten müssen wir anpassen, da sich diese auf das übergeordnete Element (in diesem Fall also auf den Hauptbereich mit 75%iger Breite) beziehen:

#inhalt {
  float: right;
  width: 66.67%;
  background-color: #002455;
  color: #fff;
}
#navigation {
  float: left;
  width: 33.33%;
  background-color: #B0001E;
}

Wenn man sich das Layout nun anschaut fallen zwei Probleme auf:

  1. Die Fußleiste ist seltsam verschoben.
  2. Die Spalten sind teilweise viel zu kurz und gehen nicht bis zur Fußleiste.

Die Fußzeile ganz nach unten zu versetzen ist kein Problem: #rechtliches wird folgende Anweisung hinzugefügt: clear: both;. Dadurch wird die Fußzeile nach unten, unter alle Spalten geschoben.

Das zweite Problem kann auf zwei Arten gelöst werden: Entweder man benutzt Hintergrundbilder um Spalten zu simulieren (sog. Faux Colums) oder man wendet einen Trick an, den Alex Robinson bei seiner Suche nach dem einzig wahren Layout gefungen hat. Dieser benutzt einen sehr großen Innenabstand (padding) und einen ebenso großen negativen Außenabstand (margin) die Spalten entsprechend zu erweitern:

#inhalt, #navigation, #extra, #hauptbereich {
  padding-bottom: 32767px; /* Beschränkung durch Safari, der keinen größeren Wert zulässt. */
  margin-bottom: -32767px;
}
 

Nun sind die Spalten aber einfach nur sehr lang. Wir müssen sie also unten kappen, und hier kommt das wrap-Element ins Spiel. Durch folgende Anweisung erreichen wir das gewünschte Ergebnis fast:

#wrap {
  overflow: hidden;
}

Was nun noch fehlt ist die Fußzeile: Sie scheint irgerndwie hinter die Spalten gerutscht zu sein. Folgende Anweisungen rücken das wieder gerade:

#wrap {
  overflow: hidden;
  position: relative;
}
#rechtliches {
  background-color: #707883;
  position: relative;
  z-index: 1;
} 

Jetzt haben wir ein fast perfektes Layout, das in den meißten Browsern funktionieren sollte. Lediglich Opera in der Version 8 macht Probleme. Falls man diesen Browser unterstützen will (oder muss) hilft folgender CSS-Hack. Opera 9 enthält diesen Fahler im übrigen nicht mehr, es liegt also im Ermessen des Autors ob er diesen Hack überhaupt benötigt:

@media all and (min-width: 0px) {
  #inhalt, #navigation, #extra, #hauptbereich {
    padding-bottom:0;
    margin-bottom: 0;
  }

  #inhalt:after, #navigation:after, #extra:after, #hauptbereich:after {
    padding-top:32767px;
    margin-bottom: -32767px;
    content: 'Opera 8 Fix';
    display:block;
    background: inherit;
    height: 0;
  }
}

Fluid, fix oder elastisch?

Es mag nun die Frage aufkommen, ob das Layout fluide, fix oder elastisch ist. Fluid bedeutet, dass sich die einzelnen Spalten an die Fensterbreite anpasst. Fix ist ein Layout, wenn die Breite in Pixeln angegeben wurde. Ein elastisches Layout passt sich an der Schriftgröße an. Und das schöne ist: Dieses Layout kann alle drei Layoutarten erfüllen, die Frage ist nur in welcher Einheit die Breite des wrap-Elements angegeben wird:

Fixes Layout:

#wrap {
  overflow: hidden;
  position: relative;
  width: 760px;
  margin: auto; /* Zentrierung des Layouts */
}

Fluides Layout:

#wrap {
  overflow: hidden;
  position: relative;
  width: 80%;
  margin: auto; /* Zentrierung des Layouts */
} 

Elastisches Layout:

#wrap {
  overflow: hidden;
  position: relative;
  width: 45em;
  margin: auto; /* Zentrierung des Layouts */
}
 

Weiterführende Links

Jaja, ich weiß. Geiler Titel für das erste Posting 2006, aber man muss sein Niveau ja halten.

Anlass für diesen Titel ist aber nicht meiner eigenen Verrücktheit zu schulden sondern resultiert aus einem kleinen oder feinen Schreibfehler in der Pro7-Webung von ICQ (siehe Screenshot).

Der neue Film von Curtis “0,50 Euro” Jackson heißt nämlich nicht etwa “Get Rich Or Die Train’” (also “Werde reich oder stirb, Zug” bzw. “Werde reich oder stirb trainierend”) sondern Get Rich Or Die Tryin’ (was soviel bedeutet wie “Werde reich oder stirb beim Versuch”).