Holz-im-Garten.de
Der Holz-im-Garten.de Online Shop umfasst ein umfangreiches Sortiment an Gartenaccessoires und Gestaltungselementen, sowie Spielanlagen für Kinder. Über emotionale Bilder auf der Startseite wird schon in den ersten Sekunden der Besucher auf das Garten-Flair eingestellt. Fröhlich spielende Kinder und farbenfrohe Bilder unterstützen den Eindruck einer heilen Gartenwelt. Es überwiegt eindeutig das Bildmaterial, denn ein Bild sagt ja bekanntlich mehr als tausend Worte.
Der Online Shop ist sehr klar strukturiert, sowohl im Quelltext, als auch auf der für den Kunden sichtbaren und verständlichen Oberfläche. Die Formatierungen werden, wie bei professionellen Webseiten üblich, über ein externes Stylesheet eingebunden. In diesem Fall über die Datei stylesheet.css.
Oben befindet sich der Header mit einer Breite von 950 Pixeln und einer optimalen Höhe von 95 Pixeln, die auch bei älteren Bildschirmen ein Einsehen der wichtigen und eigentlichen Informationen ohne Scrollen des Browserfensters zulässt. Oben links sitzt das Firmenlogo (250×80px) und rechts ist Platz für die Merkliste und den Warenkorb, sowie für das Siegel „Trusted Shops“ und eine Kontakt-Telefonnummer mit Öffnungszeit. Unter dem Header ist links eine Suchleiste mit einer Breite von 191 Pixeln und einer Höhe von 25 Pixeln platziert. Rechts daneben befindet sich eine Breadcrumb-Navigation.
Der eigentliche Inhalt wird links von einer Randleiste verziert, die im CSS-Quelltext folgendermaßen definiert wird: #LeftCol { float: left; width: 196px; margin-top: 150px; }. In der Randleiste sind neben der Menüleiste, die als unsortierte Liste aufgebaut ist, die Trusted Shops-Kundenbewertung, sowie der Button für eine individuelle Beratung platziert. Auffällig sind die kleinen aber dennoch aussagekräftigen Piktogramme vor jedem Hauptmenüpunkt. Da der User Bilder schneller zuordnen kann als Text, ermöglicht das eine intuitive Bedienung des Holz-im-Garten.de Online Shops.
Mit einer Breite von 695px umfasst der Hauptteil den meisten Raum. In diesem-Container rechts neben der Menüleiste befinden sich als einzelne Boxen angeordnet noch einmal die wichtigsten Kategorien, zu der der User navigieren soll. Je nach Jahreszeit findet man dort entsprechend aktuell passende Angebote, wie z.B. Grills und Terrassen. Alle Boxen werden mit einem durchgängigen 1px Rahmen umschlossen (img { float: left; border: 1px solid #dfe2d9; }).
Im HTML-Quelltext steht die <h1>-Überschrift und der darunter folgende Text auf der Startseite ziemlich am Anfang der Website. Über die CSS-Formatierung #text_left { width:696px; float:left; } wird der Text als den folgenden Inhalt links umfließend formatiert. Dadurch, dass der darunter folgende Inhalt über #main_top { width:696px; float:left; } gleichermaßen als links umfließend eingestuft wird, steht der bebilderte Inhalt über dem Text und kann vom Besucher zuerst wahrgenommen werden.
Wählt man sich letztendlich eine Produkt-Kategorie aus, werden die Produkte sehr übersichtlich in einem Zwei- oder Drei-Spalten-Raster untereinander präsentiert.
Fazit: Der Holz-im-Garten.de Online Shop ist also sehr durchdacht strukturiert worden und überzeugt bereits durch seinen sinnvollen Seitenaufbau.