Im ersten Teil dieses Artikels ging es um Papierdenken auf Webseiten und um die damit verbundenen enttäuschten Erwartungen.

Dieser zweite Teil beschäftigt sich mit mediengerechten Webseiten jenseits von Papier und der Frage, warum überhaupt Webseiten früher mit Tabellen gelayoutet wurden.

Mediengerechte Webseiten: Jenseits von Papier

Kennen Sie Shrek? Den sympathischen Oger, der in Begleitung eines geschwätzigen Esels wider Willen auszog, um eine Prinzessin zu retten und diese später selber heiratete? Oger sind grün, klobig und gelten eigentlich nicht unbedingt als Sympathieträger. In einer Szene erklärt Shrek seinem Begleiter das Wesen eines Oger ungefähr so:

• Shrek: "Ein Oger ist wie eine Zwiebel."
• Esel: "Du meinst, Sie stinken?"
• Shrek: "Nein! Schichten! Zwiebeln haben Schichten, Oger haben Schichten!"

Webseiten auch.

Webseiten haben Schichten

Das Web ist nicht Print, aber es ist auch nicht nur Bildschirm. Das Web ist das erste Medium mit dem Prinzip "Single Input – Multiple Output": Der Inhalt wird einmal gespeichert und in verschiedenen Formaten wieder ausgegeben. Auf einem Bildschirm, gedruckt auf Papier, in einer PDF-Datei, akustisch von einem Screenreader, und vielleicht auf Arten und Weisen, die wir heute noch nicht einmal kennen.

Die Trennung von Inhalt und Gestaltung bedeutet, dass Webseiten Schichten haben:

• Der Kern, die innerste Schicht einer Webseite, ist der Inhalt, der Text, das HTML. Dieser Kern ist flexibel und passt sich den Umständen an.
• Um diesen Kern gibt es Schichten, wie z. B. CSS für den Bildschirm, CSS für den Drucker, JavaScript zur einfacheren Bedienung (AJAX) und so weiter.

Die Schichten um diesen Kern sind Verfeinerungen, machen die Seite hübscher und besser bedienbar, aber nicht immer werden alle Schichten genutzt.

Beim Erstellen von mediengerechten Webseiten geht es nicht darum, dass eine Webseite in allen Browsern gleich aussieht. Das geht nicht, und ebenso gut können Sie versuchen, das Ende des Internet zu finden.

Eine Webseite muss nicht überall gleich aussehen, sondern überall funktionieren. Der Inhalt muss für die Besucher zugänglich bleiben.

Standardkonform, barrierefrei und flexibel = mediengerecht

Im Web kursieren viele Schlagworte, mit denen im Grunde genommen die Bewegung weg vom Papierdenken umschrieben wird:

• Standardkonformes Webdesign ("Designing with Web Standards")
• Barrierefreies Webdesign ("Accessibility", dt. "Zugänglichkeit")
• Flexibilität ("Bullet Proof Web Design")
• Optimierung für Suchmaschinen ("Search Engine Optimization")

Letztendlich fordern alle diese Schlagworte, Webseiten so zu bauen, dass sie den Möglichkeiten des Mediums World Wide Web entsprechen, weshalb ich sie gerne unter dem Begriff "mediengerechtes Webdesign" zusammenfasse.

Webseiten gestalten mit Tabellen?

Wenn mediengerechtes Webdesign so toll ist, warum wurden dann Webseiten früher mit Tabellen gestaltet? Eine kleine historische Rückblende soll das verdeutlichen.

Notwehr: Tabellen und <font>

Das Web ist von Wissenschaftlern für Wissenschaftler erfunden worden, und Wissenschaftler sind — nicht nur bei Webseiten — meist mehr am Inhalt als am Aussehen interessiert. Webseiten sahen damals fast alle gleich aus: grauer Hintergrund, schwarze Schrift und blaue Hyperlinks, die lila wurden, wenn sie auf eine bereits besuchte Seite zeigten.

