Navigieren mit Responsive Design

Hier erfahren Sie......welche Methoden das Responsive Design für sinnvolle Navigationsmenüs bereithält...wie Sie diese umsetzen...wie ein ideales Navigations-Icon aussehen könnte

Responsive Webdesign ist ein wichtiger Trend: Mithilfe von Media Queries- und anderer Komponenten, wie flüssiger Breitenangaben und flexibler Bildern - lassen sich Layouts erstellen, die sich an die unterschiedliche Größe der Bildschirme anpassen. Die Inhalte können oft relativ einfach  neu angeordnet werden: Statt einer Dreispaltendarstellung bei großem Bildschirm wird etwa eine einspaltige Darstellung auf kleinem Bildschirm gewählt.

Mit der Navigation ist es schwieriger, denn dabei sind zwei Dinge für Smartphones zu beachten:  Die Buttons dürfen nicht zu klein werden, damit sie sich auch auf einem Touchscreen bedienen lassen - schließlich sind Finger größer als der Mauszeiger. Außerdem ist es wichtig, dass auf den  einzelnen Seiten auch Inhalt zu sehen ist. In einer einfachen Variante würde man aus einer  horizontalen Navigation einfach eine vertikale machen.

Dann sieht man auf der Seite aber nur den Kopfbereich und die Navigation; die eigentlichen Inhalte, um die es geht, erreicht man erst durch  Scrollen. Das mag für den Startbildschirm noch akzeptabel sein, weil es an die Listenmenüs von  Apps erinnert; es ist aber störend, wenn es auf allen Seiten auftritt. Denn der Benutzer hat zum einen  zu wenig Orientierung, wo er sich befindet, und zum anderen muss er immer erst zu den  eigentlichen Inhalten hinscrollen. Glücklicherweise gibt es mehrere Lösungen für dieses Problem. Drei ausgewählte führt der Workshop am praktischen Beispiel vor.

Anpassungen sind nicht immer Notwendig

Bevor wir uns an die Lösungen für dieses Problem machen: Nicht immer ist es notwendig, Hand  an die Navigation anzulegen. Wenn die Navigation einfach gestrickt ist und nur drei oder vier  Menüpunkte enthält, können Sie diese horizontal darstellen - das passt sowohl für die Desktop- als  auch für die Smartphone-Variante. Das geht jedoch nur, wenn die horizontale Navigation auch auf  320 Pixeln Platz hat. Häufig soll die Navigation jedoch aus mehr Buttons bestehen.

Variante 1: Ankerlinks im Fußbereich

Die erste mögliche Lösung ist typischerweise mit dem Mobile-first-Ansatz verknüpft - dabei wird  zuerst die mobile Variante erstellt und dann die Desktop- Version davon abgeleitet. Diese  Methode ist technisch sehr einfach und involviert nur HTML und CSS. Im HTML-Code wird die  Navigation nach dem Inhaltsbereich platziert. Zusätzlich gibt es am Anfang einen internen Link zur Navigation.

<div id="container"><p id="sprung"><a href="#navigation">
Navigation</a></p><div id="inhalt">...</div><div id="navigation">...</div></div>

Damit ist das Grundlayout schon optimiert für kleine Bildschirme und folgt dem laut Luke  Wroblewski für mobile Geräte wichtigen Content-first-Prinzip. Der Inhalt ist oben, die Navigation  unten, aber die Navigation ist direkt über einen Link erreichbar. Mit CSS können Sie  das Aussehen verbessern, also zum einen den Sprunglink mit einer Button-Optik versehen und zum anderen die Navigation unten auf der Seite zu Buttons oder Ähnlichem ausbauen.  Wichtig dabei ist, dass die Navigationspunkte großzügig genug angelegt sind, damit sie sich  bequem mit den Fingern bedienen lassen.

Für die Desktop-Variante ist etwas mehr Aufwand notwendig, denn hier soll die Navigation wie  gewohnt oberhalb des Inhaltsbereichs als horizontale Leiste erscheinen. Das lässt sich über  mehrere CSS-Befehle umsetzen:

