Responsivt gjorde Vasamuseets sajt smartare

Sara Ingmar, konsult på Valtech, är i slutfasen med sitt exjobb på masterprogrammet i datavetenskap på Uppsala universitet. Som ett första uppdrag för sin arbetsgivare har det inneburit en prototyp av Vasamuseets nya webbplats.

Arbetet har utförts med responsiv webbdesign. Det innebär att användargränssnittet för webbplatsen anpassar sig till så olika enheter som vanliga datorer, surfplattor och smartmobiler.

Förenklat fungerar responsiv så här: Ta reda på hur många bildpunkter bred bildskärmen är och placera de olika elementen i användargränssnittet baserat på det.

I en mer nyanserad beskrivning bör man ta fasta på att det är viktigt att tänka till i början av ett projekt. Det gäller att veta vilken siddesign som passar för vilken enhet.

Hur gör man sedan rent praktiskt?

– Man anger brytpunkter för när olika designer ska användas. Det görs med stilmallar.

Ett tänkbart exempel är att om skärmbredden är under 800 bildpunkter ska menyn på en sida visas vertikalt i stället för horisontellt. Det är också viktigt att ange alla breddangivelser för placering i relativa mått som procent, så att varje element tar optimalt med utrymme i anspråk. I sajten som Sara Ingmar utgick från var många breddvärden angivna i bildpunkter.

Måhända tar det mer tid att bygga en responsiv sajt, men det går snabbare än att skapa flera olika sajter.

– Jag skapade responsiva versioner av några sidor på Vasamuseets sajt och körde sedan sex olika användningstester med sex personer, berättar Sara Ingmar.

Den främsta slutsatsen hon drar är att det går mycket snabbare för mobil- och plattanvändare med den responsiva sajten än med sajten för vanliga datorer.