zum Inhalt springen

Umgang mit der Navigation

In vielen Fällen werden Besuchende Ihrer Seite verschiedene Inhalte über das so genannte Mega-Flyout-Menü entdecken. Sobald Ihre Seite jedoch von der Startseite aus gesehen mehr als drei Ebenen aufweist, müssen Sie zusätzliche Navigationselemente verwenden. Wenn zum Beispiel über eine Suchmaschine eine untergeordnete Seite aufgerufen wurde, hilft die Rootline den Besuchenden bei der Orientierung. Bei Aufruf von einem Mobilgerät ändern die Navigationselemente ihr Aussehen um optimale Nutzbarkeit zu gewährleisten.

Das Mega-Flyout-Menü für die ersten drei Ebenen

Auf jeder Seite wird Ihnen die Hauptnavigationsleiste angezeigt. Die einzelnen Menüpunkte werden voll automatisch aus den Titeln der Seite eine Ebene unterhalb der Startseite generiert. Sobald Sie einen dieser Seitentitel, also einen Tab in der Hauptnavigationsleiste anklicken, öffnet sich das so genannte Mega-Flyout-Menü. Dieses zeigt pro Tab die der jeweiligen Seite im Seitenbaum untergeordneten Seiten an.

vergrößern:
Ein ausgeklapptes Mega-Flyout-Menü auf der Website des RRZK.

Das Mega-Flyout-Menü ist darauf ausgelegt 3 Ebenen unterhalb der Startseite mit jeweils 3 bis 6 Seiten pro Ebene darzustellen. Sie erreichen ein optimales optisches Erscheinungsbild, wenn Ihre Seite innerhalb dieser Parameter bleibt und jede Kategorie auf jeder Ebene etwa gleich viele Seiten aufweist.

Vermeiden Sie zu viele Menüpunkte mit zu langen Namen zu generieren. Dies ist besonders für die erste Ebene unterhalb der Startseite wichtig, aus denen die Hauptnavigationsleiste generiert wird. Möglicherweise entwickeln Sie die Seite auf einem sehr großen Bildschirm, doch nicht alle Besuchenden Ihrer Site werden mit einem ebenso großen Bildschirm Ihre Seite navigieren und immer mehr nutzen Mobilgeräten wie Smartphones. Zu lange Benennungen werden in der Mobilansicht nicht umgebrochen, sondern stattdessen abgeschnitten.

Wenn Ihre Seite nun 10 Menüpunkte verwendet, werden diese unter Umständen unschön umgebrochen. Ab einer Bildschirmbreite von 768 Pixeln (also zum Beispiel auf vielen Tablets) wird das Menü voll angezeigt. Verwenden Sie ein Institutslogo, verbleiben Ihnen nur noch rund 520 Pixel für das gesamte Menü. Das entspricht etwa insgesamt 80 Zeichen, wobei zwischen jedem Tab 3 Zeichen zur Trennung benutzt werden.

Navigation zu Inhalten unterhalb der dritten Ebene

vergrößern: Screenshot Subnavigation
Spätestens ab der 3. Ebene muss mit dieser zusätzlichen Navigation gearbeitet werden. Sie können sie auch schon auf oberen Ebenen einblenden.

Das Mega-Flyout Menü wird nur für drei Ebenen unterhalb der Startseite ausgegeben. Sollte Ihre Website so groß und komplex sein, dass Sie mehr als diese Ebenen verwenden, erscheint auf allen Seiten ab der dritten Ebene unterhalb der Startseite ein weiteres Menü in der Marginalspalte.

Mit einem Administrations-Account können Sie das Verhalten dieses Sub-Menü anpassen. Sie können wählen ab welcher Ebene es angezeigt wird. Darüber hinaus können Sie zwischen zwei Varianten umschalten:

  • Standard: Anzeige aller untergeordneten Seiten
  • Anzeige aller untergeordneten Seiten und aller Seiten auf der gleichen Ebene

Dazu muss eine Person mit Administrationsaccount im Konstanteneditor unter dem Punkt "Uni Köln 2015 - Experteneinstellungen" die beiden Parameter UZK2015.subMenu.entryLevel und UZK2015.subMenu.secondLevel anpassen.
Redakteure wenden sich an ihren Admin, für UniTy3 verwenden Sie bitte das Kontaktformular.

