# Sitemaps

# HUB and SPOKE model

De navigatie tussen de pagina's is gebasseerd op het HUB and SPOKE (H&S) model. De navigatie naar dieperliggende pagina's (SPOKE) is verwerkt in de pagina daarboven (HUB) ipv via een menu. De bezoeker kan via deze manier van navigeren altijd een stap dieper. Willen ze een stap zijwaarts maken, dan moeten ze eerst een niveau omhoog om dan dieper te gaan. Dit model schaalt mooi tussen de verschillende schermgroottes (van desktop tot mobile).

# Aangepast model voor han.nl

Voor han.nl maken we gebruik van dit model op content pagina's. Voor landingpages hebben we een nieuwe variant de HUB Fat. Op landingpages kun je binnen een HUB één en twee niveaus dieper navigeren (opens new window). Zo kun je op de hogere niveaus in de structuur sneller een stap overslaan om bij de gewenste content te komen.

# Opbouw HUB

# HUB Regular

Boven de HUB wordt een standaard titel getoond Een element in een HUB navigatie pakt drie data types van een onderliggende pagina:

  • Titel van de pagina
  • Header image
  • Intro text Deze wordt aangevuld met een lees meer link.

# HUB Fat

De HUB pakt twee data types van de onderliggende pagina:

  • Titel van de pagina
  • Intro text en wordt aangevuld aangevuld met een lees meer link

Een element in een HUB navigatie pakt drie data types van de pagina daaronder:

  • Titel van de pagina
  • Header image
  • Intro text Deze wordt aangevuld met een lees meer link.

# Paginatype's

We hebben drie paginatype's die gebruik maken van het H&S model. Landing pages, Uber landing pages en Content pages. De eerste twee gebruiken het Fat model (dus twee niveaus tonen in de HUB), de content pagina's het Regular model (één niveau in de HUB).

# Landing pages

Deze pagina's worden automatisch samengesteld met HUB Fats. De redacteur kan kiezen of er een item van de HUB uitgelicht moet worden onder de de HUB. De redacteur kan tussen de HUB Fats andere content types handmatig toevoegen zoals een video, text & media regular etc.

# Examples

Invision (opens new window) projects_invisionapp_com-5_Landingspagina–StuderenOrienterenEnKiezen

# Uber landing pages

Onderscheiden zich van landing pages doordat ze een voor die pagina specifiek component bevatten. bv de pagina Studeren. Deze bevat een aangepast HUB navigatie element bovenaan de pagina Hub Navigatie Fat Large

# Examples

Invision (opens new window)

# Content pages

Als er onder een contentpagina nog een niveau van contentpagina's bestaat dan worden deze pagina's automatisch als HUB getoond op de bovenliggende contentpagina.

# Examples