Menu

Single Page Website: Meer diepgang dan je denkt!

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on tumblr
Share on email

One Page to bind them all – De Kracht van een Single Page Website

One page websiteDe kinderen van de bakker eten oud brood en mijn eigen websites krijgen niet altijd dezelfde aandacht als de websites van mijn klanten. Als het om mijn company website gaat, dan krijgt deze nog voldoende aandacht, maar de websites voor mijn hobbies zijn vaak stiefkindjes. Maar over enkele weken is dan eindelijk als het goed is mijn website voor mijn hobby fotografie klaar.

Wat anders is aan deze website is dat het een zogenaamde Single Page Website is. In eerste instantie zou je misschien denken, dat een single page website slechts uit één pagina bestaat, maar niets is minder waar. Vanwaar dan deze verwarrende naam. Om dit duidelijk te krijgen, kijken we allereerst naar het doel van zo’n website.

Goed voor mobiel

Een Single page website is primair bedoeld om de mobiele gebruiker tegemoet te komen. Zelfs wanneer je over een snelle 4G verbinding beschikt, duurt het laden van een webpagina altijd nog wel even. Als je dus veel heen en weer moet navigeren op een website, kan dit op een telefoon wat lastiger zijn. Het bijzondere aan een single page website is de homepage… en het menu op deze pagina.

Het standaard gedrag van een menu ken je natuurlijk: Je klikt op een item en de pagina wordt geladen. Waarschijnlijk ben je ook bekend met een ander fenomeen: het ‘tekstanker’. Een ‘anker’ is een deel in de pagina waar afzonderlijk heen genavigeerd kan worden binnen de pagina zelf. Je kent het valt wel in de vorm van een opsomming van de letters van het alfabet boven aan een pagina. Als je op een letter klinkt ga je naar de namen of begrippen op die pagina die met die letter beginnen. Of een verwijzing in de algemene voorwaarden. Als je klikt op de term ‘artikel x punt y’ dan ga je direct door naar dat artikel.

Lees ook  Vijf regels voor een succesvolle website

Het menu in een Single Page Website werkt op eenzelfde manier. Wanneer je op een menu-item klikt, dan laad je geen nieuwe pagina, maar ‘schiet’ je naar een sectie op de homepage waar meer wordt uitgelegd over dat specifieke menu-item. Door deze sectie een andere kleur of achtergrond-afbeelding te geven, krijg je de indruk dat je ‘doorschiet’ naar een andere pagina.

Snelle interactie

Het voordeel is duidelijk. De homepage wordt in zijn geheel geladen. Het menu geeft je de mogelijkheid makkelijk van sectie naar sectie te navigeren.  Per sectie krijg je een beknopte samenvatting over wat je bij dat item kunt verwachten. Deze samenvatting kan visueel of tekst zijn. Vanuit de sectie zelf kun je door middel van een ‘lees meer’ knop doorklikken naar meer informatie over dit onderwerp op een andere pagina… en op deze pagina zul je ook een ander – meer traditioneel – menu aantreffen.

Voor de mobiele gebruikersvriendelijkheid van je website is dit natuurlijk ideaal, maar het kan ook voor je traditionele website een krachtig instrument zijn. De bezoeker leest als het ware eerst de samenvatting van wat je allemaal te bieden hebt en beslist dan waarover hij meer wil lezen.

Vaak is een Single Page Website ook uitgevoerd in ‘Flat Design‘… dit omdat zowel Flat Design als Single Page beide bedoeld zijn om je site ‘mobiel vriendelijker’ te krijgen.

Waar moet ik op letten bij zo’n Single Page Website?

Veelal wordt een website ‘top down’ gebouwd. Je begint met een idee voor de homepage en stapje voor stapje bouw je de website uit door er meer pagina’s aan toe te voegen. Bij een Single Page website werk je eigenlijk precies andersom. Je weet al precies welke informatie je aan wilt bieden. Alle pagina’s heb je eigenlijk al ‘op zijn plaats’, voor je de homepage samen gaat stellen. De individuele secties van de homepage zijn immers samenvattingen van de pagina’s waar ze heen verwijzen. Ook moet er aandacht besteed worden aan de volgorde waarin de pagina’s gepresenteerd worden. De individuele secties moeten makkelijk leesbaar zijn, maar ook in een volgorde staan die logisch is. De bezoeker leest het immers als een enkele pagina.

Lees ook  Mock up afbeeldingen voor je e-boeken en online video's

Welke websites zijn geschikt voor een Single Page?

Niet iedere website is geschikt om in het model van een ‘Single Page’ gebouwd te worden. De meeste websites die een product of dienst aanbieden zijn echter uitermate geschikt om op deze manier te worden ontworpen.

Jouw site bouwen als een Single Page Website is ook mogelijk in het kader van een WordPress XPress website. Er wordt alleen voor je daadwerkelijk kunt beginnen iets meer voorwerk verwacht van jouw kant. Heb je interesse in een Single Page website, laat dit dan op voorhand even weten.

5 thoughts on “Single Page Website: Meer diepgang dan je denkt!

  1. Beste Wilco,
    Op veel pagina’s van mijn website staat nu een slider met een paar foto’s. Als je die in één keer moet laden omdat alles onder elkaar staat, kost dat dan niet erg veel tijd?

    Kun je in WordPress misschien een knop op de homepage zetten waarmee de bezoeker in één keer alle sliders op aan, dan wel uit zet?

    1. Als je inderdaad meerdere sliders op één pagina zet, dan duurt het laden langer. Of dat ‘erg veel’ tijd is is natuurlijk afhankelijk van de grootte en de mate van compressie van de foto’s. Afhankelijk van de gebruikte slider plugin kan er bovendien gekozen worden voor ‘verlaat laden’… de eerste foto wordt dan geladen, de rest van de foto’s pas als de pagina helemaal klaar staat. Hij ‘slide’ dan natuurlijk nog niet, maar je ziet iig al wel wat.

      Binnenkort komt er een vergelijking van een aantal slider plugins, waar dit verder aan de orde komt (wil je op de hoogte blijven, schrijf je dan in voor de nieuwsbrief door één van de gratis eboeken te downloaden).

      Voor wat je tweede vraag betreft, een ‘knop’ om alle sliders in één keer aan of uit te zetten. Het is een goed idee en technisch is het zeer zeker mogelijk. Bij mijn weten is er echter geen slider plugin die dit doet. Dit zou dus helemaal maatwerk moeten worden.

      Vriendelijke Groet
      Wilko

  2. Wat interessant deze blog. Ik heb hem voor de tweede keer gelezen en heb hem nu echt begrepen.
    Ik heb gisteren een afspraak gehad met Wilko voor het zelf bouwen van mijn website.
    In combinatie met het volgen van de Content Creation Workshop…. weet ik nu hoe ik mijn website op gaan bouwen.

    Top gedaan Wilko…

    1. Omdat deze opzet van een website primair geschikt is voor mobiele devices, is dit vooral aan te raden voor websites waarvan de eigenaar verwacht relatief veel mobiel verkeer te krijgen. Maar dit soort website is ook uitermate geschikt voor doelgroepen die niet van lezen houden… of -zoals in mijn geval van mijn fotografie site- de nadruk ligt op beeld en niet op tekst.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *