Direkt zum InhaltDirekt zur SucheDirekt zur Navigation
▼ Zielgruppen ▼

Humboldt-Universität zu Berlin

Kurzer und eindeutiger Titel der Seite (H2)

Die Beschreibung fasst das Thema der Seite in nicht mehr als 1-2 Sätzen / 140 Zeichen zusammen. Ist der Inhalt bereits durch den Titel ausreichend beschrieben, kann dieses Feld leer gelassen werden. Es sind keine Zeilenumbrüche oder andere Formatierungen möglich.

Achten Sie auf eine einfache und verständliche Sprache. Ausschlaggebend ist stets das Informationsinteresse der Besucherinnen und Besucher.

Bitte verwenden Sie die untenstehenden Vorlagen, wenn Sie Plone an der Humboldt-Universität nutzen. Die entsprechenden Formatierungen können Sie in den meisten Fällen mit dem grafischen Editor durchführen; die entsprechenden Angaben finden Sie zudem im Quelltext dieser Seite.

Die Gestaltung dieser Seite insgesamt ist hingegen nicht beispielhaft. Eine nutzerfreundliche Webseite sollte keinesfalls all diese Elemente beinhalten, da sie in ihrer Gesamtheit zuwenig Orientierung bieten.

Dies ist ein wichtiger Absatz - erkennbar an der hervorgehobenen Gestaltung. Wichtige Absätze sollen sparsam eingesetzt werden, um herausgehoben im Text zu stehen. Mehr als ein wichtiger Absatz auf einer Seite wird nicht mehr als "wichtig" wahrgenommen.

Eine Überschrift (H3)

Für jeden Gedanken wird ein Absatz gesetzt. Die Absätze sollen ausschließlich linksbündig ausgerichtet sein. Die vorgegebenen Schriftformatierungen sind unbedingt beizubehalten.

Die Überschriften müssen entsprechend ihrer Hierarchie innerhalb der Seite formatiert werden, beginnend bei der Überschrift 3. Ordnung. Weitere Überschriften werden entsprechend der Seitenstruktur vergeben.

Eine untergeordnete Überschrift (H4)

  1. Auch für numerierte Listen sind die entsprechenden Vorlagen zu nutzen.
  2. Damit werden die Inhalte stets passend formatiert.

Längere Zitate sollen als Zitatblock formatiert werden. Innerhalb der HTML-Notation wird dafür die <blockquote>-Notation verwendet; unter Plone steht ein Button mit einer entsprechenden Funktion bereit.

Bilder

Bilder müssen vor dem Hochladen in der vorgesehenen Größe formatiert und im passenden Dateiformat gespeichert werden:

  • GIF (Grafiken mit Farbflächen)
  • JPG (Fotos)

Versehen Sie die Abbildungen mit passenden Alternativtexten - diese sind wichtig für Screenreader und für Fälle, in denen das Bild nicht geladen wird.

Achten Sie auf Urheber- und Nutzungsrechte: Die Urheberin bzw. der Urheber muss nah am Bild angegeben werden. Zudem müssen Sie über das Nutzungsrecht an dem Bild verfügen.

Bild mit Bildunterschrift

Die Bildgröße von 360 x 220 px ist für die Darstellung innerhalb von Fließtexten gedacht.

Grafik - Breite 360px, Höhe 220px
Optional: Bildunterschrift mit kurzer und aussagekräftiger Beschreibung des Bildinhalts
Foto: Kim Humboldt

Newsimage - Breite: 180px, Höhe 110pxText mit Bild

Diese Darstellung eignet sich gut für Übersichtsseiten, auf denen jeder Abschnitt mit einem Bild visualisiert wird. Die Bilder mit seitlichem Text stehen dabei untereinander.

Weitere Informationen zu Übersichtsseiten

Beispiel

 

 

Bild für volle Breite des Inhaltsbereichs

Zur illustrierenden Einleitung einer Seite wird das Seitenformat 717 x 219 px genutzt. Das Bild steht unterhalb von Titel und Einleitungstext. Die Breite wird im Editor auf 100% gesetzt, damit sich die Darstellung automatisch der Fensterbreite anpasst. Pro Seite ist nur ein Bild dieses Formats vorgesehen.

Grafik: 717 x 219 px

Optional: Bildunterschrift mit kurzer und aussagekräftiger Beschreibung des Bildinhalts
Foto: Kim Humboldt

Tabelle

Tabellen sollen ausschließlich für tabellarische Daten genutzt werden. Die Überschriften der Tabelle sind entsprechend auszuzeichnen.

1. Spalte Tabelle 2. Spalte Tabelle
100% 50
200% 100

Ansicht in Spalten

Für bestimmte Inhalte ist eine spaltenweise Ansicht besser geeignet als ein Text über die gesamte Breite der Webseite. Dies ist vor allem bei Linklisten der Fall.

1. Spalte

Inhalte, die keine tabellarischen Daten enthalten, aber in zwei Spalten angezeigt werden sollen, können über dieses Template formatiert werden.

2. Spalte

Setzen sie die Anzeige in Spalten bewusst und sparsam ein.

Die Anzeige ist in 2 oder 3 Spalten möglich:

1. Spalte

Für eine kompakte Darstellung: Dreispaltiges Layout

2. Spalte

  • Knappe Platznutzung
  • Linklisten

3. Spalte

Spalten passen sich der Fensterbreite an

Portalansicht

Die drei- und zweispaltigen Versionen können auch im sogenannten Portal-Layout dargestellt werden. Dabei werden die Inhalte repräsentativer dargestellt.

Eine Illustrierung mit Bildern ist in allen Fällen möglich. Die Breite der Bilder sollte dabei auf 100% gesetzt werden, damit sich die Darstellung der Breite des Browserfensters anpassen kann. Eine Höhe darf nicht festgelegt werden.

Weitere Informationen zu Portalen

1. Spalte

Topimage - Breite: 326px, Höhe 100px

  • Kurze Einträge für Links
  • Prominent platzierte Listen

2. Spalte

Topimage - Breite: 326px, Höhe 100px

Setzen sie die Anzeige in Spalten bewusst und sparsam ein.

1. Spalte

Topimage - Breite: 204px, Höhe 62px

Dreispaltiges Layout im Portal-Layout

2. Spalte

Topimage - Breite: 204px, Höhe 62px

  • Knappe Platznutzung
  • Linklisten

3. Spalte

Topimage - Breite: 204px, Höhe 62px

Spalten passen sich der Fensterbreite an

 

Verweise
Styleguide