Modulares Layout
Wenn Sie sich jedes Element der Webseiten als eine Zeile vorstellen, bedeutet das: Sie können die Spaltenaufteilung pro Zeile festlegen. Manche Elemente füllen die Zeile über die komplette Breite aus, dort haben Sie keinen Gestaltungsspielraum. Andere Elemente können Sie einspaltig oder zweispaltig (als Ausreißer links oder rechts) anordnen – ganz nach Ihrem Wunsch und Inhalt.
Responsives Webdesign
Das Webdesign der Universität Stuttgart ist responsiv. Das bedeutet, die Seiten und Elemente passen sich jeweils der Bildschirmgröße an.
Pflicht-Elemente
Es gibt vier Elemente im Standard-Template, die künftig auf jeder Webseite der Uni Stuttgart an einer fest definierten Position zu finden sind:
Standard-Template
Layout-Zeilen (Rows)
Jede Containerpage besteht aus Layout-Zeilen (rows). In der hellblauen (nur für Intro-Box), den dunkelblauen Standard-Layoutrows und der Layoutrow in voller Breite können die verschiedenen Seitenelemente platziert werden.
Layout-Varianten
Volle Breite
Inhalte werden über die volle Breite (= 12 cols) dargestellt. Diese definiert sich durch den Anfang des Uni-Logos oben links und das Hamburger-Menü der Navigation oben rechts im Header. Spezielle Element in der vollen Breite sind der Newsstream, das Übersichtselement, der Premium-Link, die Linkgruppen und die Fotostrecke.
Standard-Textbreite
Inhalte in Standard-Textbreite (= 8 cols) haben rechts und links Weißraum und füllen nicht die volle Breite aus. Es handelt sich meist um Text-Inhalte. Die geringere Breite des Textes ermöglicht bessere Lesbarkeit. Angehängte Bilder werden über die volle Breite dargestellt.
Ausreißer
Die Ausreißer-Inhalte stehen immer rechts (= 6/3 cols) oder links (= 3/6 cols) neben Text-Inhalten. Diese Zeilen-Gestaltung lockert die Webseiten auf, indem Bilder oder Boxen aus der Standard-Textbreite ausbrechen. Es gibt Elemente, die an der Position des Ausreißers stehen müssen, wie die Icon-Box und die Logo-Box. Und es gibt Elemente, die können als Ausreißer stehen, wie zum Beispiel ein Flexblock mit Bildern oder Videos und Linklisten.
Ausreißer-Boxen im responsiven Design
Bei der einspaltigen Darstellung auf dem Smartphone gibt es bei den Ausreißern eine Besonderheit: Sie springen immer über die daneben stehende Layoutrow (6 cols), werden also auf dem Handy oberhalb des Texts angezeigt. Eine Icon-Box im Ausreißer rechts neben einem Textblock sieht auf dem Smartphone also wie auf dem Screenshot aus.
Überschriften für Ausreißer korrekt plazieren
Wichtig: Wer den Ausreißer als inhaltliche Ergänzung zum Textblock nutzt, sollte darum die Überschrift in einem extra Flexblock in einer eigenen Layoutrow in der Standardbreite (8 cols) oberhalb der beiden Elementen anlegen (siehe Screenshot oder testen Sie es hier auf der Seite, indem Sie das Browserfenster auf die Größe eines Smartphone- Bildschirms ziehen). Somit steht in der Handy-Ansicht zuerst die Überschrift, dann der Ausreißer und darunter folgt der Text.
Gestaltungsregeln
Mit diesen drei Layout-Varianten können Sie ansprechende und abwechslungsreiche Webseiten gestalten. Dabei beachten Sie bitte folgende Regeln:
- Es dürfen niemals zwei Volle-Breite-Elemente mit blauer Hintergrundfarbe (Hellblau oder Blauverlauf) direkt aufeinander folgen. Unterschiedliche Hintergrundfarben helfen dem Auge nämlich bei der Strukturierung der Seite.
- Bilder oder Boxen als Ausreißer „kleben“ wir nicht direkt über oder unter andere Bilder oder Elemente mit farbigem Hintergrund.
- Zwischen zwei Ausreißer-Zeilen muss immer eine Zeile Standard-Textbreite stehen. Schließlich sind Ausreißer da, um viel Fließtext aufzulockern und Blickfang zu sein. Wir wechseln Ausreißer links und Ausreißer rechts ab und packen nicht alle Ausreißer auf die gleiche Seite.
Abstände steuern
Regulär haben alle Seitenelemente nach unten einen Abstand von 30 Pixeln. Weil manche Elemente als Sinn-Einheit optisch enger zusammenstehen sollen, können Sie den Abstand selbst bestimmen.
Gehen Sie dazu auf die Seitenelement-Einstellungen eines Elements (Zahnrad-Symbol 
hinter dem Bearbeitungspunkt). Im Dialog-Fenster sehen Sie bei jedem Element den Eintrag „Element-Abstand nach unten (Pixel-Wert)“. Nun können Sie in 5-Pixel-Schritten den Wert von 0 bis zu 30 Pixeln einstellen.
Bitte beachten Sie bei den Einstellungen auch das Verhalten in der mobilen Ansicht. Ziehen Sie dazu das Browserfenster einfach auf Smartphone-Breite.