Vad är fördelen med Responsive Design?

Mobilanpassade webbsidor med Responsive Design

Mobilanpassade webbsidor med Responsive Design

Under 2013 ökade den globala andelen internetanvändare via mobila enheter med 56% (17.4% av alla internetanvändare jämfört med 11.1% 2012 enligt Statista).

För Sverige är siffrorna ännu större. På den svenska marknaden “har mobiltelefonen som kompletterande anslutningsform ökat – från 9 procent år 2009 till 42 procent i år” enligt PTS. Och enligt den årliga och respekterade undersökningen Svenskarna och Internet 2013 använder 65% av svenskarna internet i mobilen. I den kan du också se siffrorna redovisade per åldersgrupp. För åldersgrupperna mellan 16 och 45 år varierar siffrorna mellan 73% och 85% som dagligen använder internet i mobilen. Mot bakgrund av de här siffrorna är det lätt att förstå varför webbplatser behöver vara mobilanpassade. Mobilanpassning är inte längre en ny trend och ett specialfall som endast berör ett perifert segment av din målgrupp och marknad. Mobil är numera det normala.

Andel av de med mobil som dagligen använder sig av internet i mobilen. I åldersgrupperna mellan 16-45 år är siffrorna 73-85%. Källa: www.soi2013.se.

Andel av de med mobil som dagligen använder sig av internet i mobilen. I åldersgrupperna mellan 16-45 år är siffrorna 73-85%. Källa: www.soi2013.se.

Som en följd av trenden mot allt mer mobil trafik blir det förstås allt viktigare för webbplatser att ha en mobilanpassad version. En mobilanpassad webbplats behöver fungera på mindre skärmstorlekar och ha snabbare laddningstid än en traditonell webbplats.

Responsive design eller en särskild mobil webbplats?

Vad är bäst? En separat mobilversion för surfplattor och smartmobiler eller en webbplats med responsive design? Båda lösningarna har sina för- och nackdelar. Vilken lösning som är bäst för dig beror på många saker som: webbplatsens syfte, målgruppen och hur innehållet ska skapas och skötas. Här listar jag tre skäl som väger tungt till fördel för responsive design.

Exempel på nackdelen med olika URL:er för samma innehåll

Så här “fel” kan det se ut när man klickar på en mobilanpassad URL på en “vanlig” dator. Bilden visar när jag klickat på en tweet från Peter Wolodarski, resultet är en uttänjd och märklig sida med pixliga bilder, istället för en webbsida som är anpassad till en normal dator. Med responsiv design händer inte detta, då används samma URL (webbadress) oavsett om det är mobil eller vanlig dator och layouten anpassar sig sedan efter storleken på skärmen när någon besöker länken. Den nedre delen av bilden visar DN:s vanliga webblayout som jag borde ha kommit till.

1. Rekommenderas av Google

En webbplats är endast så bra som dess ranking i sökmotorerna om vi ser den större trenden mot sökmotorer som primär metod för navigera och hitta på internet som Vanessa Fox beskriver i sin bok Marketing in the Age of Google. Om du inte redan läst den borde du absolut göra det. Vad säger då Google med sin marknadsandel på 98% av sökmarknaden i Sverige? Det Google anser är viktigt om man vill synas i deras resultat.

Responsive webbdesign är den metod för mobilanpassning som Google rekommenderar och de klassar den som “best practice”. Skälet till detta är att webbplatser med responsive design har en och samma URL (webbadress) och samma HTML-kod oavsett vilket enhet som används för att konsumera innehållet. Responsive webbdesign gör det enklare för Google att söka igenom, indexera och sortera innehållet. En separat mobil webbplats skulle innebära ytterligare en uppsättning URL:er som Google behöver söka igenom och indexera.

Ett annat skäl är att innehåll som finns i responsive design med en och samma URL är lättare för användare att dela, interagera med och länka till än om innehållet finns på en separat mobil version av webbplatsen.

Detta är lätt att inse om man tänker sig någon som skickar en delningslänk från sin iPhone till en kompis som sitter med en bärbar dator. När länken öppnas på datorn kommer den inte att visa samma sak som för den skickade den från en mobil, eller så visar den samma sak men med en vansinnigt bred enspaltslayout (som i exemplet med Peter Wolodarskis tweet ovan), eller, i värsta fall, kommer länken inte att fungera. Förutom att ett sådant scenario inte är bra för användarna, är dessutom användarupplevelse något som Google lägger vikt vid när de rankar webbsidor. En dålig användarupplevelse skadar sålunda webbplatsens ranking.

Sökmotoroptimering: första pris

2. En webbplats, många enheter

En av fördelarna med responsive webbdesign är att en responsiv webbplats kan erbjuda en bra användarupplevelse för olika enheter och skärmstorlekar. Det är en viktigt faktor eftersom det är omöjligt att förutse alla enheter och skärmstorlekar som kommer att användas för att besöka en webbplats.

Föreställ dig t ex att någon använder sin smartmobil på lunchen för att leta efter en resa från Malmö till Barcelona. Personen hittar en webbplats som har bra erbjudanden och bestämmer sig för att fortsätta leta när han eller hon kommer hem. Men väl hemma använder den datorn istället för mobilen. Om webbplatsen i exemplet är responsiv får personen en smidig och bra upplevelse vid övergången från den mobila webbplatsen till den traditionella eftersom det är samma webbplats på båda enheterna. Särskilt om användaren har synkat webbsidor mellan sin dator och sin mobil, vilket t ex görs på iPhone. Om webbplatsen å andra sidan hade haft en särskild mobilversion kan det istället skapa frustration och förvirring eftersom användaren först behöver hitta datorversionen av webbplatsen och seda leta upp det intressanta innehållet en extra gång.

En webbplats som fungerar bra oavsett skärmstorlek och enhet ger en bättre och mer enhetlig användarupplevelse än en separat mobilversion som designats för en specifik sorts enhet och skärmstorlek. Det känns konstigt nu, men iPad och surfplattor tog alla med överraskning när de kom. Smart TV är något annat som anses vara på väg att slå igenom och det finns experiment som Google glass och Smart Watches och andra wearables. Ingen vet vilka som är framtidens enheter och därför anses en webbplats som anpassar sig till många olika format vara den bästa lösningen.

3. Lättare att hantera

Att ha fler olika versioner av en webbplats innebär mer arbete. Det innebär separata sidor att redigera och separata insatser för sökmotorsoptimering och separata sökmotorskampanjer. Att endast ha en webbplats att hantera är en stor fördel med responsiv design jämfört med en separat mobil version.

Slutsats

Responsive design kan, om det används rätt, ge en bra användarupplevelse oavsett vilken enhet och skärmstorlek användaren har. Med responsive design blir det enklare att hantera innehållet för webbredaktörer eftersom de bara har en version att hantera. Ur ett SEO-perspektiv fungerar responsive design också bättre eftersom den koncentrerar slagkraften i innehållet istället för att vattna ur det med många URL:er till samma innehåll. Slutligen underlättar responsive design också för Google och Bing vid indexeringen av din webbplats och att vara bra kompis med sökmotorerna är viktigt om man vill nå ut och synas.