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.
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
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.
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.
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.
Contact
If you have any questions or problems, please contact the RRZK-Helpdesk