Konceptet – anpassat till olika skärmar

På tre år har svenskarna gått från 14% till tre fjärdedelar som äger en smartphone, en mobil som det bland annat också går att surfa ifrån. I åldrarna 12-25 år är förändringen ännu mer påtaglig, ca 96% äger nu en smartphone och drygt 80% använder den dagligen till att att surfa ifrån. Självklart har denna explosionsartade utveckling också ändrat hur vi förhåller oss till webben och vilka förväntningar människor har på webbplatser.

Hur har smartphoneanvändning påverkat förväntningarna på svenskakyrkan.se

Även på svenskakyrkan.se syns denna utveckling tydligt i statistiken. En av de viktigaste grundanledningarna till att en ny webb behövs är att en allt större andel av besöken görs från mobila enheter. Som du kunde läsa i bloggposten från i maj har besöksstatistiken sedan 2010 gått från att pika med 2% mobilanvändare till att ligga närmare 50% som kommer till svenskakyrkan.se från en mobil eller läsplatta. Det betyder att webbplatsen behöver anpassa sig för att Svenska kyrkan ska kunna kommunicera på bästa sätt när människor kommer till svenskakyrkan.se.

Datorn eller mobilen, det är frågan

De flesta som har smarttelefoner eller läsplattor använder sina datorer mindre och mindre. Det vanligaste är att leta reda på den där vägbeskrivningen direkt i telefonen, den följer ju dessutom med i bilen, öppettiderna, kontaktinformationen eller det sociala direkt från mobilen. Vi har vant oss att kunna få omedelbara svar och det blir allt mindre vanligt att avvakta tills vi kommer hem att söka fram information. Telefonen åker istället fram direkt när frågan dyker upp.

Responsiv design

Den nya webben kommer att ha en lösning som gör att designen anpassar sig naturligt beroende på vart den visas. Det som visas är i respons till vilken typ av skärm besökaren använder. Därför kallas lösningen responsiv.

Google förändrar ständigt sin teknik (sina sökalgoritmer) och vid den senaste uppdateringen så prioriteras responsiva sajter. Det betyder att den som sedan i april 2015 söker efter information i mobilen i högre omfattning får upp välanpassade sidor först. Vill ni läsa mer om detta kan vi rekommendera Googles bloggpost i ämnet.

Vi kommer att bygga förutsättningarna för att mobilanpassa även i redaktörernas administrationsgränssnitt. Fullständig mobilanpassning i admin kommer dock inte att levereras i detta projekt.

Mobile first

Det är enklare för användaren att ta till sig några få huvudbudskap än tjugo stycken. Faktum är att undersökningar visar att en för plottrig sida med för mycket val och information till och med kan få användaren att lämna webbplatsen helt och söka alternativa tjänster eller leta efter informationen någon annan stans.

Därför tas nya webben fram efter konceptet ”Mobile first”, vilket innebär att man designar layouten efter enheten med den minsta skärmen (mobiltelefonen) först. Tanken är att man då kommer att tvingas prioritera innehåll, tänka mer minimalistiskt och på så sätt ge användaren en mer ”koncentrerad” upplevelse. Det viktigaste visas först och syftet med varje sida får fokus.

Exempel på responsiv webbplats

Ett exempel på hur en sida förändras beroende på skärmstorleken är Techcrunch, en sida för teknikintresserade. Du kan själv testa hur Techcrunchs layout förändras genom att klicka på ”Återställ” nedåt uppe i högra hörnet av webbläsaren verktygsfält och sedan dra i webbläsarfönstrets högra kant åt vänster för att minska bredden. Dra sakta och du kommer att se hur layouten förändras i flera steg. Nedan är några skärmdumpar med förklaringar:

Responsivt-steg-1

Techcrunchs startsida på desktop, i fullbreddsläge.

Responsivt-steg-2

I sidhuvudet har nu länkarna till de sociala kanalerna plockats bort. En mellanvariant, t.ex. en tablet med större upplösning på skärmen.

responsivt-mobilvy

Ytterligare element har förändrats. Loggan har blivit mindre och högerkolumnen har plockats bort för att ge mer plats åt innehåll i höjdled. Så här skulle det kanske kunna se ut med en stående tablet.

responsivt-steg-4

De små artikelpuffarna till höger om huvudpuffen har flyttats ned under huvudpuffen, som nu får hela utrymmet i toppen. Menyn har ersatts av ikonen för den så kallade ”hamburgermenyn”. Den minsta vyn för exempelvis mobiltelefoner.

Det var allt för den här gången!

När ska vad hända?

I den liggande tidsplanen för projektet ”Webben för framtiden” är framförallt två grova perioder definierade. Dessa är produktion som avslutas med slutleverans och flytt som avslutas med den nya färdiga webbplatsen. I slutleveransen ingår flyttverktyget, den nya designen samt ett uppdaterat admin anpassat för ny design. Efter flytten behöver webbplatsernas sidor fyllas med redaktionellt material.

Om vi jämför allt detta med en konventionell flytt så är produktionen att likna vid renoveringen eller bygget av ett hus, slutleveransen är överlämningen av nycklarna. Flytten är – ja, själva flytten. Ny webbplats är klar när man har möblerat i sitt nya boende.

Under produktionen sker allt ifrån resning av stommar, el- och vattenarbeten till målning och mattläggning. Flytten kan sedan göras på många individuella sätt. Vissa flyttar allt på en gång utan att sortera. Andra planerar i detalj vad som läggs i de minutiöst uppmärkta flyttkartongerna. Flyttverktyget är kartongerna och flyttbilen.

Efter att alla kartonger är staplade i det nya boendet återstår uppackande och möblering, det sista steget i flytten.

Kommande design är uppbyggd av klossar där klossarnas individuella utseenden kan påverka varandra. Bild: Åsa Engström.

 

Vägen till slutleverans är ännu inte helt utstakad. Vissa moment är beroende av andra och måste göras i en viss ordning. Andra moment är mer eller mindre fristående och kan utföras när som helst under produktionen. Det är därför svårt att nu ge en exakt bild av när exempelvis designen för sökträffsidan är klar eller när det finns ett färdigt artikeladmin att prova.

Man skulle kunna säga att kommande design är uppbyggd av klossar där klossarnas utseenden kan påverka varandra. Detta gör det också svårt att tala om en ”färdig” design förrän en stor del av klossarna faktiskt har ett utseende. Slutresultatet beror också i hög grad på hur redaktören väljer att möblera.

Vårt mål är att slutleverans sker i december 2015 och flytten ska vara klar 31 mars 2016. Fortlöpande kommer vi att ge inblick i hur arbetet skrider fram – med bland annat bilder av design som vi vet att många vill se. Men vi vill göra det i konkreta sammanhang där användare och redaktörer har något att relatera till.

Projektets tidsplan på intranätet.