Responsive Design: Möglichkeiten der Navigation

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.

Beispiel 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.

Beispiel 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.

Beispiel 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">Menue</a><!-- Hier weitere Inhalte --></div><div id="navigation"><ul><li"<a href="#">Erstens</a></li><!-- Weitere Punkte --></ul></div></div>