• Der umfassende Bereich benötigt position: relative, um den Bezugspunkt für die Positionierung bilden zu können. Außerdem müssen Sie beim umfassenden Element einen Innenabstand oben (padding-top) angeben, in dem die Navigation Platz findet.
• Die Navigation wird über position: absolute in Relation zum Container oben angeordnet.
• Der interne Sprunglink zur Navigation wird nicht mehr benötigt und kann ausgeblendet werden.

Diese Formatierungen sollen nur gelten, wenn genügend Platz zur Verfügung steht, also   beispielsweise ab 760 Pixeln Breite, was die folgende @media-Regel bewirkt:

@media screen and
(min-width: 760px) {
#container {
position: relative;
padding-top: 3em;
}
#navigation {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#sprung {
display: none;
}
#navigation ul li {
float: left;
width: 15%;
}
}

Im Beispiel sehen Sie außerdem, dass die Navigationspunkte über float nebeneinander angeordnet werden - sonst wäre es keine horizontale Navigation. Diese grundlegenden  Formatierungen können dann verfeinert werden. Der Vorteil an dieser Lösung ist ihre  Geradlinigkeit und ihre bestechende Einfachheit.

Variante 2:  Auswahlliste

Beim nächsten Ansatz bleibt die Navigation oben - sowohl bei der Desktop-Version als auch bei  der mobilen Variante. Ist jedoch weniger Platz vorhanden, wird das Menü in eine Auswahlliste umgewandelt. Das heißt, bei viel verfügbarem Platz haben Sie eine normale,  ungeordnete Liste:

<ul><li><a href="eins.
html">Erstens</a></li><li><a href="zwei.html">
Zweitens</a></li><!-- weitere Punkte --></ul>

Bei weniger Platz gibt es hingegen eine Auswahlliste:

<select ><option value="eins.html">Erstens</
option><option value="zwei.html">Zweitens</
option><!-- weitere Punkte --></select>

Bei der Auswahlliste müssen Sie mit Javascript dafür sorgen, dass die jeweiligen Unterseiten  automatisch nach einem Wechsel in der Auswahlliste aufgerufen werden.Die Umwandlung von  ungeordneter Liste in Auswahlliste geht ebenfalls am besten per Javascript. Sie können so etwas mit jQuery selbst programmieren - oder für eine einfache, schnelle Lösung das jQuery-Plug-in "Responsive Menu" verwenden. Dafür müssen Sie zunächst jQuery und das Plug-in im Kopfbereich einbinden.

<script src="https://ajax.
googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="jquery.
mobilemenu.js"></script>

Das Plug-in aktivieren Sie über den Befehl mobileMenu(). Vorher geben Sie an, welche geordneten oder ungeordneten Listen umgewandelt werden sollen - im Beispiel das ul-Element innerhalb des Elements mit id="navigation":

<script>
$(function(){
$('#navigation ul').mobileMenu();
});</script>

Responsive Menu bietet noch mehrere Konfigurationsoptionen: switchWidth bestimmt, ab welcher Breite die Umwandlung in die Auswahlliste stattfinden soll; topOptionText ist der Text, der als erstes in der Auswahlliste angezeigt wird. Wenn Sie null als Wert zuweisen, dann gibt es keinen ersten Punkt, sondern nur die Navigationspunkte, wie im folgenden Beispiel. Bei diesem ist außerdem festgelegt, dass der Wechsel in der Darstellung ab 760 Pixeln und kleiner stattfinden soll.

$(function(){
$('#navigation ul').
mobileMenu({
switchWidth: 760,
topOptionText: null
});
});

Das jQuery-Plug-in ist an manchen Stellen noch verbesserungsfähig. Sein Vorteil ist, dass man so rasch zu einem Ziel kommt und dass es außerdem auch verschachtelte Navigationen unterstützt.

Variante 3: Dynamisches Einblenden

Eine schöne, wenn auch etwas aufwändigere Lösung ist es, die Navigation dynamisch ein- und auszublenden.

