Vier basisvoorbeelden van responsive navigatie

Het behouden van een functioneel en intuïtieve navigatie bij responsive websites is een uitdaging. In dit artikel worden de vier voorkomende designprincipes uitgelicht.

Vier basisvoorbeelden van responsive navigatie

 

Responsive design is geen keuze meer

Als we kijken naar alle traffic op de websites, -blogs en shops die Kittyhawk voor haar klanten ontworpen en ontwikkeld heeft en die momenteel online staan, dan zien we hetzelfde als we in alle onderzoeken lezen. De bezoekers die met een smartphone of een tablet de website bekijken stijgen in een snel tempo. Gemiddeld bezoeken ongeveer een miljoen internetgebruikers één (of meer) van onze webapplicaties en daarvan maakt meer dan 35% gebruik van een mobile device. Bij nieuwe website betekent dit dat er al vanaf het de designfase een "mobile first strategie" moet worden gevolgd. En huidige website eigenaren moeten zich nu afvragen hoe zij dit zo snel mogelijk gerealiseerd krijgen op hun websites. En in beide gevallen is het handig om wat meer inzicht te krijgen in de mogelijkheden van responsive websites. In deze serie artikelen over responsive design bespreek ik telkens de responsive mogelijkheden voor telkens een ander websiteonderdeel. In dit eerste artikel van de serie staat de responsive navigatie centraal.

Responsive navigatie

Bij responsive design moet men rekening houden met de verschillende viewports en het verschil tussen mouse- en touch interfaces.  Zo heeft een desktop computer alle ruimte voor een uitgebreide navigatie en bovendien het gemak van ‘mouse-overs’, waarbij eenvoudigweg het aanwijzen al een menu kan laten uitklappen.  Een mobiele telefoon heeft de beperking van een kleine viewport, waarbij de gebruiker ook nog eens een ‘dikke’ vinger gebruikt om items aan te klikken.  Een mouse-over op touch-interfaces bestaat (nog) niet.

Dit artikel geeft een opsomming van de meest voorkomende responsive navigatie of menu designs. De keuze voor een bepaalde verschijningsvorm is met name afhankelijk van de inhoudelijke structuur en omvang van de website. Daarnaast speelt het communicatiedoel ook in rol in het ontwerpproces. 

Schalen en verschuiven

De meest eenvoudige optie is het schalen en verschuiven van de navigatie. De elementen worden kleiner gemaakt en verplaatsen zich binnen de viewport van het apparaat. Deze methode is alleen geschikt voor websites met weinig pagina's en een platte informatiestructuur van slechts een laag.

Responsive Menu - schalen

Kenmerken responsive schalen

  • Geen subnavigatie mogelijk
  • Weinig items in het hoofdmenu door beperkte ruimte
  • Goede herkenbaarheid tussen mobiel en desktop, omdat dezelfde elementen worden gebruikt.

Voorbeelden:
 ochopsd.com, studionudge.com, weareadaptable.com

Gestapelde blokken

In dit ontwerp wordt het menu op mobiele apparaten onderverdeeld in blokken die onder elkaar worden gestapeld. Deze blokken kunnen direct verwijzen naar onderliggende pagina's of eventueel openklappen tot een submenu. In de desktop omgeving worden de blokken naast elkaar gezet en vormen zo een horizontale menu-balk met een achtergrond kleur.
Deze opzet werkt goed bij informatieve websites waarbij de bezoeker middels het prominente menu direkt naar een pagina wordt verwezen. Door de grove opbouw van het menu is er weinig ruimte voor beeldmateriaal, daarnaast moet de bezoeker soms flink scrollen om bij de inhoud te komen.

Responsive Menu - blokken

Kenmerken
 responsive blokken navigatie

  • Subnavigatie mogelijk, maar lange menu's zijn vaak onoverzichtelijk omdat je lang (vertikaal) moet scrollen.
  • Weinig ruimte voor beeldmateriaal, dus minder geschikt voor branding of productpresentatie.