Als Mitte der 90er das Web plötzlich zum weltweiten Boom wurde, erklang der Ruf nach Gestaltung der optisch doch eher schlichten Webseiten immer lauter. Das World Wide Web Consortium arbeitete an CSS, einer Sprache für die ansprechende Gestaltung von HTML-Elementen. Aber die Welt wollte bunte Seiten, und zwar sofort. Irgendeine tolle neue Sprache, die irgendwann mal fertig sein würde, war ihr egal.

Als Netscape <font> zur Gestaltung von Schriften und <table> zur Darstellung von Tabellen erfand, waren (fast) alle begeistert, und das klassische Webdesign begann sich herauszubilden:

• Schriftgestaltung mit font
• Positionierung mit unsichtbaren HTML-Tabellen

Der Quelltext dieser Seiten ist für Menschen so gut wie unlesbar und nachträgliche Änderungen an der Struktur werden schnell zum Albtraum. Quäl-Text.

Zurück zum Papierdenken

In gewisser Weise bedeutete diese Art der Gestaltung einen Schritt zurück in die vertraute Welt des Papierdenkens. Visuelle Editoren wie Frontpage oder GoLive verstecken den Quelltext und verstärken die Papiermetapher, indem Sie so tun, als seien sie eine ganz normale Textverarbeitung. Zahllose Homepagebastler wundern sich noch heute darüber, dass ihre Webseite zu Hause im Editor anders aussieht als beim Nachbarn im Browser.

Die Schriftgestaltung per CSS hat sich Ende der 90er relativ schnell durchgesetzt. Bei guter Planung war das eine echte Arbeitserleichterung, denn ein Style Sheet kann beliebig viele Webseiten gestalten. Formatierung per Fernsteuerung.

Es gab zwar mit CSS theoretisch auch die Möglichkeit, Objekte auf einer Webseite zu positionieren, aber die Browser sprachen damals so schlecht CSS, dass der Versuch zu nicht vorhersehbaren Ergebnissen führte. Mehrspaltige Layouts wurden also weiterhin mit Tabellen realisiert.

Tabellenfreie Layouts

Inzwischen ist das anders. Moderne Browser können so gut CSS, dass es für Webdesigner außer einer gewissen natürlichen Trägheit und akutem Zeitmangel kaum noch Argumente gibt, Webseiten nicht komplett mit CSS zu gestalten.

Der Unterschied zum traditionellen 90er-Jahre-HTML-Tabellendesign ist gewaltig und falls Sie bereits Webseiten mit Tabellen gestaltet haben, vergessen Sie am besten alles, was Sie darüber gelernt haben. Gestalten mit CSS ist anders. Ganz anders. Kein Vergleich.

Die Trennung von Inhalt und Gestaltung zum Beispiel ist ein ungewohntes Konzept:

• Sie beginnen mit sinnvoll strukturierten HTML-Dateien ohne Gestaltung.
• Danach gestalten Sie diese Dateien mit CSS-Anweisungen.

Nicht alles ist mit CSS einfacher, und die Lernkurve ist anfangs eher flach. Vielleicht fragen Sie sich auch einfach nur, warum sie jahrelang Webseiten erstellen mit Tabellen gelernt haben und jetzt wieder von vorne anfangen sollen.

Sie sind nicht allein:

Es ist schlimm genug, rief Eduard, dass man jetzt nichts mehr für sein ganzes Leben lernen kann. Unsere Vorfahren hielten sich an den Unterricht, den sie in ihrer Jugend empfangen; wir aber müssen jetzt alle fünf Jahre umlernen.

Goethe. Wahlverwandtschaften. Erster Teil, Viertes Kapitel. 1809. Neue Regeln für ein neues Medium. Das Web ist nicht aus Papier, und zum Gestalten von Webseiten gibt es CSS.

Dieses "Pamphlet wider das Papierdenken" ist die zweite Hälfte des ersten Kapitels aus dem Buch "Little Boxes - Webseiten gestalten mit CSS. Grundlagen.".

Der erste Teil - Papierdenken und enttäuschte Erwartungen ist auch online zu lesen.