Responsive Webdesign (III)

Responsive Navigation

Bei einer responsiven Navigation ist darauf zu achten, dass sie gut mit den Fingern nutzbar ist, d.h. dass die Buttons eine entsprechende Größe haben, und dass sie gleichzeitig nicht zu viel Raum einnimmt. Ist sie zu dominierend, ist für den User nicht sofort zu erkennen, worum es auf der Seite geht.
Ist die Navigation schon grundsätzlich einfach und übersichtlich gehalten, wird man auch kein Problem haben, sie auf kleineren Geräten überschaubar zu halten.
Ist dies gelungen, gibt es prinzipiell drei Möglichkeiten, im responsiven Webdesign mit den Herausforderungen von Naviogationen umzugehen:

• Navigation sichtbar halten
• Navigation verstecken
• Navigation dynamisch anpassen

Responsive Navigation mit stets sichtbaren Menüs

Top nav

Bei kleinen Navigationsmenüs ist es oft ausreichend, wenn man kleine Anpassungen vornimmt und sie platzsparend im Header unterbringt. Ist eine Subnavigation vorhanden, wird sie bei kleinen Viewports weggelassen. Wird dann auf einen der Einträge in der Hauptnavigation getippt, gelangt der User zu einer Verteiler-Seite mit Links zu allen Unterseiten. Allerdings wird das Navigieren dadurch umständlicher. Auch die Performance leidet darunter, da beim Navigieren zu einer Unterseite immer weitere Seiten als Zwischenschritte geladen werden müsssen.

Footer-Navigation

Eine andere Variante ist, das Menü in den Footer der Website zu verschieben. Ein Anker-Link im Header sorgt dafür, dass die Nutzer bei Bedarf direkt zum Menü springen können.
Allerdings besteht die Gefahr, dass man den User durch Sprünge zum Ende der Seite verwirrt. Man kann dem entgegenwirken, indem man eindeutige Icons nutzt und im Footer eine weitere Sprungmarke anbringt, mit der man wieder zum Kopf der Seite gelangt.

Responsive Navigation mit versteckten Menüs

Die Vorteile dieser Strategie liegen darin, dass die User auf den ersten Blick viel vom eigentlichen Inhalt sehen, weil die Navigation kaum mehr Platz beansprucht, und dass das Menü, sobald es aktiviert wird, soviel Raum zur Verfügung hat, wie es benötigt.
Allerdings muss sichergestellt werden, dass der User das Menü trotzdem schnell findet und öffnen kann. In den letzten Jahren hat sich dazu das Hamburger-Icon durchgesetzt, das aus (meistens) drei horizontalen Strichen besteht und deshalb an einen Hamburger erinnert.
Wichtig ist auch, dass sich das Menü wieder schließen lässt. Sofern das Menü nicht den gesamten Raum einnimmt, sollte es sich einklappen, wenn Nutzer auf einen Bereich außerhalb des Menüs tippen.
Für das Menü gibt es nun verschiedene Varianten:

Toggle-Menüs

Das Toggle-Menü ist wohl am weitesten verbreitet. Ein Button schaltet das Menü aus und wieder ein. Dabei kann das Menü den Inhalt nach unten schieben oder überlagern. Multi-Level-Toggle-Menüs ermöglichen zusätzlich das Öffnen von Untermenüs.
Zu achten ist auf eindeutige Icons. Dem User sollte jederzeit klar sein, wo sich ein Untermenü öffnet und wo nicht. Gut geeignet sind dabei Pfeile. Diese sollten sich im Idealfall mit dem Zustand des Menüs ändern. Beispielsweise kann aus einem Pfeil nach unten (Menü aufgeklappt) ein Pfeil nach oben werden, wenn das Menü wieder zugeklappt wird.
Toggle-Menüs verwenden häufig Javascript oder jQuery. Entsprechende Skripte findet man leicht im Internet.

Off-Canvas-Menüs

Off-Canvas Menüs befinden sich, wie der Name sagt, außerhalb des Viewports und fahren beim Aktivieren von der Seite in den sichtbaren Bereich hinein und verdrängen dabei den Inhaltsbereich. Diese Variante ist gut geeignet für komplexe Menüs, da sie mit Multi-Level-Toggle-Menüs kombiniert werden kann. Die Umsetzung ist allerdings technisch anspruchsvoll.

Responsive Navigation, die sich anpasst

Solche flexiblere Lösungen passen sich stark an das Nutzerverhalten und mischen die bisher vorgestellten Varianten.
So kann man beispielsweise das Menü auf der Startseite, wo sich der Nutzer üblicherweise orientiert, immer sichtbar lassen, während es auf den Unterseiten, wo der Inhalt die Hauptrolle spielt, versteckt wird und sich bei Bedarf aktivieren lässt.
Eine weitere Lösung is die Priorisierung von Menüpunkten. Es werden je nach Größe des Viewports immer nur die wichtigsten Menüpunkte angezeigt und weitere Menüpunkte können per Button eingeblendet werden. Allerdings kann dabei der User auch verwirrt werden.
Eine weitere elegante Lösung ist ein einzeiliges Menü, das sich horizontal scrollen lässt.

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8"/>
        <title>Responsive Design III</title>
        
        <link rel="stylesheet" href="css/style.css"/>
        
    </head>
        
    <body>
    <nav>
    <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
    <li><a href="">Item 6</a></li>
    </ul>
    </nav>
    <main>
    <img src="https://media05.regionaut.meinbezirk.at/2017/05/26/12644565_web.jpg" alt="Beispielbild" />
    <p class="bsptext">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et dolore 
    magna aliquyam erat, sed diam voluptua. At vero eos et 
    accusam et justo duo dolores et ea rebum. Stet clita kasd
     gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing 
      elitr, sed diam nonumy eirmod tempor invidunt ut labore 
      et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    </main>
    </body>
</html>