Bouw een goede menustructuur

De navigatie in websites wordt vaak opgemaakt met tabellen. Dit kan verschillende redenen hebben:

  • Het opmaken van een menu met een tabel is relatief eenvoudig. De cellen van een tabel zijn eenvoudig te ordenen in kolommen en rijen.
  • Het menu wordt automatisch gegenereerd door het content management systeem en dat werkt uitsluitend met templates van tabellen.
  • De website is al wat ouder en dit betekent dat de code nog niet up-to-date is. Er is dus nog geen sprake van een volledig gelaagde bouw.

Het is beter om een menu als een lijst te bouwen en deze vervolgens via stijlregels in een extern bestand op te maken. Definieer een menu in (x)html als een “unordered list” <ul>.

Voorbeeld van een menulijst

<ul>

        <li><a href=”pagina-1.htm”>pagina 1</a></li>

        <li><a href=”pagina-2.htm”>pagina 2</a></li>

        <li><a href=”pagina-3.htm”>pagina 3</a></li>

</ul>

Het menu kan vervolgens worden opgemaakt door CSS regels te definiëren in een gekoppelde stylesheet. De koppeling naar de stylesheet staat tussen de tags <head> aan het begin van de broncode van de pagina.

Voorbeeld van een stylesheet koppeling

<link typ=”text/css” rel=”stylesheet” href=”/styles/site.css”>

Een dergelijke opbouw is vanuit accessibility opzicht ook wenselijk, omdat mensen met een gebrek dan makkelijk gebruik kunnen maken van de website. Een zogenaamde “sitereader” leest alleen tekstuele informatie voor, voor mensen met een visuele beperking.

Daarnaast zijn tekstuele “list items” <li> voor de bot van zoekmachines eenvoudig uit te lezen. De teksten van menu items en links worden belangrijker geacht dan de broodtekst in de content van de site. Dus als de titels van de links vanuit het perspectief van zoekmachineoptimalisatie goed gekozen zijn, kan dit bijdragen aan een betere positionering (ranking).

De titels in een menu zijn dus een strategische locatie voor het plaatsen van woorden waarop u wilt dat uw site gevonden wordt. De titels en linkteksten moeten ook iets zeggen over de content van de bestemmingspagina. Een bezoeker kan dan een betere inschatting maken of die content aansluit bij het doel van zijn bezoek.

Maak een menu ook niet te lang. Houdt het overzichtelijk voor de gebruiker. Een lengte met een maximum van 8 items is voldoende. Dit mag ook per cluster van een hoofditem zo georganiseerd zijn.