Typo3-Frontend: Die Elemente auf einer Webseite im UHI Design 2016

Die Webseite im UHI Design 2016 gliedert sich grob in die folgenden Bereiche:

  1. Kopfbereich
  2. Inhaltsbereich (mit / ohne Randspalte)
  3. Footer

sowie für spezielle Anwendungen noch den Bereich 'Hauptmenü rechte Spalte', welche im folgenden genauer dargestellt werden. 

Der Kopfbereich des UHI-Design umfasst die folgenden Elemente:

  • das Uni-Logo oben links,
  • das Suchfeld, den optionalen Sprachumschalter sowie das 'Meta-Menü' oben rechts,
  • ein optionales 'Keyvisual' (z.B. auf der Startseite der Universitätswebseiten),
  • einen optionalen Farbbalken (wie auf dieser Seite in der allgemeinen Uni-Farbe 'rot'),
  • die Krümelpfad-Navigation

Das Uni-Logo ist unveränderlich, das Suchfeld wird auf schmalen Bildschirmen durch eine Lupe symbolisiert. Der Sprachumschalter wird nur angezeigt, wenn die Webseite in anderen Übersetzungen vorliegt und auf schmalen Bildschirmen durch ein Globus-Icon visualisiert. 

Das 'Meta-Menü' soll uni-weit einheitlich sein und enthält derzeit einen Link zum Intranet (für Mitarbeiter_innen / Studierende) sowie zum Impressum und zur Datenschutzerklärung.

Ob eine Seite ein 'Keyvisual' bekommt, liegt im Ermessen der jeweils für den Inhalt der Seite verantwortlichen Einrichtung. 

Ein Farbbalken wird bei allen Einrichtungen in der Farbe des jeweiligen Fachbereichs angezeigt. Über die Typo3-Administration kann Einfluss darauf genommen werden, auf welchen 'Oberseite' das Symbol mit dem Haus verlinkt ist und welche 'Oberseite' im Farbbalken angezeigt wird. Das kann z.B. bei Abteilungen dafür sorgen, dass weiterhin die Homepage des Instituts über den Farbbalken erreicht werden kann. 

Für nicht auf einen Fachbereich bezogene Einrichtungen wird die Uni-Farbe rot angezeigt, in Ausnahmen sind auch weitere Farben möglich. Der Krümelpfad wird i.A. unterhalb des Farbbalkens angezeigt. Farbbalken und Krümelpfad werden mit Ausnahme des Seitenlayouts 'Start' immer angezeigt und sind im Layout nicht veränderlich. 

Der Inhaltsbereich einer Webseite besteht aus 

  • einer Leiste mit Links z.B. zum Drucken und zu sozialen Netzwerken,
  • dem eigentlichen Hauptbereich in der Mitte,
  • einer optionalen Randspalte (wenn das Seitenlayout 'mit Randspalte' ausgewählt wurde). 

Die Link-Leiste ist auf breiten Bildschirmen am linken Bildschirmrand dargestellt, auf schmalen Bildschirmen unten oberhalb des Footers. Sie enthält z.B. Links zum Facebook-Auftritt der Uni (von der ZSB betreut) oder zum Youtube-Kanal der Uni. Diese Leiste kann von der Typo3-Administration für einzelne Einrichtungen modifiziert werden, z.B. um einen eigenen Facebook-Auftritt einer Einrichtung zu verlinken oder das Facebook-Logo für eine Einrichtung zu entfernen. Optional sind derzeit Links für Xing und Twitter vorhanden, die bei Bedarf eingeblendet werden können.

Die Randspalte wird auf breiten Bildschirmen rechts vom Hauptbereich angezeigt, auf schmalen Bildschirmen unterhalb der Inhaltselemente des Hauptbereiches. Sofern auf einer Oberseite Elemente in der Randspalte vorhanden sind, werden diese auf alle Unterseiten mit einer Randspalte 'vererbt', z.B. um eine Kontaktbox einer Einrichtung auf allen Unterseiten automatisch anzeigen zu lassen. Diese Verhalten kann bei Bedarf durch die Typo3-Administration abgeschaltet werden, für einzelne Seiten kann die Vererbung in der Randspalte durch das Anlegen eines leeren Inhaltselements unterbunden werden. 

Der Footer ist typischerweise identisch für alle Webseiten der Uni, kann aber von Typo3-Redakteuren im Backend modifiziert werden. 

Der Footer besteht aus den Bereichen:

  • Copyright-Balken
  • Footer 1
  • Footer 2 (enthält die Logos der Zertifikate)
  • Footer unten (enthält die Sitemap mit den Menüeinträgen des Hauptmenüs auf der Startseite der Universität)

Der Copyright-Balken ist identisch für alle Universitätswebseiten und unveränderlich, die Footer 1 und 2 können mit eigenen Inhalten belegt werden. 

Auf breiten Bildschirmen kann im Menü nach dem Ausklappen eines Menüpunkts der freie Bereich rechts mit Inhalt gefüllt werden, wie z.B. auf der Hauptseite der Uni, wenn man das Menü 'Studium' anklickt. 

Diese Inhaltselemente müssen im Typo3-Backend unter 'Hauptmenü rechte Spalte' eingepflegt werden auf der jeweiligen Seite mit dem Startmenüpunkt. Im obigen Beispiel wird also auf der Seite 'Studium' ein oder mehrere Inhaltselemente im Bereich 'Hauptmenü rechte Spalte' untergebracht. 

Aus technischen Gründen sind hier nicht alle Inhaltselemente möglich bzw. 'designed'. Auch werden diese Element auf schmalen Bildschirmen (mobilen Geräten) gar nicht angezeigt. Deswegen sollte man diese Möglichkeit nur mit Bedacht einsetzen und vorher gut auf einem Testserver ausprobieren.

Fragen hierzu können gerne an die Typo3-Administration gestellt werden.