zum Inhalt springen

Aufbau und Layout / das Grid

Eine Webseite im UzK2015-Design besteht aus vier Bereichen: 

  1. Header,
  2. MainContent-Bereich, 
  3. Marginalia-Spalte,
  4. Footer

Header und Footer sind durch das Design definiert und der Bearbeitung entzogen. Ausnahmen sind, dass Personen mit Administrationsrechten den Namen der Einrichtung setzen und gegebenenfalls das Fakultätssiegel durch ein Site-Logo ersetzen können.

Den MainContent-Bereich und die Marginalia-Spalte können Sie bearbeiten. Alles für Besuchende Ihrer Seite Wichtige sollten Sie im MainContent-Bereich anzeigen. Die Marginalia kann sinnvoll für Zusatzinformationen sein, wird aber auf Mobilgeräten eingeklappt und unterhalb den MainContent-Bereich verschoben.

vergrößern:
Typisches Layout von Seiten im UzK2015-Design auf einem PC-Bildschirm
vergrößern:
Typisches Layout von Seiten im UzK2015-Design auf einem Smartphone oder Tablet

Verantwortlich dafür ist das Grid, ein unsichtbares Gestaltungsraster für Ihre Webseite. Im Grid wurde für verschiedene Bildschirmauflösungen festgelegt, wo und wie die verschiedenen Elemente einer Seite angezeigt werden. Es ist deshalb die Grundlage für das Responsive Design und hilft die Inhalte Ihrer Seite immer optimal auf dem jeweiligen Endgerät darzustellen.

Wie viele Pixel zur Verfügung stehen ist abhängig vom Bildschirm des genutzten Anzeigegeräts. Es macht deshalb keinen Sinn zu definieren "Textblock x ist 400 Pixel breit.": abhängig vom Bildschirm ist dies sehr viel oder wenig. Stattdessen geben Sie die Breite deines Elements in Prozent der Breite des übergeordneten Elements an. Zur Auswahl stehen Ihnen:

  • 33 %
  • 50 %
  • 67 % und
  • 100 %

Wenn Sie also im MainContent-Bereich einen Textblock einfügen und dessen Breite auf 67% setzen, dann nimmt dieser zwei Drittel der Breite des MainContent-Bereich ein. Würden Sie den gleichen Textblock in die Marginalia setzen und die gleiche Breite einstellen, so würde er 67 Prozent der Marginalia einnehmen.

Die Höhe des Elements brauchen und können Sie dabei nicht angeben: die Höhe ergibt sich automatisch aus der eingestellten Breite und dem benötigten Platz das Element automatisch darzustellen.

Sie können für (fast) jedes Inhaltselement die prozentuale Breite einstellen. Das funktioniert also sowohl für Textblöcke, als auch Bilder und viele mehr.

Wenn Sie ein Inhaltselement anlegen, finden Sie fast immer ein mit "Layout" betiteltes Drop-Down-Menü. Bei Text- und Bild-Elementen sowie vielen Plugins finden Sie es im Tab "Appearance". Manche Elemente (wie der Lageplan) verfügen im Backend nicht über diesen Tab, aber hier finden Sie das Layout-Menü in einem anderen Tab. Bei Bildern finden Sie mit "Enlarge on click" zudem noch eine Lightbox-Funktionalität, das heißt Sie können das Bild relativ klein anbinden, aber Besuchende Ihrer Seite können es mit einem Klick vergrößern.

vergrößern:
Im Tab "Appeareance" wählen Sie vor allem über das Drop-Down-Menü "Layout" aus wieviel Prozent der verfügbaren Breite das Bild einnehmen soll. Die Menü-Elemente unter "Image Alignment" haben als Folge des Responsive Design Ansatz keine Funktion.

Browser versuchen die verschiedenen Inhaltselemente nebeneinander darzustellen, sofern es der Platz zulässt. Wenn Sie also drei Inhaltselemente mit jeweils 33 Prozent Breite erstellen, dann werden diese drei nebeneinander dargestellt. Neben ein Element von 50 Prozent Breite passt ein zweites, oder eines mit 33 Prozent und so weiter.

vergrößern:
Darstellung von Elementen unterschiedlicher Breite nebeneinander

Dieses Verhalten kann manchmal unerwünscht sein und manchmal ergeben sich bei variierenden Elementhöhen Probleme. Der Divider ist das Werkzeug um einen Umbruch zu erzwingen.

Das Grid hat noch eine wichtige Funktion: es legt für verschiedene Bildschirmauflösungen fest, wie viele Elemente nebeneinander dargestellt werden können. Beispiele:

  • Beim Unterschreiten einer Mindestbreite des Bildschirms wird die Marginalia-Spalte weg geklappt und unter den MainContent-Bereich verschoben.
  • Drei Inhaltselemente mit jeweils 33 Prozent Breite können auf einem PC-Bildschirm nebeneinander dargestellt werden. Auf einem sehr kleinen Bildschirm macht das aber keinen Sinn. Deshalb wird in diesem Fall zu Gunsten der Lesbarkeit das dritte Inhaltselement nach unten verschoben und alle Elemente werden auf 50 Prozent vergrößert. Bei einem noch kleineren Bildschirm werden alle drei Elemente untereinander angezeigt, dafür aber in voller Bildschirmbreite.

Im Gestaltungsleitfaden finden Sie die exakten Schwellenwerte. Es macht jedoch mehr Sinn einfach konkret mit einem Mobilgerät zu prüfen wie sich Ihre Seite verändert.

Kontakt
Bei Fragen und für eine individuelle Beratung wenden Sie sich bitte an den RRZK-Helpdesk