Med en responsiv hemsida menas att hemsidorna är byggda så att alla element, exempelvis text, bild, video, anpassas utifrån den enhet som används av besökaren. Sidan kommer därmed inte visas identiskt om den besöks från en mobiltelefon eller en dator.
Genom att innehållet anpassas skapas en betydligt bättre användarvänlighet vilket även påverkar konverteringsgrad samt möjlighet att synas bra på Google (SEO).
Om du själv är ute efter att få en snygg, responsiv och SEO-optimerad hemsida. Kontakta oss och få en kostnadsfri offert här.
Exempel med JS Digital
Nedan visas till vänster hur JS Digital presenteras på en dator och till höger hur hemsidan ser ut om besökaren använder en Samsung S5. Som visas ger datorvyn en bredare vy och möjlighet till större överblick över flera olika element. Självklart avgör skärmens storlek och upplösning hur stor del av själva sidan som presenteras men generellt visas flera element på samma gång.
Detta medan det via mobilen visas färre element för att göra det enklare att navigera. Se exempelvis på att menyn på datorvy är öppen medan den i mobilvy läggs i en dropdownbox. Exakt samma funktioner och element finns med oavsett om besök sker via dator eller mobil. Däremot presenteras de anpassade utifrån enhet både gällande storlek och plats.
Responsiv webdesign skapar responsiva hemsidor
Det är viktigt att skilja på arbetsmetod och resultat. Med webdesign syftar man på arbetsmetoden att skapa en produkt/tjänst online. Detta med en design utifrån målgrupp, användarvänlighet, företagets profil m.m. Med en responsiv webdesign tar webbyrån även hänsyn till att innehållet ska visas på olika enheter och skapar förutsättningar för detta.
Resultatet blir sedan en responsiv hemsida som är mycket användarvänlig och därmed lätt att navigera på oavsett om besöket sker via dator, surfplatta eller mobil.
Därför är responsivt viktigt
När hemsidor byggs är det mycket viktigt att utgå från användarvänlighet och Googles riktlinjer, vilka ofta går hand i hand. Det är därmed utifrån dessa två faktorer som fördelarna med responsiv hemsida kan ses. Här är några saker som är viktiga att tänka på när du ska köpa hemsida.
1. Användarvänlighet i mobilen
I rapporten ”Svenskarna och internet 2021” anges att 9 av 10 personer i Sverige använder internet dagligen och att ”mobilen är den enhet som används mest”. Det innebär att E-handlare, och andra företag, inte kan förlita sig på att användarna söker information och handlar via en dator.
”Den smarta mobilen är den enhet som används mest av i princip alla internetanvändare.” / Svenskarna och Internet 2021
Om hemsidan inte är responsiv kan bilder, text och andra element visas på ett sätt som gör det svårt för användaren att söka och navigera på sidan vilket självklart minskar konverteringsgraden.
Innan alla hade en egen smartphone genomfördes alla sökningar och all onlinehandel via dator. Därefter togs steget till att mobilen användes för informationssök men att majoriteten av köpen genomfördes vid datorn. Idag är det ”mobile first” vilket ställer höga krav på en responsiv och användarvänlig upplevelse via mobilen.
2. Google utgår från ”Mobile First”
En av de punkter som avgör hur högt en hemsida presenteras på Google är dess användarvänlighet. Tidigare har sökmotorn utgått från hur en sida presenteras på dator och haft detta som primär rankingfaktor. En hemsida som hade god användarvänlighet i datorvy, men dålig i mobil, kunde alltså ändå ranka högt.
Detta har däremot ändrats och Google anger nu att de utgår ifrån ”Mobile First” vilket innebär att hemsidors ranking avgörs utifrån dess användarvänlighet på mobilen.
3. Möjlighet till mobil annonsmarknad
Med allt fler som surfar med mobilen blir det även allt viktigare för företag att synas mobilt. Detta oavsett om det är med annonsering via Facebook, Twitter, Google Ads eller annat annonsnätverk. Men att annonsera digitalt handlar inte enbart om att skapa intresse och få besökare till hemsidan – utan även att ta hand om dem och nå hög konverteringsgrad.
Att ha en responsiv och användarvänlig hemsida är därmed en förutsättning för att få hög effekt på den annonsering som kan ske mot mobilanvändare.
Verktyg – Så ser din hemsida ut i mobilen
Det finns ett flertal verktyg som kan användas för att se hur en hemsida upplevs i dator, mobil och surfplatta. Det går direkt att se om sidan är responsiv eller inte men även var olika element presenteras och därmed om hemsidan behöver byggas om för ökad användarvänlighet.
Responsive Tester – Plugin till Chrome
Responsive Tester är ett plugin som gratis kan laddas hem och installeras till webbläsaren Chrome. Via en meny går det sedan att välja en mängd olika modeller av mobiler och surfplattor varpå det på skärmen visas hur en användare av just den enheten kommer att uppleva hemsidan. Ett smidigt verktyg för att ”dubbelkolla” att en webdesign verkligen uppfyller sitt syfte.
Googles test – Kontroll utifrån anpassning
Google erbjuder flera verktyg som kan användas för att kontrollera att hemsidorna följer Googles riktlinjer gällande användarvänlighet. Det går exempelvis att kontrollera hur snabbt en sida laddar samt hur responsiv den är.
Med Googles Mobilvänlighetstest går det att ”testa hur lätt en besökare kan använda sidan på en mobil eller mobil enhet”. Detta genom att antingen ange hemsideadressen eller källkod. Efter att en hemsida har testats visas även åtgärder som behöver vidtas för att sidan ska bli mer användarvänlig.
Google Dev Tools – För webutvecklare
Google Developer Tools ger tillgång till en rad olika tjänster för tekniska kontroller av en hemsida. Tjänsten vänder sig primärt till webutvecklare och är ofta för svår att hantera av privatpersoner.
Responsiv webdesign – Bara grunden!
Med Googles mobilvänlighetstest kontrolleras, rent tekniskt, om sidan har en responsiv design. Men detta alltså enbart utifrån kod och inte till fullo utifrån användarvänlighet. En butik kanske vill att specifika produkter eller knappar ska presenteras på ett speciellt ställe och för att kontrollera att så verkligen är fallet bör besök simuleras, exempelvis med Responsive Tester (se ovan).
Responsiv hemsida är alltså bara grundstenen – sedan behöver webdesign och användarvänlighet granskas för att absolut bäst användarvänlighet ska uppnås.
Fyra exempel på responsiv design
Genom att se på olika responsiva hemsidor går det att se hur dess funktion och design är (eller bör vara) användarvänligt utformat.
Dagens Nyheter
Sveriges största dagstidning, Dagens Nyheter, publicerar nyheter löpande och behöver, utifrån besökarnas intention med besöket, ha en extremt god användarvänlighet.
Mobilt nås samtliga knappar i menyn genom att man ”swipar” på menyn åt höger eller vänster. Någon reklam visas inte heller och rubrikerna blir så synliga att besökarna snabbt kan läsa om det senaste som hänt.
På datorn ges bredare överblick i menyn och med bredare skärm finns plats för reklam utan att det stör användarvänligheten nämnvärt. Till skillnad mot mobilen behöver även besökarna scrolla mer för att ta del av nyheterna.
Tradera
Den svenska auktionssidan Tradera har en hemsida uppbyggd av en stor mängd boxar (bilder) med allt från kategorier och information till populära saker på auktion.
Vid en första anblick visas samma information både mobilt och via dator men genom att scrolla ner lite på mobilen visas hur den responsiva designen gör det enkelt att navigera mobilt även om det fortfarande är väldigt många boxar att navigera mellan.
Jollyroom
Jollyroom är en av Sveriges största E-butiker inom leksaker och barnkläder. Se skillnaden mellan mobil- och datorvy genom exempelvis hur menyn presenteras och att samma USP:ar inte nämns längst upp. Dessutom har FAQ-rutan längst ner till höger en betydligt mer framträdande roll på mobilen.
Inne på produkter är det även stora skillnader – se bilderna nedan. I mobil vy syns exempelvis pris och knappen ”Lägg i varukorgen” oavsett hur personen scrollar på produktsidan. Det är något som inte sker i datorvy.
Bjuda.nu
Bjuda.nu är en marknadsföringskanal för tårtbud. Den har en responsiv design vilket bland annat ses i att menyn presenteras olika samt att knapparnas storlek och placering anpassas. En miss är däremot att textstorleken inte är anpassad vilket skapar en ful radbrytning som i sin tur gör att besökarna inte får tillräcklig överblick i mobilt läge.
Varför responsiv hemsida?
Det finns tre primära fördelar med responsiv hemsida. För det första ökar det användarvänligheten då alla element anpassas utifrån den surfenhet som används av besökaren. För det andra bidrar ökad användarvänlighet till en ökad konvertering. För det tredje anger Google att detta är en, av många, faktorer som avgör ranking på sökmotorn.
Hur gör man en responsiv hemsida?
Det enklaste sättet att göra en responsiv hemsida är att använda färdiga mallar i WordPress som har denna funktion. Önskas individuellt anpassad hemsida bör däremot en webbyrå bygga den från grunden.
Vad menas med responsiv?
Med responsiv menas att innehållet är anpassningsbart. En responsiv hemsida presenteras på olika sätt (anpassas) beroende på om besökaren surfar på en dator, surfplatta eller mobil. Däremot behöver ägaren av hemsidan enbart genomföra eventuella ändringar på ett enda ställe.
Vad är responsiv layout?
Responsiv layout innebär att de element som layouten är uppbyggd av får olika placeringar beroende på om datorr, surfplatta eller mobil används.
Vad är skillnad mellan responsiv och adaptiv?
Om en hemsida byggs adaptiv skapas tre olika hemsidor vilka visas beroende på om besökaren använder dator, mobil eller surfplatta. Med responsiv används enbart en hemsida vilken automatiskt anpassas utifrån surfenhet.