Header, Banner, Teaser
Website Styleguide
Header, Banner und Teaser sind besondere Gestaltungselemente. Sie bestehen meist aus Bildern, auffälligen Farben und kurzen Texten. Ihr Hauptziel ist es, die Aufmerksamkeit der Besucher sofort zu wecken. Wenn Menschen eine Seite öffnen, schauen sie oft zuerst auf große Bilder oder hervorgehobene Bereiche. Genau dort kommen diese Elemente zum Einsatz.
Header
Der Header befindet sich am oberen Rand einer Seite und ist der erste Bereich, den Nutzer sehen. Er besteht aus einem Hintergrundbild (Headerbild) sowie der darauf platzierten Seitenüberschrift.
Header werden an Unterseiten vererbt. Wird beispielsweise eine Unterseite im Bereich Baukultur angelegt und bleibt dort der Headerbereich leer, erscheint automatisch der Header der übergeordneten Seite Baukultur. Wird auf der Unterseite jedoch ein eigener Header angelegt, wird dieser angezeigt. Dadurch können auch auf Unterseiten individuelle Bilder und Seitenüberschriften verwendet werden.
Um einen neuen Header anzulegen, empfiehlt es sich, einen bestehenden Header von einer anderen Seite zu kopieren, einzufügen und anschließend Bild und Text anzupassen.
Das Headerbild sollte genügend Kontrast zur darüberliegenden Überschrift aufweisen. Das bedeutet: Bei einer roten Überschrift sollte das Bild eher hell sein, bei einer weißen Überschrift ausreichend dunkel.
Headerbilder werden je nach Bildschirmbreite des Endgeräts automatisch beschnitten – entweder links und rechts oder oben und unten – damit das Bild optimal in den sichtbaren Bereich eingepasst werden kann. Dies sollte bei der Motivwahl berücksichtigt werden.
Da das Bild skaliert und eingepasst wird, kann grundsätzlich jedes Querformat als Headerbild verwendet werden. Es empfiehlt es sich jedoch, Headerbilder möglichst im Format 1920 × 800 Pixel anzulegen.
Banner
Ein Banner ist ein auffälliger Bereich mit Bild und Text, der innerhalb einer Seite platziert werden kann. Banner werden häufig genutzt, um auf wichtige und besondere Inhalte hinzuweisen und diese zu verlinken. Durch ihre Größe und Gestaltung stechen sie aus dem restlichen Inhalt hervor und lenken den Blick gezielt auf bestimmte Informationen. Aktuell werden Banner nur auf der Startseite innerhalb eines Karrussels eingesetzt. Auch hier empfiehlt es sich, ein vorhandenes Banner zu kopieren, einzufügen und anzupassen.
Bannergrafiken werden in einer Größe von 1920 × 800 px angelegt. Bei der Gestaltung sollte darauf geachtet werden, dass auf einer Seite des Bildes (links oder rechts) ausreichend Platz bleibt, damit dort eine Textbox über dem Bild platziert werden kann.
In Desktop-Auflösungen wird diese Textbox direkt über dem Bannerbild dargestellt. Bei Smartphone-Auflösungen hingegen wird der Text unterhalb des Bildes angezeigt. Damit das Bild auch auf kleinen Displays sinnvoll zugeschnitten wird, wird für diese Ansichten ein Bildformat von 3:2 definiert. Dabei wird im Grunde der Bildbereich entfernt, auf dem in der Desktopansicht die Textbox liegt. So bleibt auf mobilen Geräten der wichtige Bildausschnitt sichtbar, während der Text separat darunter erscheint. Damit dies korrekt funktioniert, müssen beim Zuweisen des Bildes folgende Einstellungen vorgenommen werden:
1. Bannerbild erstellen und zuweisen
- Das Bild in der Größe 1920 × 800 px anlegen.
- Das Bild anschließend im Bildelement zuweisen.
2. Seitenverhältnisse im Editor festlegen
Im Bildelement im Editor werden folgende Seitenverhältnisse definiert:
- Mobile: Seitenverhältnis 3:2
- Smart Mobile Devices: Seitenverhältnis 3:2
Alle anderen Seitenverhältnisse bleiben auf „Free“ eingestellt. In diesen Fällen bestimmt die Bildgröße von 1920 × 800 px automatisch das Seitenverhältnis von 12:5.
Notwendige Einstellungen im Bildeditor
Teaser
Ein Teaser ist kleiner als ein Banner und dient ebenfalls dazu, Interesse zu wecken. Er gibt einen kurzen Vorgeschmack auf einen bestimmten Inhalt. Der Teaser zeigt ein Bild, eine kurze Überschrift, ein bis zwei Sätze Beschreibung und einen Link. Wenn der Nutzer neugierig wird, kann er darauf klicken und mehr erfahren.
Ebenso wie die Banner werden die Teaser aktuell nur auf der Startseite verwendet. Anders als beim Banner steht der Text hier neben dem Bild. Die Teaser sind so programmiert, dass Bild und Text abwechselnd angeordnet werden, um das Layout aufzulockern. Steht also in der ersten Zeile links der Text und rechts das Bild, ist die Anordnung in der folgenden Zeile umgekehrt.
Bei Mobilauflösungen muss diese Reihenfolge jedoch angepasst werden, da der Text dort unter dem Bild dargestellt wird. In diesem Fall wird immer zuerst das Bild und anschließend der Text angezeigt. Das Teasermodul ist entsprechend programmiert, sodass diese Anpassung automatisch erfolgt. Deshalb werden die Teaser über ein separates Modul gepflegt, das sie automatisch im korrekten Layout auf der Startseite platziert.
Die Bilder für die Teaser werden – ebenso wie die Headerbilder – automatisch eingepasst, sodass jedes Querformat verwendet werden kann. Die Bildbreite sollte jedoch mindestens 1200 px und maximal 2400 px betragen.
Die flexible Kombination unterschiedlicher Gestaltungselemente – darunter Banner, Teaser, Header, ein- und mehrspaltige Textbereiche sowie Bilder und Bildergalerien – ermöglicht es, Inhalte abwechslungsreich, strukturiert und visuell ansprechend aufzubereiten. Durch den gezielten Einsatz dieser Komponenten können Informationen nicht nur klar vermittelt, sondern auch emotional aufgeladen und in einen größeren gestalterischen Kontext eingebettet werden. Unterschiedliche Layouts eröffnen dabei vielfältige Möglichkeiten, Inhalte zu gewichten, hervorzuheben und für verschiedene Zielgruppen optimal zugänglich zu machen.
Nutzen Sie diese gestalterische Freiheit bewusst: Variieren Sie Strukturen, spielen Sie mit Bild- und Textelementen und setzen Sie gezielt Akzente, um Aufmerksamkeit zu lenken und Nutzerinnen und Nutzer intuitiv durch die Seite zu führen. Ein gelungener Mix aus klarer Struktur und kreativer Gestaltung trägt wesentlich dazu bei, Inhalte lebendig und einprägsam zu präsentieren.
Seien Sie dabei ruhig mutig: Probieren Sie unterschiedliche Kombinationen aus, brechen Sie bei Bedarf mit gewohnten Mustern und entwickeln Sie ein Gespür dafür, welche Darstellungsformen Ihre Inhalte am besten unterstützen. Gestaltungsfreude und Experimentierbereitschaft sind ausdrücklich erwünscht – denn nur so entstehen Seiten, die nicht nur informieren, sondern auch begeistern und im Gedächtnis bleiben. Gleichzeitig gilt es, die Balance zwischen Kreativität und Benutzerfreundlichkeit zu wahren, damit alle Inhalte jederzeit klar verständlich und leicht zugänglich bleiben.