Så optimerar du din hemsida för mobilen
Läs om så optimerar du din hemsida för mobilen. Praktisk guide med tips och strategier.
Mer än hälften av alla besök på företagshemsidor sker från mobiltelefoner. Ändå är många företagshemsidor fortfarande byggda med datorskärmen som primär skärm — och upplevs som röriga, svåra att navigera och för långsamma på mobil. Här är en praktisk guide om hur du optimerar din hemsida för mobilanvändare.
👉 Är din hemsida mobiloptimerad? Boka en kostnadsfri analys och ta reda på vad som kan förbättras.
Börja med ett mobiltest
Öppna din hemsida på din mobiltelefon — inte via en emulator på datorn utan på en riktig enhet. Navigera runt, försök hitta kontaktuppgifter, klicka på knappar och försök skicka ett kontaktformulär. Notera vad som är svårt eller irriterande. Det är precis den upplevelsen dina kunder har.
Komplettera med Googles Mobile-Friendly Test (search.google.com/test/mobile-friendly) och PageSpeed Insights för en teknisk analys. Dessa verktyg identifierar specifika problem och ger förslag på åtgärder.
Design för fingrar, inte muspekare
Tillräckligt stora klickytor
En muspekare är millimeterprecis — ett finger är det inte. Googles riktlinje är att klickytor (knappar, menylänkar) ska vara minst 48x48 pixlar och ha tillräckligt med utrymme runt sig så att de inte missklickas. Kontrollera att dina knappar och navigation är lätta att trycka på utan att råka träffa fel element.
Undvik hovringseffekter
Hovringseffekter (hover states) fungerar inte på pekskärmar — du kan inte 'hovra' med ett finger. Om din navigation eller dina knappar har viktig funktionalitet kopplad till hover fungerar det inte på mobil. Designa primärt för pekinteraktion.
Typografi och läsbarhet på liten skärm
Grundtexten på mobil bör vara minst 16 pixlar (1rem) för att vara bekvämt läsbar. Rubriker ska vara tillräckligt stora för att synas tydligt men inte ta upp hela skärmen. Kontrollera radlängden — på mobil vill du ha 35–55 tecken per rad för bäst läsbarhet.
Undvik att sätta text ovanpå bilder om kontrasten inte är perfekt — det är ett vanligt problem som gör text oläsbar på mobil. Lägg alltid en mörk overlay på bakgrundsbilder där du har vit text.
💡 Har du problem med läsbarheten på din mobilsida? Vi hjälper dig åtgärda det — kontakta oss för ett kostnadsfritt samtal.
Navigation som fungerar på mobil
Den klassiska 'hamburgarmeny' (tre streck) är standard för mobilnavigation och de flesta besökare förstår den intuitivt. Se till att menyn öppnas och stänger smidigt och att länkarna i menyn är tillräckligt stora för att trycka på. Undvik djupa menyhierarkier på mobil — håll navigationen enkel.
Formulär på mobil
Kontaktformulär är ofta ett problem på mobil. Se till att formulärfälten är tillräckligt stora, att etiketter är tydliga och att rätt tangentbord visas för rätt fälttyp (siffertangentbord för telefonnummer, e-posttangentbord för e-postfält). Minimera antalet obligatoriska fält — ju färre fält, desto fler personer slutför formuläret.
Hastighet på mobil är extra viktig
Mobiluppkopplingen är ofta sämre och mer varierande än bredband. Det gör att hastighetsoptimering är ännu viktigare på mobil. Komprimera bilder aggressivt, aktivera lazy loading och se till att hemsidan fungerar acceptabelt även på 3G-uppkoppling.
Klickbar telefonlänk
Det enklaste sättet att ge mobilbesökare ett smidigt sätt att kontakta dig: gör ditt telefonnummer klickbart. Använd HTML-länken tel: så att besökaren kan ringa direkt med ett tryck. En VVS-montör eller elektriker vars telefonnummer inte är klickbart förlorar säkert kunder till konkurrenter vars nummer är det.
🚀 Vill du ha en hemsida som fungerar perfekt på alla enheter? Kontakta oss idag och vi hjälper dig optimera för mobil från grunden.
Läs mer
Läs även: Så bygger du en hemsida som genererar leads
Läs även: Så skapar du en hemsida med egen domän — steg för steg
Tillbaka till Webbdesign & hemsidor
Undrar du något?
Responsiv design anpassar sig flytande till alla skärmstorlekar. En 'mobilanpassad' sida kan ibland hänvisa till en separat mobilversion (m.dinhemsida.se). Responsiv design är den moderna och rekommenderade lösningen — en kodbas som fungerar på alla enheter.
Använd Googles Mobile-Friendly Test och PageSpeed Insights för mobil. Testa dessutom manuellt på din egen telefon och be någon annan testa på sin. Tekniska verktyg missar ibland praktiska användbarhetsproblem som ett riktigt användartest avslöjar.
Ja, direkt. Google använder mobile-first indexing, vilket innebär att de rangordnar din sida baserat på mobilversionen. En dålig mobilupplevelse påverkar din ranking negativt.
Det beror på hur din nuvarande hemsida är byggd. Om den redan är responsiv kan optimeringar som bildkomprimering och hastighetsförbättringar göras till lägre kostnad. En icke-responsiv hemsida kräver oftast en mer genomgripande uppdatering.