Lichterkette.net
Auf Lichterkette.net dreht sich alles um Lichterketten, Lichternetze und Weihnachtsbeleuchtung. User haben die Möglichkeit, sich in aller Ruhe mit dem leuchtenden Dekoartikel auseinanderzusetzen und sich für ihren Favoriten zu entscheiden. Dabei spielt es keine Rolle, ob der Webseiten Besucher eine LED Lichterkette, eine kabellose Lichterkette oder eine Mini Lichterkette sucht. Der Webmaster nutzt die Blogsoftware Wordpress um die einzelnen Rubriken klar und deutlich zu veranschaulichen. Das Seitenlayout ist dreispaltig gehalten. In der linken Spalte das klare Hauptmenü der Seite. Mittig der Content zu dein einzelnen Rubriken und in der rechte Spalte finden sich Empfehlungen aus dem Lichtbereich wieder. Mit einer festen Seitebreite von 900px lässt sich Webseite auch noch auf älteren Monitoren mit niedriger Auflösung problemlos darstellen, dies hat den Vorteil, dass der Webmaster mehr Kunden erreicht, die Lichterkette.net ohne lästiges Scrollen aufrufen können.
Betrachten wir die style.css. Diese Datei ist für die verwendeten Schrifttypen und -größen verantwortlich. Für den Body ist klar definiert:
{
margin: 0.5em 0;
font-family: “Lucida Grande”, “Lucida Sans Unicode”, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 11px;
text-align: justify;
}
Ohne große Verschnörkelung wird der Text im Contentbereich in der Schriftgröße 11px wiedergegeben. Nicht zu klein, und nicht zu groß, optimal für das Auge, den Text gut und flüssig lesen zu können.
Demgegenüber steht die Definition des Menü´s mit folgenden Werten:
{
display: block;
line-height: 24px;
color: #6A6269;
padding: 0 13px 0 32px;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
margin-left:0;
margin-right:0;
}
Durch die größer gewählte Schriftgröße im Menubereich findet sich der Webseitenbesucher direkt zurecht und kann ohne großes “Suchen” sich auf der Seite zurechtfinden. Dies nur als Beispiel der style.css. Insgesamt ist Lichterkette.net klassisch gestaltet mit der Trennung von Webdesign Elementen und Inhalt. Alle wichtigen Definitionen sind in der CSS Datei verpackt.