Voorbeeld:
 www.jaofnee.nlwww.kittyhawk.nl

 

Standaard dropdown menu

Een standaard dropdown menu is een efficiënte manier om zonder een uitgebreid redesign de overstap naar een responsive navigatie te maken. Smashing magazine was een goed voorbeeld. In een periode van een paar maanden werd een standaard dropdown menu getoond in de kleinere viewports.

Responsive Menu - dropdown

Kenmerken responsive dropdown

  • Zonder ingrijpend redesign een goed werkende oplossing voor mobiele apparaten.

  • Niet CSS-stijlbaar voor alle browsers, geeft dus meestal een stijlbreuk.

Voorbeeld: 
Smashing magazine (inmiddels aangepaste navigatie)

Overlay menu's

Bij responsive overlay menu's valt een vertikaal menu over de pagina heen. Het voordeel van deze methode is dat je de navigatie 'sticky' kunt maken, zodat deze ook tijdens het scrollen zichtbaar blijft. Houd in het contentplan rekening met kleine viewports door het aantal menu-items beperkt te houden. Dit zorgt dat het deze niet buiten de viewport vallen.

Responsive Menu - overlay

Verticale blok-menu's
Hier drukt het vertikale menu de pagina naar beneden. Je hebt geen beperking in het aantal menu-onderdelen, maar het menu blijft altijd op een vaste positie op de pagina staan.

Horizontale sliding-menu's
Hier opent het menu zich door de pagina naar rechts weg te duwen. Het grote voordeel van deze opzet is dat het voor de bezoeker meteen duidelijk is dat hij zich in de navigatie bevindt.

Voorbeeld: www.leyhoeve.nl, www.rocmn.nl, www.tvesport.nl

En verder...

In dit artikel komen de vier basis vormen van responsive navigatie aan bod. Je kunt het artikel ook bekijken als de ontstaansgeschiedenis van responsive navigatie, waarbij de laatste variant 'Overlay menu's' de huidige generatie is. In een volgend artikel ga ik dieper in op moderne responsive navigatie technieken.

bruno
Bruno Groen
12 feb 2014
Dit artikel is
4431x bekeken

Deel dit artikel via:

  • Share on Google+
Nieuwsbrief

Reacties (4)

Jammer dat de afbeeldingen niet laden...
Petra  21 feb 2014 - 11:54
Dank voor de feedback, Petra! Inmiddels ziet de pagina er weer uit zoals dat hoort, inclusief de visuals.
Remco van Buren  21 feb 2014 - 12:24
"Een mouse-over op touch-interfaces bestaat (nog) niet."

Mijn huidige telefoon, een SE Sola uit 2012, ondersteunt dit reeds. Bij SE noemen ze het "Floating Touch". Menu's klappen bijvoorbeeld al open door met mn vinger boven het scherm te zweven en links lichten al op voordat ik het scherm aanraak.
Het werkt nog niet perfect hoor, maar de techniek bestaat wel degelijk en wordt al in de praktijk toegepast.
J. Jansen  25 feb 2014 - 11:13
Beste J. Jansen,
Bedankt voor je reactie en terechte aanvulling. Er zijn moderne telefoons en tablets die Floating Touch ondersteunen. Ook de populaire Galaxy S4 heeft een soortgelijke mogelijkheden (Air View & Air Gesture). Als verstokt iPhone/iOS gebruiker is me dit enigszins ontschoten.
Floating Touch is zeker een functionaliteit om in de toekomst rekening mee te gaan houden, maar momenteel wordt deze functie vooral toegepast in apps. Webdesign richt zich op de specs van grootste groep bezoekers; en die 'laggards' op iOS zijn nog niet zover. ;-)
Bruno Groen  26 feb 2014 - 14:25
  1. 1
This thread has been closed from taking new comments.
Laatste "Opinie" artikel
35 inspirerende quotes over content marketing die je te pas en onpas kunt gebruiken
35 inspirerende quotes over content marketing die je te pas en onpas kunt gebruiken