Jetzt lerne ich CSS

"

Kapitel 17 Design mit CSS (S. 275-276)

Nachdem in den bisherigen Kapiteln CSS-Techniken im Vordergrund standen, geht es nun um Vorgehensweisen bei der Realisierung von anspruchsvollem Design mit Cascading Stylesheets. An einem Beispiel sehen Sie ein flexibles Design, das sich an die benutzte Schriftgröße anpasst, erfahren, wie sich Navigationsleisten mit Zusatzinformationen gestalten lassen und warum zusätzliche span-Elemente so praktisch sind. Zum Schluss erhalten Sie noch Unterstützung bei der Entscheidungsfindung, wann man Tabellen einsetzen und wann man zu CSS-Techniken greifen sollte.

17.1 Alles ist relativ

Die Gestaltung von Internetseiten ist viel tiefer gehendes Informationsdesign als nur die Konvertierung von Druckwerken in ein Internetformat. Denn die Informationen treten hier nicht erst durch ihre visuelle Gestaltung in Erscheinung, sondern sind quasi pur im Quellcode der Seite vorhanden. Sie können zusätzlich gestaltet werden, der Browser kann sie aber auch ohne besondere Gestaltung darstellen. Genauso gut können die Informationen einer Webseite auch von einem Screenreader vorgelesen oder in Blindenschrift ausgegeben werden. Damit das möglich ist, muss die innere Informationsstruktur einer Webseite stimmen – und vom Gestalter auch richtig erkannt und sprachlich umgesetzt werden. Es genügt also nicht, ein Druckwerk einfach in ein internetfähiges Format zu konvertieren und dann beispielsweise als Bild oder pdf-Datei online zu stellen.

Zunächst muss die Information in (X)HTML umgesetzt werden. Dann kommt das visuelle Design – als eine von mehreren möglichen Darreichungsformen. Normalerweise gibt ein Grafiker erst dann den Druck frei, wenn er sicher ist, dass Farben auch genauso wie vorgesehen gedruckt werden. Es wäre eine Katastrophe, wenn der Text auf einem Plakat plötzlich ganz anders umbrechen würde oder gar die Bilder komplett fehlen würden! Im Webdesign sind solche »Katastrophen« aber ganz normal. Gestalter, die erstmals Webseiten gestalten, erleiden spätestens dann, wenn sie ihr Layout auf einem anderen Monitor oder Browser sehen, einen ersten Schock. Dann versuchen sie, diese vermeintlichen Fehlerquellen auszuschalten, indem sie beispielsweise die Schriftgröße mit Pixelangaben in CSS fixieren, sodass sie sich nicht mehr mit Browser-Einstellungen vergrößern lässt, oder indem sie Schriftgrafiken statt HTML-Text verwenden. Nach ersten Versuchen mit HTML greifen sie auch oft verzweifelt zu Flash: Damit sehen Webseiten auf allen Browsern und Plattformen gleich aus, und es gibt keine »bösen« Überraschungen. Warum das Erscheinungsbild einer Webseite von so vielen Faktoren beeinflusst werden kann, ja, dass anspruchsvolleres Design im Internet ursprünglich eigentlich gar nicht vorgesehen war, wird in Kapitel 1.1,

Warum Stylesheets notwendig wurden, erläutert. Design bleibt deshalb ein »Angebot« an den Leser einer Webseite, das dieser auch ablehnen kann und darf, indem er beispielsweise Bilder und Stylesheets ausschaltet. Speziell professionelle Gestalter werden sich nun fragen, wie weit sie überhaupt noch Verantwortung für ihre Arbeitsergebnisse übernehmen können. Nicht nur, dass die Anwender verschiedene Betriebssysteme und Browser, Monitorauflösungen, Fenster- und Schriftgrößen verwenden oder sogar das Design ausschalten oder mit eigenen Style-Elementen mischen können: Die Situation wird besonders schwierig durch die zurzeit noch sehr unterschiedliche und teilweise auch grob fehlerhafte Unterstützung der Stylesheets durch die verschiedenen Browser. Das Testen und Anpassen der Styles für die gängigsten Browser ist noch so aufwändig, dass jeder für sich entscheiden muss, wie viel Zeit er dafür investieren kann oder welche Fehldarstellungen er hinnimmt.

Die einen konzentrieren sich auf den meistverbreiteten Browser – »optimiert für Explorer« –, die anderen halten sich an die Standards und lehnen die Verantwortung für fehlerhafte Interpretationen ab. Die meisten gehen wahrscheinlich einen Mittelweg und bemühen sich darum, dass ihr Design zumindest auf den am weitesten verbreiteten Browsern Explorer 6 und Firefox wie vorgesehen und ggf. noch auf Explorer 5 und den aktuellen Safari-, Operaund Netscape-Versionen weitgehend wie geplant aussieht. Dies wird hoffentlich in wenigen Jahren Vergangenheit sein, wenn alle Browser Stylesheets gleichermaßen korrekt interpretieren.