CSS-Design – Webdesign mit Stylesheets

Ein Projekt am Fachberreich Gestaltung, FH Augsburg

Projekt im Hauptstudium
Kommunikationsdesign und Multimedia
6. / 8. Semester, WS 2004/2005
Dozentin: Patricia Rex

 css Zen Garden

Da sich die Möglichkeiten der Gestaltung mit Stylesheets erst in der Hand von Designern voll entfalten, initiierte der Kanadier Dave Shea das Projekt css Zen Garden, zu dem weltweit Designer Vorschläge einreichen können um zu demonstrieren, was mit Stylesheets möglich ist.

Die css Zen Garden Seite funktioniert mit einem so genannten "Style Switcher": Dadurch dass Inhalt und Gestaltung - HTML-Seite und externe Stylesheets - voneinander getrennt sind, wird einfach das Stylesheet ausgewechselt, um ein und derselben Webseite völlig verschiedene Designs zu geben. Auch Grafiken werden über dieses Stylesheet eingebunden. Ende März 2005 ließ sich css Zen Garden mit mittlerweile 574 unterschiedlichen Designs betrachten!

 Das Projekt

Die erste Hälfte des Semesters war technischen Workshops gewidmet. Danach realisierte jeder Teilnehmer Grafiken und Stylesheet-Dateien für je zwei Entwürfe. Die HTML-Datei hält sich bis auf Verlinkungen zu den Designs an die Vorlage von Dave Shea. Dadurch funktionieren einige Links in dieser aus dem Zusammenhang der Originalseite gerissenen Version nicht. Von jeder Seite lassen sich alle anderen Designs aufrufen. (Betrachtung mit Firefox empfohlen!) Da es darum ging, die gestalterischen Möglichkeiten von CSS auszutesten, sind die Arbeiten teilweise experimentell - d.h. manchmal muss man die Links zu den anderen Designs etwas suchen... ;) Die Ergebnisse sind hier zu sehen.

Empfehlenswert ist natürlich der Besuch der Original-Seite unter http://www.csszengarden.com/tr/deutsch !

 Wozu Stylesheets - Eine kleine Historie des Webdesign mit HTML

Im World Wide Web der frühen 90er Jahren war Design nicht vorgesehen. HTML in den Versionen 1 und 2 sollte lediglich als internationaler Standard zum Datenaustausch dienen, zur logischen Strukturierung von Inhalten. Das Aussehen - Schrift, Farbe und das Anzeigen von Bildern - bestimmte der Empfänger der Daten mit seinen Browsereinstellungen.

Allerdings hatten die Erfinder des Internet nicht mit der rasanten Eigendynamik gerechnet. Private und kommerzielle Anwender entdeckten das Internet für ihre Zwecke – und wollten ihre Webseiten auch gestalten.

Während das W3Consortium noch seinen ursprünglichen Visionen nachhing, waren die Browserentwickler schon dabei, die neuen Bedürfnisse zu erfüllen und entwickelten Möglichkeiten zur Textgestaltung, Tabellen, Frames und Scriptsprachen zur Erweiterung der Interaktivität.

Jahrelang hinkten die Standards des W3C der Realität hinterher und wurden daher nicht ernst genommen. Zu den HTML-Elementen, mit denen die inhaltliche Bedeutung bezeichnet wurde – beispielsweise <strong> für „wichtig“ – kamen jede Menge gestalterische Elemente wie z.B. <b> für Fettsatz oder <blink> zum blinken-lassen von Texten.

Mit HTML war keine exakte Gestaltung möglich. Daher zweckentfremdeten Designer zwei Mittel, um doch ein einigermassen verbindliches Layout zu erzeugen:

• die ursprünglich für tabellarische Auflistung vorgesehenen Tabellen
• und die Tatsache, dass Bilder das einzige Element waren, mit denen sich exakte Maße erzwingen ließen.

Aus Tabellen und Bildern, die durch die Transparenz des Gif-Formates auch unsichtbar sein können, entstanden teilweise virtuose Tabellen-Layouts.

Erst 1998 ging das W3C auf die Design-Bedürfnisse ein und brachte eine HTML-Version heraus, die das in der Zwischenzeit entstandenen Mischmasch beenden sollte. Zusätzlich zu HTML, das nur der inhaltlichen Formatierung dienen sollte, gab es nun Stylesheets zur Gestaltung der Webseiten.

Allerdings war das zunächst reine Theorie. In der Praxis war das Kind schon in den Brunnen gefallen. Nicht nur, dass sich die Designer-Welt mittlerweile an Tabellen-Layouts gewöhnt hatte - und was man virtuos beherrscht, gibt man so schnell nicht wieder auf -, Designer, die sich mit Stylesheets beschäftigten, stießen - und stoßen nach wie vor - auf immense Probleme.

Denn es genügt nicht, daß ein Software-Standard erlassen wird - die Programmierer und Programme müssen sich auch daran halten. Das tun sie aber bis heute noch nicht vollständig. Jeder Browser interpretiert Stylesheets in unterschiedlichem Umfang, oder – noch schlimmer - sogar fehlerhaft, so daß Designer weiterhin zu Umwegen und Doppellösungen gezwungen sind, wenn sie ein einheitliches Layout auf verschiedenen Browsern möchten. Allerdings wird dieses Problem mit jeder neuen Browsergeneration kleiner und bald der Vergangenheit angehören. Mittlerweile kann man guten Gewissens die stark veralteten Browser ignorieren und Stylesheets werden auch von den diesbezüglich noch mangelhaftenen Versionen 5 und 6 des Internet Explorer soweit unterstützt, daß sie sich für den kommerziellen Einsatz eignen.

Es wird mehr und mehr zum Qualitätszertifikat für Webdesigner, „valide“, d.h. HTML korrekt verwendende Webseiten zu gestalten. Die Trennung von Inhalt und Gestaltung hat zahlreiche Vorteile: Die Webseiten haben deutlich kürzere Ladezeiten, werden besser von Suchmaschinen indiziert und sind die Grundlage zur Barrierrefreiheit, einer Anforderung, die für einigge Bereiche schon gesetzlich vorgeschrieben ist.

Ein besonderes Schmankerl für Designer ist das „Styleswitching“, das Wechseln zwischen verschiedenen Layouts zu ein und derselben Webseite. Auch mit den Einschränkungen durch noch mangelhafte Browser ist mit Stylesheets kreativeres Webdesign möglich als es je mit Tabellen machbar war.

Patricia Rex