Tuesday, May 26, 2009

Sköna funktioner på Svensk Handels nya webbplats

Som vi tidigare har berättat har Svensk Handels nya webbplats nyligen lanserats. Siten innehåller några godbitar, både upplevelsemässigt för besökarna och för den tekniskt intresserade.

AJAX funktionalitet med statehantering

På ett flertal ställen på siten undviks sidomladdningar med hjälp av AJAX. Där det är relevant sparas den aktuella staten i hashtag i URL:en vilket gör att back- och forwardknapparna fortfarande fungerar. För alla funktioner där AJAX används finns även fallback så att de fortfarande fungerar även om besökaren inte har javascript aktiverat eller om besökaren är en spindel från en sökmotor. Självklart får besökaren alltid visuell feedback medan en AJAX-förfrågan sker. Denna lösning lever verkligen upp på medlemssidorna men kan även ses på kalendariumet och till viss del på funktionen för beräkning av medlemsförmåner.

Klientsideprestandaoptimeringar
Vi har i stor usträckning följt Yahoos best practices för prestanda vilket bland annat innebär att vi hållt anvädning av ViewState till ett absolut minimum, minimerat javascript, och använt oss av CSS sprites. Det finns tre st CSS-sprites kartor på svenskhandel.se. Dessa tre bilder innehåller totalt ca 60 olika bakgrundsbilder och sänker därmed antalet HTTP-förfrågningar som görs mot servern rätt dramatiskt. Vi har även använt EpiServers CdnSupport modul för att sätta expiration headers på statiska filer och ladda statiska filer från en separat domän.

Intuitivt sätt för redaktörer att jobb med Google maps

Genom den Nansenutvecklade EpiServer propertyn GoogleMapsLocation beskriven här kan redaktörer på ett intuitivt sätt ange adresser eller koordinater som sedan visas med hjälp av Google Maps. Mer om denna property finns att läsa här.

Skalbar layout
Layouten är uppbyggd med den skalbara storleksenheten ”em” för att uppnå största möjliga flexibilitet för olika typer av bildskärmsformat.

Redigerbar 404-sida med möjlighet för redaktören att sätta upp permanenta ompekningar
Sitens 404-sida kan administreras av redaktören i EPiServer. Redaktören kan även ställa in att vissa URL:er ska redirectas permanent till nya sidor. 404-sidan innehåller även ett sökfält och för besökare från sökmotorer kommer detta att vara förifyllt med den sökterm som de initialt sökte på. Mer om denna lösning finns att läsa på EpiServer Labs.

Integration med Svenskt Näringslivs medlemsregister

Medlemmar i Svensk Handel kan registrera sig på siten genom att ange sitt företags organisationsnummer och medlemsnummer. Medlemskapet verifieras mot, och ytterligare information hämtas från, Svenskt Näringslivs medlemsregister. Självklart är detta byggt med en modulär och skiktad arkitektur, i stil med vad vi tidigare har bloggat om, som gör det lätt att göra såväl mindre ändringar som större, exempelvis att integrera med andra system.

Grym sökfunktionalitet
Bra sökträffar levereras av av en Google Mini som kontinuerligt indexerar både de publika delarna av siten och medlemssidorna.

Sökmotoroptimering - med och utan arbete för redaktören
Ett vanligt tillvägagångssätt är att först bygga en ny site och därefter sökmotoroptimera den. Nya SvenskHandel.se är sökmotoroptimerad out of the box. Självfallet finns det alltid mer att göra på detta område, men det grundläggande är på plats, som:

  • Borttagning av länkar till multipla URL:er till samma sida enligt vad som beskrivs av Fredrik Haglund i hans utmärkta blogginlägg EPiServer SEO: Reduce Duplicate Content Links. Som en extra bonus blir dessutom URL:arna så mycket snyggare utan "/sv/" :)
  • Redaktören har möjlighet att ange keywords och description för alla sidor. I de fall då redaktören inte gör det automatgenereras description baserat på brödtexten.
  • Full fallback för AJAX-funktionalitet.
  • Möjlighet för redaktören att sätta upp permanenta ompekningar i EPiServers redaktörsläge. Självklart har de viktigaste URL:erna från den gamla siten kartlagts och pekats om från början.
  • XML sitemap med epicode-projektet Search Engine Sitemaps vilken listar alla publika sidor på siten och låter redaktören prioritera dem relativt varandra i redaktörsgränsnittet.