Die Homepage wurde aktualisiert. Jetzt aufrufen.
Hinweis nicht mehr anzeigen.

Webdesign mit CSS: Blütenpracht im Zen-Garten

Mit "kaskadierenden Druckformaten" können Webdesigner mit einfachen Mitteln völlig neue Eindrücke schaffen. Eine Webseite zeigt jetzt, wie die Methode aus einer Bleiwüste verschiedenste blühende Landschaften macht - jeder kann eigene Vorstellungen hinzufügen.

CSS Zen Garden: Blühende Landschaften

CSS Zen Garden: Blühende Landschaften

Die Gestaltung eines überzeugenden Internet-Auftritts hat vor allem etwas mit Inspiration zu tun - in dieser Überzeugung hat der Grafikdesigner Dave Shea vor zwei Jahren einen "Zen-Garten" geschaffen: Diese blühende Wiese im Internet zeigt, welch zahllose Möglichkeiten es gibt, um mit Hilfe des CSS-Standards zu besonders kreativen Web-Präsentationen zu gelangen.

Der Besucher dieses "Gartens" kann sich ein- und dieselbe Web-Seite in immer neuen Gestaltungsvarianten anzeigen lassen.

Dabei kommen zum Teil recht komplexe Anweisungen der "Cascading Style Sheets" zum Einsatz, die den Inhalt der Web-Seite in teilweise verblüffenden Layouts einpacken. Die CSS-Vorlagen dafür stammen von Teilnehmern aus aller Welt, die bislang mehr als 650 Beiträge eingereicht haben.

Fotostrecke

4  Bilder
Zen-Design: Blütenpracht mit CSS

"Ein erfolgreiches Design übermittelt dem Betrachter eine Botschaft, die Worte allein nicht transportieren können", heißt es in einem Buch, in dem Shea und Mitautorin Molly Holzschlag unter dem Titel "Zen und die Kunst des CSS-Designs" jetzt ihre Erfahrungen zusammengefasst haben. Diese Design-Botschaft, nicht der CSS-Code wie in üblichen Handbüchern, steht im Mittelpunkt des Buchs.

Stimmige Präsentationen mit eigener Gefühlslage

Am Beispiel von CSS-Vorlagen mit so klangvollen Namen wie "Atlantis" oder "Springtime" wird gezeigt, wie der verfügbare Raum der Web-Seite so mit Text und Grafik gefüllt wird, dass eine rundum stimmige Präsentation mit einer jeweils eigenen Gefühlslage entsteht. Der gezielte Umgang mit Licht und Schatten, Form und Farbe erzeugt eine besondere psychologische Wirkung, der sich die Betrachter kaum entziehen können. So werden Kreise intuitiv eher mit weiblichen Werten wie Wärme, Trost und Sinnlichkeit in Verbindung gebracht, während "rechteckige Bilder dem Betrachter Ordnung, Logik, Geschlossenheit und den Eindruck von Sicherheit vermitteln" können.

Erst wenn die gewünschte Aussage und das grafische Konzept klar sind, kann die Umsetzung in Code beginnen. Die verbreitete Praxis, die Elemente einer Web-Seite mit Hilfe einer Tabelle anzuordnen, lässt einem CSS-Guru die Haare zu Berge stehen. Viel präziser und standardkonformer geschieht dies mit den Möglichkeiten der pixelgenauen Positionierung. Die beim CSS-Standard nicht ganz einfache Unterscheidung von absoluter, statischer, relativer und fester Positionierung wird anhand der Beispiele des "Zen-Gartens" bald einsichtig.

"Ab in die Mitte"

Dabei wird auch eine Lösung für das häufig im Internet anzutreffende Problem angeboten, dass eine Web-Seite auf Bildschirmen mit hoher Auflösung einen hässlichen Leerraum aufweist. Unter dem Motto "Ab in die Mitte" empfehlen die CSS-Experten hierfür das horizontale Zentrieren eines ansonsten fest angelegten Designs.

Der "Zen-Garten" im Internet erlaubt es allen Besuchern, den CSS-Code der Beispiele zu verwenden und an eigene Bedürfnisse anzupassen. In ihrem Buch gehen Shea und Holzschlag darüber hinaus auch darauf ein, was bei der Gestaltung von Bildern und Schriften zu beachten ist. Hier lautet eine der Empfehlungen, eher schlichte Schriftarten mit einem minimalistischen, aber nachhaltigen Design zu verbinden.

Die kreativsten Ideen für eine originelle CSS-Umsetzung scheitern allerdings oft genug daran, dass sie nicht von allen Browsern unterstützt werden. Mal ist es der Internet-Explorer, mal Firefox oder Opera, die sich nicht in vollem Umfang standardkonform verhalten und die Web-Designer an den Rand der Verzweiflung bringen.

Von Peter Zschunke, AP


Dave Shea/Molly E. Holzschlag: Zen und die Kunst des CSS-Designs. München: Addison-Wesley-Verlag, 2005. 366 Seiten. 39,95 Euro

Diesen Artikel...

© SPIEGEL ONLINE 2005
Alle Rechte vorbehalten
Vervielfältigung nur mit Genehmigung der SPIEGELnet GmbH




Anzeige
  • Christian Stöcker:
    Spielmacher

    Gespräche mit Pionieren der Gamesbranche.

    Mit Dan Houser ("Grand Theft Auto"), Ken Levine ("Bioshock"), Sid Meier ("Civilization"), Hideo Kojima ("Metal Gear Solid") u.v.a.

    SPIEGEL E-Book; 2,69 Euro.

  • Bei Amazon kaufen.
Der kompakte Nachrichtenüberblick am Morgen: aktuell und meinungsstark. Jeden Morgen (werktags) um 6 Uhr. Bestellen Sie direkt hier: