En mobilanpassad webbplats: varför det spelar roll
En stor del av webbtrafiken kommer i dag från smarttelefoner och surfplattor, vilket gör en mobilanpassad webbplats till en förväntan snarare än en fördel. Är sajten byggd enbart med datorskärmen i åtanke möts mobilbesökaren ofta av pytteliten text, knappar som hamnat fel och långsam laddning — och lämnar. Responsiv design löser det genom att anpassa layouten automatiskt efter varje skärmstorlek.
I det här inlägget tittar vi på varför en sajt som fungerar bra i mobilen är viktig och vilka tekniska grunder den vilar på.
Varför mobilanpassad design spelar roll
Användarupplevelsen avgör om besökaren stannar
En mobilbesökare avgör på några sekunder om sajten går att använda. Måste innehållet zoomas, skrollas i sidled, eller sitter länkarna för tätt uppstår friktion. Bra responsiv design sätter tydligheten främst: läsbar grad, tillräckligt med tomrum och en logisk ordning på elementen på en mindre skärm. Ju smidigare användarens resa är, desto större chans att hen fortsätter och når den avsedda handlingen.
Google indexerar mobilversionen först
Google har gått över till så kallad mobile first-indexering, vilket betyder att sökmotorn i första hand bedömer och indexerar sidans mobilversion. Är mobilvyn ofullständig eller innehållet ett annat än på datorn kan det skada synligheten i sökresultaten. Mobilanpassning hänger därmed också ihop med sökmotoroptimering — en sajt som fungerar bra i telefonen är mer pålitlig för en sökmotor.
Mobilupplevelsen påverkar konverteringen
Konvertering — att slutföra ett köp, fylla i ett kontaktformulär, ringa — beror på hur enkelt det är att slutföra handlingen i telefonen. Ett klumpigt formulär, pyttesmå knappar eller långsam laddning avbryter processen i det viktigaste ögonblicket. En sajt som flyter i mobilen tar bort de hindren och hjälper besökaren fram till målet.
Grunderna i en mobilanpassad webbplats
Responsiv layout
Responsiv design betyder att sidan anpassar sig automatiskt till skärmbredden: spalterna ordnas om, bilderna skalas och menyn blir anpassad för telefon. Moderna CSS-tekniker som flexibla rutnät och brytpunkter (breakpoints) gör att en och samma sida kan se bra ut både på en stor skärm och i en fickstor telefon. Samma logik gäller genom hela arbetet med UI/UX-design — layouten ska tjäna innehållet, inte tvärtom.
Snabb laddningstid
Mobiluppkopplingen varierar och tålamodet är kort. Laddningstiden påverkar både användarupplevelsen och placeringen i sök. Tekniker som hjälper till att hålla uppe hastigheten är bildoptimering och användning av moderna bildformat, webbläsarcache, minifiering av kod och att bara ladda de resurser som behövs. Ju mindre telefonen måste ladda ner, desto snabbare visas innehållet.
Tydlig navigation
En liten skärm har inte plats för en bred menyrad, så navigationen måste tänkas igenom separat. En hopfällbar meny, en tydlig struktur och en logisk indelning hjälper användaren att snabbt hitta det hen söker. Det är viktigt att det innehåll som behövs oftast är åtkomligt med liten möda, utan djupa menynivåer.
Beröringsvänliga element
En telefon styrs med fingret, inte med en exakt muspekare. Därför måste knappar, länkar och formulärfält vara tillräckligt stora och ligga tillräckligt långt från varandra för att kunna tryckas bekvämt utan att man träffar grannen. Beröringsvänliga element minskar felen och gör sajten smidig att använda.
Optimerat innehåll
I mobilen läses text i en smalare spalt, så kortare stycken, tydliga mellanrubriker och listor fungerar bättre än långa textblock. Bilder och video bör levereras i en storlek som passar skärmen så att de inte bromsar laddningen. Välstrukturerat innehåll är på en gång användar- och sökmotorvänligt och hör till varje genomtänkt innehållsproduktion.
Responsivitet börjar i teknikvalet
Mobilanpassning är inget kosmetiskt tillägg i slutfasen utan formas redan av sajtens byggmässiga val. Ju lättare sajtens grund är, desto snabbare och smidigare fungerar den i telefonen. Det är just här det är värt att tänka igenom vilken teknik sajten bygger på: färdiga lösningar och universella mallar för ofta med sig extra kod som kanske inte behövs i mobilen, medan ett kodbaserat angreppssätt ger mer exakt kontroll över layout och hastighet.
Ingen av vägarna är automatiskt fel — det viktiga är att valet görs medvetet och med sajtens syfte i åtanke.
Så kan ArborIT hjälpa
ArborIT har varit verksamt sedan 2014 och bygger webbplatser både med WordPress och med kodbaserad teknik (React, Next.js). När mobilhastighet och en smidig användarupplevelse är prioriterade rekommenderar vi oftast den kodbaserade lösningen, men vi väljer alltid utifrån vad som bäst tjänar det aktuella projektet. Planerar du en ny sajt eller vill få ordning på en befintlig mobilvy hjälper vi från webbutveckling hela vägen till underhåll — läs mer under tjänster eller hör av dig.
