Trachtenmode-dirndl.com
Trachtenmode ist in Bayern eine ganz normale Kleidung. Um auch das restliche Deutschland davon zu Überzeugen, wurde das Portal Trachtenmode Dirndl (trachtenmode-dirndl.com) geschaffen.
Schaut man sich die Webseite auf den ersten schnellen Blick an, so scheint im Hintergrund dasselbe System wie bei landhausmode.biz zu laufen. Bei genauem Hinschauen fallen aber die Unterschiede sofort auf. So wird zwar auch das CMS Wordpress zur einfachen Verwaltung genutzt, aber mit einem anderen – ebenfalls angepassten – Theme im Hintergrund.
Die Aufteilung der Webseite lässt sich auf 4 Hauptbereiche eingrenzen. So gibt es den Kopfbereich, den Inhaltsbereich, den Seitenbereich und abschließend den Fussbereich.
Im Kopfbereich befindet sich lediglich der Seitenname, sowie eine kleine Beschreibung, was den Nutzer auf der Magazin-Webseite erwartet. Farben, sowie Schriftgrößen und Positionierungen sind alle in einer externen CSS-Datei wie folgt definiert:
#header {
height:84px;
padding-bottom:15px;
border-bottom:1px solid #d9d9d9;
margin-bottom:15px;
}
#title h1 {
font-size:22pt;
font-weight: normal;
padding: 35px 0 0 0;
margin-bottom:0px;
}
#title h1 a {
color: #000;
text-decoration: none;
}
.description {
font-size:11pt;
color: #CCC;
}
Im Bespiel lässt sich sehr schön erkennen, dass die Schriftgröße mit bis zu 22pt doch relativ groß Ausfällt, was sich letztendlich in der sehr guten Lesbarkeit der Webseite Trachtenmode Dirndl wiederspiegelt.
Hauptaugenmerk liegt allerdings auf dem Seitenbereich des Magazins. So wurde dort mit einer großen, sehr Ansprechenden Grafik gearbeitet, welche dem Besucher sofort vermittelt, um was es auf der Webseite geht. Um Standardmäßig alle Bilder ohne einen Rahmen dazustellen, wurde eine einfache – und durchaus wirksame – CSS-Regel definiert:
img {
border:0px;
}
Die eigentliche Seitenleiste befindet sich auf der Webseite im rechten Bereich und wurde in der externen CSS-Datei so festgelegt:
#sidebar {
float: right;
width: 250px;
padding: 0;
}
Mit 250px ist die Seitenleiste angemessen breit und bietet so auch genug Platz für das Hauptmenü, welches sich ebenfalls an dieser Stelle befindet. Dargestellt wird das Hauptmenü durch eine Verschachtelung von Listenelementen, was aber auch auf die Widget-Funktionsweise von Wordpress zurückzuführen ist. Die genaue Darstellung im CSS scheint dadurch recht komplex für einen Laien, ist aber dennoch so klein wie möglich gehalten:
#sidebar ul{
padding-bottom:0px;
}
#sidebar ul li ul{
padding-top:10px;
padding-bottom:10px;
}
#sidebar ul li {
list-style:none;
margin-left:0px;
}
#sidebar ul li ul li:before, #sidebar ul li ul li ul li:before {
color: #898989;
}
#sidebar ul li ul li ul li {
margin-left: 15px;
}
#sidebar a {
color: #555555;
text-decoration: none;
}
Abschließend lässt sich sagen, dass bei dem Portal Trachtenmode Dirndl ein sehr hübsches Design umgesetzt wurde, welches dennoch sehr Clean und aufgeräumt wirkt. Dies hat für den Benutzter den Vorteil, dass sich dieser schnell zu Recht findet und Informationen durch die gewählte Schriftart sehr gut wahrgenommen werden können.
Das eigentliche Cascade Style Sheet (=CSS) wirkt auf den ersten Blick sehr kompliziert, was sich aber bei genauerem Hinschauen sehr schnell widerlegt. Durch den sinnigen Aufbau und das gezielte benutzen der Vererbungslehre wird so die Ladezeit der Webseite Trachtenmode Dirndl auf einem sehr geringem Niveau gehalten.
Abgerundet wird dies letztendlich durch den wunderbaren Einsatz der Grafik in der Seitenleiste, welcher auch aus CSS Sicht sehr gelungen ist. Nicht nur der Besucher weis sofort was ihn auf der Seite erwartet, auch der Webdesigner kann sich sicher sein, dass er Grafiken nur normal im HTML Code einbauen muss. Das gleiche Aussehen auf jeder Unterseite von jeder Grafik wurde simpel via CSS geregelt.