küche.org
Unter der Domain küche.org befindet sich eine Seite, die für alle, die sich für das Thema Küche interessieren, wirklich interessant ist. Man findet dort einfach alles zum Thema: Küchengeräte (Vom Allesschneider bis zum Wasserkocher), Herde, komplette Küchen, Kücheneinrichtungen und - last, but not least – Küchenmöbel wie Küchentische, Küchenregale, Küchenschränke in einer nahezu unendlichen Auswahl. Zusätzlich gibt es auch noch Bereiche, in denen die Kunden ihre Meinungen über die einzelnen Produkte niederschreiben können.
Die Seite bietet ein wirklich breit gefächertes Angebot, das natürlich auch in der Gestaltung und auf der Programmierebene erst ein mal bewältigt werden muss. Trotz seines großen Umfangs kommt der Shop unter www.küche.org mit einer einzigen CSS Datei – der screen.css - aus. Das liegt unter anderem daran, dass man sich beim Design auf die Darstellung am klassischen Bildschirm beschränkt hat und keine alternativen CSS-Dateien für die Darstellung beim Druck oder auf dem Handy definiert hat.
Trotz dieser Einschränkung schafft es der Shop dennoch sein riesiges Angebot übersichtlich und optisch elegant darzustellen. Dies liegt vor allem an der gut organisierten CSS-Datei, die sich in ca. 20, unterschiedliche Bereiche aufteilt: Basic styles, Layout, Header, Footer, Navigation, Menu, Sidebar, Content, Products, Product details page, Similar products, Category list, Category index, Search results, Reviews, Textbox, Article box, Pagination, Breadcrumbs, Category filters, Tabs, und Common classes sind die Bereiche, in denen jedes Detail des Layouts genau festgelegt ist.
Zu Beginn (Bereich „ Basic styles“) werden erst mal die grundlegenden Layouteigenschaften (margin, padding, Bilder, Listenelemente, der Body und die Eigenschaften der Links…) festgelegt. Danach werden die Größen der Elemente festgelegt (Bereich Layout), dann geht es zu den einzelnen Abschnitten der Seite: In den Abteilungen „Header, Footer, Navigation etc. werden die Eigenschaften der jeweiligen Elemente nach Form, Farbe etc. definiert.
Im weiteren Verlauf von styles.css geht es immer tiefer in die einzelnen Details der Seite: Bereiche wie z. B. „Product details page“ oder „ Article box“ definieren die Seite mithilfe vom CSS auch die allerkleinsten Details dieses optisch ansprechenden und ausgesprochen gelungenen Web-Auftrittes.