Kennisbank | Over ons | Inloggen
Grote verbouwing: navigatie volledig vernieuwd

Grote verbouwing: navigatie volledig vernieuwd

13-08-2021

We hebben de techniek verbeterd zodat het navigeren makkelijker gaat op met name touch-devices (telefoons, tablets en laptops met 'aanraakscherm'). Ook is de navigatie toegankelijker geworden voor mensen met een visuele beperking.

Het implementeren van de nieuwe code was een flinke klus omdat alle indelingen en sferen aangepast moesten worden, plus een deel van de magie die de Machine-sites bijzonder maakt.
We hebben de navigatie eerst uitgebreid getest op proefwebsites en daarna een aantal echte sites in een experimentele modus gezet om ook 'in het wild' te testen. De update is uitgerold over alle Machine-sites, dus ook jouw website is vernieuwd 🎉

Wat is er anders

In de desktopweergave zijn er visueel enkele details veranderd. Niet heel spannend.

Mobiel
De navigatie zit nu onder een herkenbaar 'hamburgermenu' zoals dat heet. Als je flink inzoomt kan je zien dat er aandacht is besteed aan details van de broodjes. Het burgertje is overigens vega, vlees is niet meer van deze tijd.
Bij aantikken schuift de navigatie met een soepele animatie in beeld. Een opvallend verschil is dat niet meer alle subnavigatie direct zichtbaar is. Op websites met veel pagina's zorgde dat voor een onoverzichtelijk lange lijst. Dat is voor de gebruiker geen fijne ervaring. Nu zijn alleen de belangrijkste onderwerpen zichtbaar en is de navigatie uitgeklapt van de (sub)pagina waar je bent. Overige subjes kan de bezoeker zelf uitklappen.

Tablet en desktop met touch
De tabletweergave was een uitdaging. Je kunt zo'n ding namelijk op 2 manieren vasthouden: staand of liggend (in je hangmat 😉). Als een tablet verticaal vastgehouden wordt is het scherm zo smal dat de site voor een aantal onderdelen, waaronder de navigatie, in de mobiele modus gaat. Tot zover geen probleem. Als het scherm gekanteld wordt, is er voldoende breedte en resolutie om de desktopversie van de website weer te geven. Bij de navigatie ontstaat dan een probleem.
Als je op de desktop met je muis over de navigatie gaat, plopt daar vanzelf de subnav onderuit als die aanwezig is. Op een tablet is er geen muis en op een MS Surface wordt die niet altijd gebruikt. Voor deze situatie hebben we een hybride vorm ontwikkeld. Er is een element zichtbaar dat aangeeft dat er een subnavigatie is. Hiermee kan, net als op mobiel, de subnavigatie opengeklapt worden.
Als de bezoeker binnenkomt op een pagina met een subnavigatie, dan is deze navigatie een korte tijd zichtbaar en klapt vanzelf dicht.

SEO

De verbouwing heeft geen gevolgen voor de vindbaarheid van je pagina's, die blijft onveranderd goed. Door het volledig opnieuw programmeren van de navigatie, laden de pagina's zelfs een beetje sneller. We verwachten een lichte verbetering in het bouncepercentage op tablets te zien.