AJAX, bookmarks, back buttons en deeplinks

hash.pngWat hebben deze vier begrippen met elkaar gemeen? Nou, in veel gevallen is het zo dat door de eerste term te gebruiken je de andere drie min of meer onmogelijk maakt cq uitschakelt. Zoals wellicht bekend is kan er met AJAX voor gezorgd worden dat delen van pagina's opnieuw geladen worden zonder de hele pagina te verversen. Schitterende techniek die bepaalde zaken aanzienlijk kan versnellen, maar er is een keerzijde:

Door een deel van de pagina te verversen zal het adres van de pagina niet veranderen.

Nou en?
In eerste instantie denk je dat het niets uit maakt, maar wat nou als je bijvoorbeeld een op AJAX steunende vakantieboeksite gebruikt hebt om de vakantie te boeken. En vlak voor het bevestigen wil je nog even wachten op goedkeurig van de partner, je bookmarked de pagina en sluit de browser. Even later open je de bookmark om de uitgezochte vakantie te showen en je ziet het intro scherm van het boekingssyteem voor je...daar wordt je niet blij van. Dit verschijnsel komt puur en alleen door het feit dat met AJAX de url niet veranderd en de samengestelde pagina niet meer te bookmarken is. Tegelijkertijd betekent dit dat je de back-knop van je browser ook niet kunt gebruiken, want er is geen vorig adres. En voor deeplinken geldt hetzelfde, er is geen adres om naar te linken.

Hoe los je dat dan op?
Er is een manier om toch het adres te veranderen zonder de pagina te herladen. In een adres kan gebruik gemaakt worden van een hash, dat is het gedeelte wat achter een # staat in een URL. Deze hash is ontworpen om zo in lange pagina's anchors te kunnen plaatsen waar direct naar toe gelinked kan worden. Hierdoor hoeven bezoekers niet al scrollend door een pagina te zoeken. De meest gebruikte toepassing is vaak een inhoudsopgave bovenaan een pagina die links heeft naar de anchors verder naar onderen in de pagina.

Ik heb een voorbeeld in elkaar gezet dat aantoont dat het adres van een pagina prima kan veranderen (het hash gedeelte althans) zonder de pagina te herladen. Om het script zo irritant mogelijk te maken laat ik direct de statusbalk en titelbalk ook mee animeren (old school website technieken 😛 ) Als extra feature wordt de scrollhoogte ook in de teksten getoond, zo zou je pagina's op een bepaalde scrollhoogte kunnen bookmarken. Kleine opmerking: door het animeren werkt de back knop niet aangezien je dan 1 animatie terug gaat.

Hoe toe te passen
In plaats van een animatie kan ook iets minder spectaculairs gebruikt worden natuurlijk 😉 . Het idee van deze techniek is dat bepaalde statussen binnen een AJAX applicatie gebookmarked kunnen worden. Stel dat je een boekingsysteem hebt waar je vier stappen moet doorlopen, dan zou je op het moment dat je van stap naar stap gaat de URL als volgt mee kunnen veranderen:

boeken.html
boeken.html#overzicht:drenthe
boeken.html#details:stacaravans-assen
boeken.html#boeken:carav102912

Wanneer men dan in het detailscherm op de back knop drukt springt de URL terug naar het overzicht Drenthe. Vervolgens kan de applicatie dit volgen en ook weer het overzicht laten zien. Het is niet moeilijk om dan te bedenken dat bookmarks en deeplinks ook werken. Zo kun je bijvoorbeeld het laatste adres bookmarken zodat je later terug kunt gaan naar die betreffende caravan.

Opmerkingen
De toepassing van deze techniek die ik nu als voorbeeld genomen heb is vrij makkelijk. Maar ik weet uit ervaring dat het vrij moeilijk is deze techniek goed werkend in een site te krijgen. Vaak is het zo dat dit al vanaf de start van een ontwerp meegenomen moet worden om goed geïntegreerd te kunnen worden. Een goed werkend voorbeeld kreeg ik door van collega Peter Meindertsma die op de SES in New York is geweest. Daar werd de case van Rolex gepresenteerd, een goed werkende implementatie van deze techniek.

En is dit dan goed voor zoekmachines?
Helaas, zoekmachines indexeren vooralsnog niet het hash gedeelte van een URL. Het is daarom geen oplossing voor het zoekmachine vriendelijk maken van een AJAX implementatie. Wel om het gebruikersvriendelijker te maken.

Click to activate social bookmarks