Responsive Design

Website-Navigation at its Best - Responsive Design revolutioniert die Navigation!

Eine gut strukturierte und gestaltete Navigation ist die wichtigste Voraussetzung für die Usability einer Website. Sie führt den Nutzer zu den relevanten Bereichen und zeigt an, wo diese sich befinden. Mit dem Einzug von Responsive Webdesign werden nun viele neue Navigationsmuster möglich und lösen so alte Grundsätze und Standards für die Gestaltung ab.

Ein Navigationskonzept für eine Website sollte grundsätzlich immer schlüssig sein und über die einzelnen Webseiten hinweg einheitlich gestaltet sein. Dies erleichtert nicht nur das Navigieren für die Besucher, sondern zahlt sich auf auf SEO aus, denn die Indexierung wird erleichtert. Als Designer sollte man auf verständliche Bezeichnungen der Menüpunkte achten. Die Nutzung der Navigation sollte einfach und intuitiv gestaltet sein. So weiß z.B. ein Nutzer in der Regel, dass wenn er auf das Logo des Unternehmens klickt, er auf die Startseite zurück geleitet wird.

Mit der Erfindung von Mobile und Responsive Webdesign wurden nun Designer vor neue Herausforderungen bezüglich der Gestaltung gestellt. Der Klassiker dabei ist die „Toggled Navigation“. Sie ist die am meisten verwendete Navigation auf mobilen Websites. Es wird dabei eine Leiste im oberen Bereich der Website positioniert. Diese ist mit einem Button-Element ausgestattet, das bei Betätigung die Navigation ausfahren lässt. So wird die komplette Website um die Länge der Navigation verlängert. Bootstrap ist hierfür gut geeignet, da das Framework eine solche Navigationslösung parat hält.

Für komplexe Navigationsstrukturen bietet sich „Multi Toggle“ an. Diese Lösung ist sozusagen eine Ansammlung von verschachtelten Akkordeons. Sobald der Nutzer auf die Hauptnavigation tippt, öffnen sich die Unterkategorien. So können auf kleinem Raum viele Navigationselemente untergebracht werden. Das „Mega Dropdown“ arbeitet wie die Toggled-Navigation. Der Unterschied ist hierbei, dass neben Textlinks auch mit Icons, Bildern oder einer Kombination aus beidem gearbeitet werden kann. Die absolute Designvariante stellt die „Slide-Navigation“ dar. Hier werden Kategorien auf mehrere Ebenen aufgesplittet und durch zusätzliche Bedienelemente oder einen Swipe durchgeblättert.

Ob klassische Toggled Navigationen oder schicke und aufwendige Slide Navigationen – dem Designer werden vielfältige Möglichkeiten geboten. Responsive Webdesign weicht dabei die Grenzen zwischen Mobile und Desktop auf.