Responsiv design: Vad är det?

Om du äger en webbplats och inte vet vad responsiv design är så är risken stor att du förlorar besökare just nu.

Kort sagt är en responsiv design en layout som anpassar sig efter skärmen på den enhet du surfar på. Om du använder en modern webbläsare kan du se hur det ser ut “in action” genom att ha den här webbplatsen uppe samtidigt som du gör webbläsarfönstret mindre.

I den här artikeln kommer jag berätta varför den responsiva designen är viktig för din webbplats.

Innan den responsiva designen

När webben slog igenom i mitten av 1990-talet satt de flesta bakom skärmar som hade upplösningen 800�600 pixlar. Webbutvecklare såg då till att skapa sajter som inte var bredare än 800 pixlar för att undvika den vågräta rullningslisten, som uppstår när webbplatser är bredare än skärmen. (Vågräta rullningslister — eller “scrollbars” — är inte alls lika vanliga och naturliga som lodräta rullningslister, därför brukar de ge en dålig användarupplevelse.)

År 2004 blev istället upplösningen 1024�768 vanligast i världen. Det dröjde dock inte länge förrän det hade kommit ännu större skärmar, men det ansågs länge vara en god vana att hålla bredden på webbplatser under 1000 pixlar för att täcka en så stor målgrupp som möjligt.

Idag är det lite klurigare. Tekniken utvecklas i rasande fart, och hela tiden släpps det nya enheter med alla möjliga skärmstorlekar; stationära skärmar, laptops, surfplattor, mobiler, smart-TV. Tiden för de fasta bredderna är över.

Varför ska jag bry mig?

Om du har en smartphone har du med stor sannolikhet varit med om att ramla in på en webbplats som inte är responsiv, och lika troligt gör du det fortfarande. Du måste zooma in för att kunna läsa, och när du upptäcker att du tittar på fel ställe så måste du skrolla hit och dit för att hitta det du söker. När du hittar en länk som ser lovande ut ska du klicka på den, och efter att ha väntat femton sekunder på att den ska ladda färdigt så upptäcker du att du har klickat fel.

Du är långt ifrån ensam om att bli irriterad över detta. Cirka 74% av de svenska mobilsurfarna ogillar när de måste skrolla både horisontellt och vertikalt för att kunna läsa en text, 56% blir irriterade över långa väntetider och hela 79% irriterar sig på för små länkar.

Det är faktiskt så pass illa att 87% av alla mobilsurfare lämnar en sajt ifall den är svåranvänd, och en tredjedel lämnar en sida som inte är responsiv för att istället gå till en konkurrerande webbplats. Dessutom hävdar 70% att de aldrig återvänder till en sajt som är svåranvänd på mobilen.

Hur många mobilsurfare finns det då? I skrivande stund är över 17% av världens internettrafik via mobila enheter. Denna siffra ökar så pass kraftigt att man år 2014 räknar med att mobila surfare kommer vara en majoritet, och det är inget vi kan blunda för.

Driver du en webbshop? I så fall har jag några fler siffror till dig. 19% av de som har en smartphone handlar via mobilen, och andelen förväntas förstås stiga samtidigt som de mobila surfarna. Ungefär 66% uppger att de sannolikt inte kommer handla alls om mobilsajten är svåranvänd.

Vanligast är dock att man gör research på mobilen för att sedan shoppa vid datorn, vilket innebär att mobilerna redan utgör en viktig del av näthandlandet.

Ännu fler siffror finns i Cints undersökning från juni 2013.

Fördelar med responsiv design

En vanlig lösning på denna skärmrevolution har länge varit att ha en separat webbplats för mobiler, till exempel “mobil.webbmekanikern.se”. Det är ett steg i rätt riktning, men det finns många fördelar med responsiv design gentemot en separat mobilsida:

En enda webbadress

Att det bara finns en enda webbadress (URL) till ditt innehåll är bra för sökmotoroptimeringen; istället för att sprida ut din PageRank till två sidor med samma innehåll så får du istället en unik sida med högre PageRank. Värt att notera är att sökmotorer inte gillar duplicerat innehåll.

Ett och samma innehåll

En separat mobilsida brukar ofta innebära att man måste hantera dess innehåll separat, vilket i sin tur betyder dubbelt så mycket arbete för dig. Och vem vill arbeta mer än nödvändigt?

Kostnadseffektivt

Det är ofta mycket billigare att skapa en responsiv design och driva en enda sajt än att skapa en helt ny webbplats bara för mobiler — både i uppbyggnad och i drift.

Framtidssäkert

En separat mobilsida är anpassad för små skärmar medan ursprungssajten är anpassad för stora skärmar. Men skärmarna mitt emellan då? Och alla okända enheter och skärmar som kommer i framtiden? En responsiv design fungerar på alla framtida enheter oavsett skärmstorlek.

En konsekvent användarupplevelse

Vad händer om jag delar en mobilsida på Facebook som du sedan går in på via din dator? Risken är att även du kommer in på mobilsidan då, istället för ursprungssidan som faktiskt passar din skärm bättre. Vissa sajter känner av vilken storlek du har på skärmen och skickar dig till rätt sida, men då hamnar du ofta på startsidan och får på egen hand leta upp det jag delade. Dessutom är det otrevligt att bli runtskickad.

Google rekommenderar responsiv design

Hos Google Developers berättar Google att de rekommenderar responsiv design, och vem vill sätta sig emot Google?

Google rekommenderar webbmasters till att följa industristandarden med att använda responsiv design, det vill säga förse samma HTML åt alla enheter och använda endast CSS media queries för att bestämma hur det ska se ut på varje enhet.

Slutsats

Jag ska inte ljuga för dig; en responsiv webbplats kräver mer arbete att göra än en icke responsiv. Om du tänker långsiktigt — vilket du bör göra — så är det dock värt det. Om två år vill du inte stå där som ett fån och undra varför du tappar både besökare och kunder.

Responsiv design är framtiden.