kaffeeshop.net
Die Domain kaffeeshop.net führt zu einer Webseite auf der alles rund um Kaffee angeboten wird. Das breit gefächerte Angebot reicht von Kaffeebohnen über Kaffeepads bis hin zu unterschiedlichen Kaffeemaschinen, Mahlmaschinen und sonstigem Zubehör. Da diese wirklich umfangreiche Seite auch auf der gestalterischen und technischen Ebene äußerst zufriedenstellend gelöst ist, lohnt ein Blick hinter die Kulissen um die Grundstrukturen der Seite zu analysieren.
Technisch betrachtet, nutzt die Seite das CMS Wordpress und besteht daher aus einer Reihe von php-files, die die erforderlichen Informationen aus einer MySQL Datenbank auslesen. Damit diese Informationen auch in einem für die Endverbraucher attraktiven „Kleid“ erscheinen sorgt ein schönes, gut gestaltetes Layout, das in einem eigenen Stylesheet – der style.css – untergebracht ist.
Diese style.css, die alle relevanten Informationen über das äußere Erscheinungsbild der Seite enthält, ist klassisch aufgebaut und beginnt mit der Definition des Bereiches „body“ in dem neben Hintergrundfarbe (#90491e – kaffebraun) und Schrift (Arial) auch die Werte für die Innen- und Aussenabstände im gesamten Dokument definiert sind. Danach folgen zwei div-Container (#container und #wrap), die die eigentlichen Inhalte der Seite wie eine Klammer umgeben. Der div-Container mit der ID #wrap definiert dabei bereits die Breite der Seite mit 960 Pixel.
Im folgenden Teil der Datei styles.css werden die tatsächlichen Inhalte der Seite formatiert. Diese Formatierung beginnt mit dem Kopfbereich #header {height: 100px; margin: auto;padding: 30px 410px 0px 0px; text-align: right; color: #FFFFFF; }und der Überschrift im Kopfbereich #header h1 {color: #FFFFFF; font: 36px Georgia, “Times New Roman”, Times, serifs; margin: 0px; padding: 0px; }. Direkt danach folgt der Bereich #content, der mit 550 Pixel Breite links floatet und Platz für die einzelnen, vorgestellten Artikel bietet.
Danach folgen die Bereiche #sidebar, #sidebar_left und #sidebar_right. #sidebar ist das übergeordnete Element, das mit einer Breite von 410 Pixel reichlich Platz für die beiden Unterteilungen in #sidebar_left und #sidebar_right bietet. Der linke Teil der Sidebar enthält Platz für Google-Ads, wogegen der rechte Teil unterschiedliche Navigationselemente beinhaltet.
Abgeschlossen wir die Seite mit dem – bei Wordpress üblichen - div-Container mit der ID #footer. Der sich über die gesamte Fensterbreite hinzieht (width: 100%;) und in einem dunkleren Braun (#682e27;) gehalten ist.
Die Seite bietet einen gefälligen und interessanten Eindruck, der sicherlich entscheidend durch das in der CSS-Datei formatierte Layout geprägt wird.