Die in diesem Styleguide enthaltenen Gestaltungsvorgaben wurden entwickelt, um ein optimales Erscheinungsbild der Webauftritte bei einer Bildschirmauflösung von 1024px x 768px (Breite x Höhe) zu gewährleisten.

Die Gestaltungsfläche wird dabei in ein Raster mit der Rastereinheit 10x10px aufgeteilt. An diesem Raster richten sich alle Inhalte der Seiten aus. Gemäß der Vorgaben zur Barrierefreiheit (BITV I), dass Webseiten unabhängig von Bildschirmauflösungen, Browsern oder eingestellter Schriftgröße funktionieren müssen, dient dieses Raster in erster Linie als Gestaltungshilfe.

Die Gestaltungsfläche ist in sechs konsistente Bereiche aufgeteilt, die in ihrer grundsätzlichen Darstellung nicht verändert werden dürfen. Nur so ist gewährleistet, dass der Internetauftritt der TUB und deren untergeordnete Fakultäten und Fachgebiete ein einheitliches Erscheinungsbild erhalten.

Die sechs Bereiche sind:

1. Der Logobereich für die Wortbildmarke
2. Der Kopfbereich mit Servicenavigation, Seitenüberschrift, Suche, Login und Zielgruppennavigation
3. Der Navigationsbereich mit Inhaltsnavigation
4. Der Contentbereich für alle Text- und Bildinhalte
5. Die rechte Randspalte mit Hilfsfunktionen und Serviceboxen
6. Der Fußbereich mit Servicenavigation und Autorenlink

Die detaillierten Angaben über die Gestaltung und Funktion dieser Bereiche folgen im Abschnitt "Seitenaufbau".

Der Logobereich befindet sich oben links im Layout. Er ist ausschließlich der Bildwortmarke der TUB vorbehalten. Das Logo liegt auf einer weißen Fläche, der so genannten "Logo-Schutzzone". Diese neutrale Abbildungsfläche ist in der Größe flexibel und ermöglicht so auch eine spätere Änderung des Logos.

Die Breite des Logobereiches ergibt sich aus der Breite der Bildwortmarke.

Die Größe beträgt zurzeit: 219x75px

Der Abstand zwischen Logo und Logoschutzbereich:

• nach oben: 5px
• nach unten: 5px
• nach links: 125px
• nach rechts: 6px

Der Abstand zum Rand des Logobereichs beträgt:

• auf der Startseite nach oben 25px und nach unten 109px
• auf Unterseiten nach oben 25px und nach unten 65px

Unterhalb der Logo-Schutzzone wird der vertikale Pfad bei Portalwechsel eingeblendet. Die Größe der Pfadbalken ist im technischen Teil des Styleguides definiert.

Der Kopfbereich ist das visuell tragende Element des Internetauftrittes der TUB. Er besteht aus dem Keyvisual, der Servicenavigation, einer Abbildungsfläche für die Seitenüberschrift und Logos von z.B. Fakultäten, einer Schnellsuche, einem Login und der Zielgruppennavigation.

Das Keyvisual zeigt ein Motiv der TUB, das übergreifend für den Gesamtauftritt als Einstieg in das Portal geeignet ist. Da es als Abbildungsfläche für alle weiteren Elemente des Kopfbereichs dient, sollte es möglichst flächig, ruhig und farblich reduziert sein. Als Motiv wird das TU-Hauptgebäude mit Himmel verwendet Auf den Unterseiten verringert sich die Höhe des Keyvisuals. Um einen visuell-inhaltlichen Konflikt zu vermeiden, ist nur der Hintergrund-Himmel als Motiv zu verwenden.

Die Größe beträgt:

• Auf der Startseite: 209px x 1600px
• Auf den Unterseiten: 165px x 1600px

Im oberen Balken des Kopfbereiches befindet sich die Servicenavigation. Sie dient der Aufnahme ständig sichtbarer Servicefunktionen der gesamten Internetpräsenz.

Die weiße Fläche unterhalb der Servicenavigation enthält die Seitenüberschrift und auf den Fachgebietsseiten auch deren Logo. Weitere Elemente sind auf dieser Fläche nicht einsetzbar.

Der untere Rand muss bei der Standardauflösung von 1024px x 768px mit dem unteren Rand des Logobereiches vertikal abschließen, um das visuelle Gleichgewicht des Kopfbereiches zu bewahren.

Die Schnellsuche in der rechten Spalte des Kopfbereiches besteht aus den Elementen Sucheingabefeld und Submitbutton. Die Schnellsuche wird seitenübergreifend angeboten.

Unterhalb der Schnellsuche befindet sich auf dem zentralen TUB-Typo3-Server das Login-Feld für die Nutzeranmeldung der TUB Internetpräsenz. Andere Typo3- Instanzen mit Corporate Design müssen dort einen ungenutzten Bereich (weißes Loch) haben. Solche Instanzen müssen ihre Login-Mechanismen optisch anders realisieren und verorten.