Allerdings können Sie bei Bedarf dieses Menü manuell erzeugen anstatt das Template anzupassen.

Ein möglicher Nachteil dieser Variante ist, dass dieses Menü in der Marginalspalte angezeigt wird. Diese wird aber beim automatischen Wechsel in eine mobile Ansicht (siehe unten) zusammengeklappt was einzelne Nutzende der Seite verwirren könnte. Hier bietet es sich an Next-Level-Teaser aus dem Fundus der erweiterten Inhaltselemente des UzK-2015 Design zu verwenden um Unterseiten deutlich anzuzeigen.

Rootline Menü / Breadcrumb

Das Rootline Menü (oft auch Breadcrumbs Menü genannt) ist ein zusätzliches, automatisch generiertes Menü um den Nutzenden der Seite die Orientierung zu erleichtern. Sie finden das Rootline Menü immer oberhalb der Seitenüberschrift, das heißt bei Ansicht auf einem PC-Monitor unterhalb des Mega-Flyout Menü.

Die Rootline ist dabei eine hierarchische Auflistung der einzelnen Seiten von der Startseite Ihrer Site runter bis zur aktuellen Seite. Das entspricht meistens dem Klickpfad, dem Nutzende folgen würden um auf die Seite zu gelangen. Personen, welche die Seite über eine Suchmaschine gefunden haben, können an der Rootline sofort erkennen wo auf der Seite sie sich befinden.

Jedes einzelne Element ist verlinkt um eine schnelle Navigation zu ermöglichen. Wenn Sie das Pluszeichen neben einem Eintrag anklicken, öffnet sich ein kleines Menü in welchem Sie direkt Seiten unterhalb dieser auswählen können.

vergrößern:
Das Rootline Menü nachdem mit Klick auf das Plus-Symbol ein Untermenü aufgeklappt wurde.

Automatische Umschaltung auf mobile Navigation

Das UzK 2015 Design folgt dem Responsive Design Ansatz. Das bedeutet Ihre Seite passt sich automatisiert dem Bildschirm an auf dem sie angezeigt wird. Sobald ein Mobilgerät erkannt wird, schaltet die Seite auf eine mobile Navigation um. Diese ist platzsparender und zum Beispiel auf ein Handy deutlich besser zu bedienen als es ein drastisch verkleinertes Mega-Flyout-Menü jemals sein könnte. Um zu testen wie Ihre Seite mit mobiler Navigation aussieht, rufen Sie diese idealerweise auf einem Mobilgerät auf. Alternativ verkleinern Sie einfach Ihr Browserfenster bis die Ansicht umschaltet.

vergrößern:
Auf diesem Screenshot von der Mobil-Ansicht der Website des RRZK sind drei Navigationselemente beispielhaft zu erkennen: (1) das Aufklappmenü, welches das Mega-Flyout-Menü ersetzt, (2) das Rootline-Menü (Breadcrumbs) und ein Teil des Next-Level-Teaser (3)
vergrößern:
Ein aufgeklapptes Menü in der Ansicht auf einem Mobilgerät.

Tipps für kleine Webauftritte

Die Navigation und insbesondere das Mega-Flyout-Menü sind für mittelgroße Seiten optimiert.  Wenn Ihre Site aber einen einzelnen Lehrstuhl, oder ein einzelnes Projekt darstellt, sollten Sie überlegen alle Seiten auf die gleiche Ebene zu setzen. Der Effekt ist, dass gar kein Mega-Flyout, sondern ein einfaches Menü angelegt wird. Besuchende Ihrer Seite navigieren dann durch einzelne Klicks anstatt, dass sich ein Menü öffnet in welchem sie einen Unterpunkt auswählen müssen. Eine Mischung von Mega-Flyout Elemente und direkten Links verwirrt allerdings. Hindernis ist oft die Darstellung eines Lehrstuhl-Teams. Eine mögliche Lösung ist eine einzelne Seite auf der die Teammitglieder untereinander aufgelistet werden. Das kann man gut mit einem Gruppenfoto oben auf dieser Seite kombinieren.

Kontakt
Bei Fragen und für eine individuelle Beratung wenden Sie sich bitte an TYPO3-Master.
Bei Fragen speziell zu unserem Angebot UniTy3, verwenden Sie bitte dieses Kontaktformular: UniTy3-Support.