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

 
  • Goeie post, zat laatst met iets soortgelijks. Denk dat dit wel een mooie oplossing bied! 🙂

  • Alex

    In Internet Explorer (7, in 6 heb ik niet gekeken) blijft de back-button grijs hoor...

  • Hmm, dan wordt het misschien tijd dat ik IE7 thuis ook eens installeer. Desalniettemin blijft de deeplink en bookmark fix wel werkend.

  • Koos

    Hee Andre,

    Ik vind dat je leuke artikelen publiceert! Ik lees ze graag!

    Ga zo door!

    Groetjes,
    Koos

  • Phoe...

    Heb je ook met onload functies.

    Dit wordt ook vaak gebruikt bij bookingsengines....en dan blijft het probleem ook dat deeplinken niet werkt en pagina's opvragen ook niet altijd even makkelijk vanuit je favorieten gaat (tenzij cookies gezet zijn die NIET gewist zijn!).....

    Dus het probleem an sich komt best wel vaker voor...maar daarentegen is het vaak een veel gebruikte manier omdat het wel eens eenvoudiger uit te voeren is...

  • Leuk artikel! thanks!

  • Moi André,

    Goed artikel. Ajax is een mooie technologie en in veel gevallen bijv. piperme.com een van de grote drijvers van het succes. Accessibility is echter inderdaad problematisch. Ik denk dat we met de oplossing die je noemde weer een stapje dichter bij zijn. Top!

    Groetn
    Stefan

  • Stefan, dank voor het compliment.
    Welk voorbeeld bedoel je daar precies, ik kan nergens iets vinden over piperme.com?

  • Oops, ik bedoel piperlime.com 😉 dit is een kopie van gap.com maar dan voor schoenen.
    Check deze twee artikelen.
    New Approach From Gap to Cut Down on Clicks
    Online sales report set for release

  • Erg mooie oplossing, had wel al zoiets al eens gezien bij een website, maar snapte toen de meerwaarde ervan nog niet.... Nu wel 😉 🙂

  • Kevin

    Hallo André,

    Ik snap de achterliggende gedachte van het script (ik heb het zelf ook ooit zo aangepakt).
    Het werkt snel en stabiel in ff1+, safari, opera en chrome. Het aan de gang krijgen in een willekeurige versie
    van IE is echter niet mogelijk. Waarom?

    1) IE lapt alle regels aan z'n laars en moet van de browsermarkt geschopt worden.
    2) IE slaat geen hash of een verandering ervan op in de browser history.

    Wat to do?
    De (voor zover ik weet) enige manier om de back- en forwardbutton bulletproof te laten werken in een AJAX omgeving is door het gebruik van RSH (reallysimplehistory) i.c.m. een framework als bijv. JSON of PROTOTYPE.
    Ik heb vernomen dat o.a. google gmail gebruik maakt van deze techniek dus ik denk dat het geen slecht idee is om hier wat onderzoek naar te doen als je nog naar een allround oplossing voor je probleem zoekt.

    Hoop dat je hier iets aan hebt!

    Groeten,

    Kevin