Markup

Einfacher Layoutwechsel

Manchmal kommt man mit einem Template nicht weit. Aber anstatt eine zweite Vorlage zu erstellen, genügt oft ein kleiner Kniff, um das Aussehen auf einigen Seiten anzupassen.

Ein einfaches Beispiel:

Eine Kundenwebsite, basierend auf einem einfachen CMS, enthält eine horizontale Navigation mit etwa 4-5 Unterpunkten – lediglich eine Seite besitzt mehr als 10 Navigationspunkte. Da diese mit kleinen Grafiken versehen werden und eine feste Breite besitzen, sprengen die 10 Menüpunkte das Design.

Wie also können wir das Problem beheben?

Mit eine zusätzlichen Klasse für den Body oder den oft verwendeten Container (oft wrapper genannt).

In vielen CMS kommen zudem Platzhalter zum Einsatz, die wir uns zunutze machen können. In unserem kleinen CMS gibt es also den Platzhalter pagetitle. Diesen wenden wir auf unser body-Element an:

<body class="{$pagetitle}">

Für die Seite „Home“ erhalten wir also class="Home" und für die Seite „Produkte“ dementsprechend class="Produkte".

Diese Wrapperklasse, wie ich sie gerne nenne, wird per CSS gestaltet und unsere 10 Unterprunkte auf der Seite „Produkte“ erhalten eine geringere Breite und vielleicht ein anderes Hintergrundbild oder eine andere Farbe:

ul#nav li a {
		width: 100px;
		text-align: center;
		float: left;
		color: #FF0000;
}
/* Wrapperklasse: Breitenanpassung der Links */
.Produkte #nav li a {
		width: 70px;
		color: #33CC00;
}

Für jedes CMS ist etwas dabei

Für andere CMS kann man diese Techniken natürlich auch einsetzen. WordPress beispielsweise besitzt die bekannten Template Tags. Diese kann man, obwohl sie als Funktionen in einem „guten“ Template nichts verloren haben, ebenfalls verwenden, zum Beispiel the_category() für eine kategorienabhängige Darstellung:

<body class="<?php the_category() ?>">

Hinweis: Mir ist klar, dass WordPress für solche kategorienabhängigen Layouts eine andere Template-Verwaltung besitzt, bspw. wird das Template category-13.php nur für die Kategorie 13 verwendet, usw.

So lassen sich ganz leicht Layouts realisieren, die vom Inhalt abhängig sind, und für jede Seite die ideale Darstellung wählen.

Ein klein wenig fühle ich mich jetzt an das apple.com-Redesign erinnert. Wer sagte doch gleich, dass die Seiten den Inhalten angepasst wurden? Vielleicht ja mit einer Technik wie dieser. Wer weiß…

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

1 Kommentare

  1. Pingback: URL-abhängiges Design

Kommentare sind geschlossen.