Kunstform CSS

Kategorien Webgedöns 5 Kommentare
Dave She­as ers­te Sei­te für zengarden.com
Manch­mal wünscht man sich ja ein Zurück, abseits vom Design­ein­heits­brei der meis­ten Web­sei­ten. Tat­säch­lich ach­te ich beim Sur­fen als Ers­tes auf das Design. Damit mei­ne ich noch nicht ein­mal ein anspruchs­vol­les Design, aber: Je weni­ger der Betrei­ber davon ver­steht, des­to schlich­ter und funk­tio­na­ler soll­te das Design einer Web­sei­te sein. In den frü­hen Jah­ren bas­tel­ten die meis­ten an ihren HTML-Web­sei­ten; vie­le ver­schlimm­bes­ser­ten dabei ihr Design ins Unkennt­li­che. Die dama­li­ge end­gül­ti­ge Müll­sei­te«, legt sei­ner­zeit Zeug­nis vom ver­zwei­fel­ten Ver­such eini­ger selbst­er­nann­ten Web­de­si­gner ab, ihre rudi­men­tä­ren HTML-Kennt­nis­se im Netz zu prä­sen­tie­ren. Auf der ande­ren Sei­te gab es die tat­säch­li­chen Künst­ler. Der Web­de­si­gner David Shea rief vor zwan­zig Jah­ren auf der Sei­te zen­gar­den dazu auf, eine krea­ti­ve Sei­te aus HTML und CSS-Bei­spiel­da­tei­en zu ent­wi­ckeln. Shea ging es vor allem dar­um zu zei­gen, was mit CSS mög­lich ist. Der CSS Zen Gar­den ist inzwi­schen einer der geschichts­träch­tigs­ten Orte des Web­de­signs. Er wur­de 2003 von Shea ins Leben geru­fen, um ein damals revo­lu­tio­nä­res Kon­zept zu demons­trie­ren: Die strik­te Tren­nung von Struk­tur (HTML) und Design (CSS).


Das Fas­zi­nie­ren­de am Zen Gar­den ist die Ein­schrän­kung: Jedes ein­zel­ne Design, das du auf der Sei­te aus­wäh­len kannst, nutzt exakt den­sel­ben HTML-Code. Die Teil­neh­mer dür­fen kei­ne ein­zi­ge Zei­le am HTML ändern, kein »div« hin­zu­fü­gen und kei­ne Klas­se umbe­nen­nen. Die gesam­te visu­el­le Trans­for­ma­ti­on – von mini­ma­lis­tisch über futu­ris­tisch bis hin zu klas­sisch – geschieht aus­schließ­lich über eine ein­zi­ge exter­ne CSS-Datei.

Bevor der Zen Gar­den popu­lär wur­de, war das Web voll von „Tabel­len-Lay­outs“ und unsicht­ba­ren Platz­hal­ter-GIFs. Design und Inhalt waren untrenn­bar im Code ver­mischt. Der Zen Gar­den dien­te als „Weg der Erleuch­tung“ (wie es im Text heißt), um Desi­gnern zu zeigen:

Wie­der­ver­wend­bar­keit: Man kann das Aus­se­hen einer kom­plet­ten Web­site ändern, ohne den Inhalt anzufassen.

Bar­rie­re­frei­heit: Da das HTML sau­ber struk­tu­riert bleibt, kön­nen Screen­rea­der den Text pro­blem­los lesen, egal wie wild das CSS dar­über liegt.

Effi­zi­enz: Ein zen­tra­les Style­sheet steu­ert das gesam­te Branding.

Mitt­ler­wei­le ist die Sei­te fast schon eine Art Muse­um. Wäh­rend moder­ne Tech­ni­ken wie Flex­box und CSS Grid heu­te Stan­dard sind, stam­men vie­le der berühm­ten Designs aus einer Zeit, in der man sich noch mit den Feh­lern des Inter­net Explo­rers her­um­schla­gen musste. 🤢