• Bei schmalem Bildschirm soll die Navigation standardmäßig ausgeblendet sein. Ein Klick auf einen entsprechenden Button macht sie sichtbar.
• Standardmäßig eingeblendet ist die Navigation hingegen bei viel verfügbarem Platz, sie lässt sich allerdings auch hier durch einen Klick auf den Menü-Button oder einen zusätzlichen Schließen-Button ausblenden.

Für diese Lösung brauchen Sie natürlich Javascript. Wichtig im Sinne des Progressive Enhancement ist aber, dass die Website auch bei deaktiviertem

Javascript benutzbar ist. Außerdem ist es empfehlenswert, nur so wenig wie möglich über Javascript zu erledigen und sich ansonsten mit CSS zu behelfen.

Es gibt verschiedene Lösungsansätze. Die Filamentgroup hat einige davon bei Github veröffentlicht. Die im Workshop geschilderte Lösung nimmt die dritte der dort vorgestellten Lösungen als Grundlage, weicht aber in verschiedenen Details ab - unter anderem, um das Beispiel so einfach wie möglich zu halten. Der HTML-Part ist relativ klar - und die Garantie dafür, dass Website und Navigation bei deaktiviertem Javascript benutzbar sind. Es gibt ein umfassendes Element, einen Inhaltsbereich und eine Navigation. Innerhalb des Inhaltsbereichs steht ein Link zur Navigation, die unterhalb des Inhalts angeordnet ist.

<div id="container"><div id="inhalt"><a href="#navigation" id=
"nav-zeigen">Menü</a><!-- Hier weitere Inhalte --></div><div id="navigation"><ul><li><a href="#">Erstens</a></li><!-- Weitere Punkte --></ul></div></div>

Der Javascript-Code ist hauptsächlich für das dynamische Zuweisen der richtigen Klassen zuständig:

• Ist Javascript aktiviert, wird dem HTML-Element die Klasse js zugewiesen. Auf diese Art können Sie eigene Formatierungen bei aktiviertem Javascript schreiben.
• In der Navigation wird ein Schließen-Button ergänzt. Da dieser nur bei aktiviertem Javascript eine Funktion hat, ist es sinnvoll, ihn erst mit Javascript zu erstellen.
• Außerdem wird abwechselnd bei Klick auf den Schließen- oder den Menü-Button die Navigation ein- oder ausgeblendet. Das eigentliche Ein- und Ausblenden erledigt CSS. Javascript bereitet diese Formatierungen vor, indem beim HTML-Start-Tag bei aktivierter Navigation die Klasse nav-spalte ergänzt wird; diese Klasse wird bei deaktivierter Navigation entfernt.
• Ab einem gewissen verfügbaren Platz soll die Navigation immer angezeigt werden, dafür wird der verfügbare Platz mit Javascript ermittelt und ab einer bestimmten Größe die Klasse nav-spalte beim HTML-Start-Tag ergänzt.

Zuerst wird jQuery eingebunden:

<script src="https://
ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Dann folgt der Javascript-Code, der erst ausgeführt werden soll, wenn das Dokument vollständig geladen ist.

<script>
$(function(){

Sofern Javascript unterstützt wird, ergänzen wir beim HTML-Element die Klasse js.

$('html').addClass('js');

Außerdem wird der Schließen-Button hinzugefügt und am Anfang der Navigation platziert.

$('#navigation ul').before('<a href=
"#" id="nav-verstecken" >Schließen</a>');

Jetzt kommt der entscheidende Teil: Beim Klick auf den Menü- oder Schließen-Button soll die Navigation abwechselnd ein- und ausgeblendet werden. Dafür ergänzen wir die Klasse nav-spalte beim HTML-Element - und entfernen sie wieder. Für das wechselnde Ergänzen und Entfernen sorgt toggleClass():

$('#nav-zeigen, #nav-verstecken').
on('click', function(){
$('html').toggleClass('nav-spalte');
return false;
});

Ab 100 Pixel verfügbarem Platz soll die Navigation immer angezeigt werden:

$(window).bind('load resize orienta
tionchange', function(){
if ( window.outerWidth >= 1000 ) {
$('html').addClass('nav-spalte'); };
});
});</script>