COPSOQ jobbar med en enkät som mäter den psykosociala arbetsmiljön och önskade sig en interaktiv sida för att presentera enkäten. Från kundens håll önskades något som liknade flash, inga nya sidor skulle laddas utan allt material skulle presenteras på samma sida genom att animeras in och ut. Det skulle såklart också vara responsivt.

JensenDesign gjorde designen och sedan blev det upp till Follow me Darling att förverkliga designen med animeringar, responsiv design och koppling till WordPress.

Eftersom det inte är så smart att ladda in alla 27 sidorna samtidigt eftersom det skulle bli tungt för både för servern och för besökarna så laddas sidornas innehåll in först när besökaren klickar på en länk i någon av menyerna. Efter att det begärda innehållet laddats (det tar bara några millisekunder) så animeras det gamla innehållet ut och det nya animeras in.

Alla (just nu) 27 sidorna ligger i WordPress och COPSOQ kan själva lägga till, dra ifrån och uppdatera allt innehåll själva.

När man laddar data såhär utan att lämna sidan så så får ju inte varje sida en egen adress och man vill ju kunna länka till en speciell sida i guiden genom att kopiera adressen från adressfältet. Detta löstes genom pushState() som förändrar adressen i adressfältet utan att ladda om sidan. Så varje gång en besökare klickar i menyerna så uppdateras adressen och resultatet blir en direktlänk till just den del av guiden man är på för tillfället. Jag kan alltså t ex länka direkt till Socialt stöd från kollegor tack vare detta.

Eftersom menyerna pekar till på de ”riktiga” sidorna skapade i WordPress så kan sökmotorer fortfarande indexera varje sida i guiden och besökare som kommer till dessa blir vidareskickade till rätt sida i guiden. T ex http://copsoq.se/enkat/samarbete-och-ledning/socialt-stod-fran-kollegor/ kommer automatiskt att skickas vidare till http://copsoq.se/enkatens-uppbyggnad/#samarbete-och-ledning/socialt-stod-fran-kollegor/.