Der Grüne Punkt für Websites?

Letzten Freitag, kurz vor 19 Uhr in der Agentur XYZ. Der wichtigste Kunde ruft an und will wenige Stunden vor dem Launch der neuen Site noch ein paar klitzekleine Änderungen …

Tags: , ,

Autor: tc

Statt rot soll nun alles blau hinterlegt sein. Sie hören nur noch, wie der Kundenberater sagt: »Na klar, unser Entwickler schafft das schon. Der kennt alle Standards Und Sie denken sich: »Sicher, alle 128 Stück.«

Unrealistisch? Ganz sicher nicht, gehören solche aufwändigen Anpassungsarbeiten doch zum täglich Brot eines jeden Webdesigners. Das Design verlangt nach einer hellgrauen Haarlinie um die Navigation? Kein Problem, dann kommt um die Layouttabelle eben noch eine weitere, die dann nur für den Rahmen zuständig ist. Die Schrift ist unter Windows zu groß? Kein Problem, font face="1 bringt sie wieder auf ein verträgliches Maß. Die Seiten sehen auf dem 21-Zoll-Monitor des Art Directors so leer aus? Na ja, dann optimieren wir halt für eine Mindestgröße von 1024x768.

Üblicherweise sind aber auch Launch-Termine genau so unflexibel wie solch ein Layout, und wenn Ihre Seiten nun auf solchen komplexen Tabellenkonstruktionen beruht, die vielfach ineinander verschachtelt und eingefärbt sind, haben Sie spätestens jetzt ein massives Problem.

Sie dürfen nun tausende font-Tags aufspüren und ändern, und das bitteschön bis nächsten Montag. Sie dürfen an Tabellen herumbasteln, die aber schon bei der kleinsten Änderung im Browser kollabieren. Dabei waren Sie so stolz, dass die Site von Ihrem Syntax-Checker für korrekt befunden wurde (gut, bis auf ein paar kleine Ausnahmen). Und sie hatten ja auf mindestens zwei anderen Browsern getestet und überall sah es ordentlich aus.

Rettung naht:
Die saubere Trennung von Verpackung und Inhalt

Was bei dieser Art, Seiten zu konstruieren allerdings komplett verloren geht ist zum einen die logische Struktur der Inhalte und damit der innere Zusammenhalt der Dinge, welche die Site eigentlich vermitteln soll. Zudem erhöht sich der Aufwand für die Wartung und Pflege der Seiten exponentiell mit jedem weiteren Trick, den Sie einsetzen, um HTML zu etwas zu bringen, wozu es nie gedacht war: der Gestaltung von Webseiten.

Auftritt CSS: »Klar,« sagen Sie »CSS kenn' ich, damit kann man Schriftgrößen und Zeilenabstände ändern. Aber die wenigsten Browser unterstützen das doch bisher zuverlässig.« Und deswegen haben Sie es auch bisher nur sehr verhalten eingesetzt und damit eigentlich mehr Schaden angerichtet als Gutes getan. Also doch wieder zurück zu den drei apokalyptischen Reitern des Webdesigns: Frames, verschachtelten Layouttabellen und font-Tags?

Der Weg geht eindeutig in eine andere Richtung: Mittlerweile unterstützen alle Browser, große wie Internet Explorer und Firefox oder kleinere wie Opera und Safari die nötigen Web-Standards CSS 1 & 2.1 und HTML 4.01 vollständig und vor allem korrekt in der Umsetzung.

Ein Beispiel für die Technik, die diese Vorteile nutzt, ist die Seite, die Sie gerade lesen. Die Druckversion dieser Seite ist zugleich auch die Monitorversion (also die selbe HTML-Datei), nur wird einfach ein anderes Style Sheet für die Druckversion geladen. Der gesamte Entwicklungsaufwand für das zusätzliche Style Sheet betrug ganze 2 Stunden – unmöglich bei einer Site, in der Inhalt und Gestaltung miteinander vermischt sind.

Das Ziel ist das Ziel

Dieses Konzept funktioniert aber nur, wenn man den Weg, den man einmal mit dem Einsatz von CSS beschritten hat, konsequent zu Ende geht. Es nützt nichts, lediglich die Schriftformatierung mit CSS zu gestalten, den Rest der Seite aber wieder in das althergebrachte Tabellenkorsett zu zwängen. Abgesehen davon, dass man damit die Möglichkeiten, die durch CSS 1 & 2 und HTML 4 auch und gerade in gestalterischer Hinsicht noch nicht einmal ansatzweise ausnutzen kann, passieren bei dieser Vermischung auch Fehler, welche die Benutzbarkeit einer Site fast unmöglich machen können:

  • Der Webdesigner hat die Schriftfarbe per CSS definiert, die Hintergrundfarbe aber per eingefärbten Tabellenzellen. Wenn nun ein Browser kommt, der zwar kein CSS, aber Tabellen versteht (und das sind alle Browser bis einschließlich 4), sieht der User im Ernstfall schwarzen Text auf schwarzem Grund.
  • Der Webdesigner wollte sehbehinderten Benutzern etwas Gutes tun und hat die Schriftgröße in relativen Einheiten wie em oder % angegeben, statt die unflexibleren pt oder px zu benutzen. Leider wird nach wie vor ein Tabellenlayout verwendet, das von starren Breiten und Höhen der einzelnen Zellen in festgeschriebenen Pixelwerten ausgeht. Wenn nun die Seite mit einer anderen Schriftgröße oder einem anderen Zeichensatz als vorgesehen angezeigt wird, fliegt das mühevoll erarbeitete Layout schneller auseinander als Sie den »Back«-Button drücken können.

Wenn Sie befürchten müssen, dass bei einer Änderung von Variablen wie Schriften, Farben etc. durch den User Ihre gesamte Site zusammenbricht und unbenutzbar wird, macht es keinen Sinn zu versuchen, ihre Vorstellung dem Benutzer durch Zwangsformatierungen aufzudrängen. Sie können eh nicht alle Eventualitäten abfangen – es gibt im Web ungefähr so viele unterschiedliche Konfigurationen von Browser, Betriebssystem und Monitor wie es Nutzer gibt. Worauf Sie sich allerdings verlassen können, ist, dass Sie mit jedem unsauberen Trick, der ein bestimmtes Aussehen oder ein bestimmtes Verhalten erzwingen soll, wieder neue Besuchergruppen ausschließen.

Schreiben Sie Ihre Briefe auch in Excel?

Tabellen, d. h. table und die dazugehörigen anderen Elemente und Attribute sind natürlich nicht grundsätzlich schlecht. Im Gegenteil, für die Darstellung tabellarischer Daten sind Sie natürlich weiterhin hervorragend geeignet. Aber als Layoutkrücke eingesetzt offenbaren HTML-Tabellen ihre grundlegenden konzeptionellen Mängel: stellen Sie sich nur mal das riesige Konstrukt aus Reihen, Spalten und Zellen vor, das benötigt wird, um ein einziges Bild unten rechts am Monitorrand darzustellen – mit CSS ist so etwas mit einer Zeile Code erledigt.

Mit dem Wissen, das die aktuellen Browser nun endlich die lange verabschiedeten Standards vollständig und korrekt unterstützen, gibt es eigentlich keinen Grund mehr, überhaupt noch HTML für etwas einzusetzen, wofür es nie gedacht war: das Aussehen einer Seite zu bestimmen, statt die logische Struktur eines Textes zu beschreiben. Und hier kommt nun den geplagten Webdesignern die Weitsicht der CSS-Entwickler im W3C zu Gute: Was man sich auch immer an grafischen Entwürfen ausdenkt, es lässt sich in CSS umsetzen.