Seiten-Layout

Dokumentation Template 3.0

Sie können ein Grundlayout für jede Ihrer Webseiten festlegen, welches Sie später mit Seitenelementen füllen.

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

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

Ausreißer-Box erscheint bei der Handy-Ansicht über dem Text.
Ausreißer-Box erscheint bei der Handy-Ansicht über dem Text.

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.

Überschrift steht in einem eigenen Flexblock in der Standard-Texbreite oberhalb von Ausreißer und Text.
Überschrift steht in einem eigenen Flexblock in der Standard-Texbreite oberhalb von Ausreißer und Text.

Überschriften für Ausreißer korrekt platzieren

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

Fertige Seite
Fertige Seite

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.

Eine Auswahl von 0 bis 30 Pixeln in Fünferschritten steht als Abstand nach unten zur Verfügung.
Stellen Sie den Abstand individuell ein.

Bitte beachten Sie bei den Einstellungen auch das Verhalten in der mobilen Ansicht. Ziehen Sie dazu das Browserfenster einfach auf Smartphone-Breite.

Support vom Webteam

 

TIK - NFL - Webteam

Allmandring 30, 70550 Stuttgart

Zum Seitenanfang