Das Pro­jekt zeigt ein­drucks­voll, dass tech­ni­scher Fort­schritt nicht nur aus neu­en Funk­tio­nen besteht, son­dern vor allem dar­aus, Schön­heit aus Struk­tur zu schaffen.

Ich ver­lie­re mich manch­mal in den wun­der­vol­len, anspruchs­voll gestal­te­ten Sei­ten der CSS-Künst­ler und Künst­le­rin­nen. Das dort wirk­lich nur die Crè­me de la crè­me antre­ten soll, wird schnell bei den Teil­nah­me­be­din­gun­gen klar. Expli­zit wird zur Teil­nah­me hin­ge­wie­sen: Bit­te nur Grafikkünstler.

5 Kommentare zu „Kunstform CSS“

  1. Oh ja ich erin­ne­re mich noch gut dar­an (an die Sei­te). Damals hat man neben CSS auch HTML sich ver­sucht anzu­eig­nen. Da muss ich immer auch an SELFHTML den­ken. Die bei­den Sei­ten moch­te ich sehr, da man sehr gut und viel ler­nen bzw. mit­neh­men konn­te für eige­ne Projekte.

  2. Hach ja, die guten alten Zei­ten, oder?
    Ich habs auch total geliebt auf die­sen Sei­ten zu stö­bern und beson­ders auf den Show­ca­se Sei­ten neue Inspi­ra­tio­nen zu ent­de­cken. Heu­te ist das ja ganz anders. Haupt­sa­che clean ohne Tüddelkram 🙈

    • Opa erzählt vom (Brow­ser) Krieg 😄

  3. Schö­ner Blick zurück bis ins Heute.
    Wenn ich durch den Feed bei Lin­ke­dIn stö­be­re, dann leben wir ja in einem Zeit­al­ter, wo Leu­te sich “Web­de­ve­lo­per” nen­nen, die nur Pagebuilder/Webflow ken­nen und kein Wort HTML5 oder CSS3 sprechen. 😉

  4. Als ich noch beim Fraun­ho­fer Insti­tut war, muss­te ich in ein Pro­jekt ein­stei­gen wel­ches alle Inter­net-Sei­ten der Außen­stel­len des LOBA (Lan­des­ober­berg­amt) — und davon gab es etli­che! auf ein ein­heit­li­ches Design brin­gen soll­te. CSS war zu dem Zeit­punkt gra­de im kom­men und wie es bei einer Behör­de üblich ist (das Fraun­ho­fer zahlt nach BAT — und denkt auch so) war CSS erst mal Teu­fels­werk. Wie schnell wäre alles gegan­gen, hät­te man eine über­grei­fen­de CSS erstellt und die als Design-Vor­la­ge genutzt. Ein­mal ändern und alle Stand­or­te hät­ten die glei­chen sty­li­schen Ver­än­de­run­gen. Nix da! Wochen und mona­te­lang muss­ten wir die Quell­tex­te ALLER Sei­ten und Unter­sei­ten anpas­sen, weil jedes Amt sei­ne eige­nen Vor­stel­lun­gen von Far­be und Design hat­te — Gif-Ani­ma­tio­nen inbe­grif­fen. Und jedes Amt hat­te auch noch zahl­rei­che Unter­sei­ten — teil­wei­se von den Mit­ar­bei­tern erstellt, die auch ein ein­heit­li­ches Design haben sollten.
    Dazu die Brow­ser-Pro­ble­ma­tik beim Lay­ou­ten mit Tabel­len. Also zu allem Über­fluß am Anfang noch eine Brow­ser­ab­fra­ge star­ten ob der User mit dem Net­scape Navi­ga­tor oder dem Inter­net Explo­rer die Sei­te auf­ruft, um die pas­sen­de Ver­si­on der Web­sei­te zu laden, denn jeder Brow­ser stell­te Tabel­len natür­lich anders da. Es dau­er­te Mona­te und es war eine elen­de Plackerei!
    Wer die Idee für CSS hat­te, der soll­te einen Orden bekommen..

Die Kommentare sind geschlossen.