Auch dieses Modul wird seitenübergreifend angezeigt.

Die Zielgruppennavigation wird in Form eines roten Balkens mit weißer Outline am unteren Rand des Kopfes angezeigt. Auf ihr befinden sich zurzeit sechs Links zu zielgruppenspezifischen Seiten.

Die Zielgruppennavigation wird in den Hauptbereichen und den Zielgruppenbereichen angezeigt. Einrichtungen können je nach Bedarf eigene Zielgruppenleisten verwenden.

Der Navigationsbereich nimmt alle Navigationsebenen auf. Die für den Styleguide entwickelte Inhaltsnavigation ist für die Abbildung von drei Navigationsebenen ausgelegt. Weitere Ebenen müssen im Contentbereich der Seite angezeigt werden.

Der Abstand des Navigationsbereiches zum Contentbereich nach rechts beträgt 40px.

Das Verhalten der Navigation ist der technischen Dokumentation des Styleguides zu entnehmen.

Breite der Navigation: 220px

Der Contentbereich beinhaltet die redaktionellen Inhalte der Internetpräsenz. Dazu gehören Text- und Bildinformationen, Listen, Tabellen, Formulare und Werbebanner. Die einzelnen Inhaltstypen sind in der Funktionsübersicht dokumentiert.

Der Contentbereich beginnt rechts neben dem Navigationsbereich mit einem horizontalen Abstand von 40px. Er richtet sich oben horizontal am Navigationsbereich und der rechten Randspalte aus.

Die Breite des Contentbereiches richtet sich nach der Breite des Browserfensters, ist jedoch auf die maximale Breite von 490px begrenzt, um eine optimale Lesbarkeit der Texte zu gewährleisten.

Der Abstand zur rechten Randspalte beträgt ebenfalls 40px.

Alle Texte und Tabellen im Contentbereich können grundsätzlich in Spalten angeordnet werden. Dabei ist aber darauf zu achten, mehrspaltige Inhaltstypen nur dann einzusetzen, wenn sie in gerader Anzahl vorhanden sind. Damit werden optische Lücken im Contentbereich vermieden.

Die Darstellung mehrspaltiger Inhaltstypen ist der Funktionsübersicht zu entnehmen.

Bilder und Grafiken innerhalb des Contentbereiches werden in ihren Formaten (siehe Bildformate) am 10px-Raster ausgrichtet und je nach Seitentyp platziert.

Die Möglichkeiten der Platzierung sind den Seitentypen in der Funktionsübersicht zu entnehmen.

Werden Bilder von einem Text umflossen, ist zwischen Bild und Text grundsätzlich ein Abstand von 15px einzuhalten.

Die Bildquelle muss immer im Feld "Copyright" des Bildes angegeben werden. Automatisch wird in der Bildunterschrift das Icon für die Foto-Detailansicht (öffnet sich in einem Popup-Fenster) angezeigt.

Bildelemente einer Seite können nur von Sehenden und visuellen Browsern als solche wahrgenommen werden. Blinde Nutzer beispielsweise, aber auch Suchmaschinen sind darauf angewiesen, dass die Informationen, die Bild, Symbol oder Grafik beinhalten, in Textform hinterlegt werden. Dies kann durch den Einsatz eines aussagekräftigen Textes im <alt>-Attribut des IMG-Elementes für jedes Bildelement erreicht werden.

So genannte Spacer oder unsichtbare Platzhalter benötigen zwar keinen Alt-Text, sollen aber klar als Layoutelement benannt sein. Falls ein Bildelement einen Link aufruft, sollte der Anlass und das genaue Ziel des Links im <alt>- oder im <title>-Text bezeichnet werden. Besteht für eine Grafik, zum Beispiel einer mathematischen Gleichung (MathML-Element), die Möglichkeit, diese durch HTML-Markup darzustellen, ist diese Methode zu bevorzugen (WAI 3.1 / BITV 3.1).

Die Randspalte auf der rechten Seite besteht aus zwei Inhaltstypen:

1. einer Hilfsfunktionsbox, welche die Bedienung der Webseite vereinfacht. Die Box Direktzugang erscheint auf allen Seiten des zentralen TUB-Typo3-Servers an erster Stelle. Die Box Hilfefunktionen ist dagegen optional. Sie kann sowohl ausgeklappt als auch eingeklappt oder gar nicht verwendet werden. Auf der TU-Startseite wird die ausgeklappte Hilfebox angezeigt.
2. den darunter angeordneten Serviceboxen

Den visuellen Abschluss der Website bildet der dreigeteilte Fußbereich, bestehend aus:

1. dem Autorenlink mit dem Hinweis der letzten Aktualisierung
2. einer "Druck-" und einer "Seite empfehlen"-Funktion
3. der inhaltlich aus dem Kopfbereich gespiegelten Servicenavigation