Responsiv hemsida – Varför det är ett krav 2026 och hur du gör rätt
Mer än sju av tio besök sker på mobil. En hemsida som inte funkar lika bra i fickan som på laptopen tappar både besökare och rankningar. Här är vad responsiv design innebär – och vad som krävs för att lyckas.
"Vår sajt funkar väl på mobil?" är en fråga vi får ofta. Svaret är nästan alltid: tekniskt – ja. Praktiskt – nej. Det är skillnad på att en sida går att läsa på mobilen och att den faktiskt är byggd för mobil. Och eftersom Google sedan flera år tillbaka rankar utifrån mobilversionen (mobile-first indexing) är det här inte en designdetalj längre – det är grunden. Vad responsiv design egentligen är En responsiv hemsida anpassar layout, bildstorlek, typografi och navigation efter vilken enhet besökaren använder. Samma kod, samma URL, samma innehåll – men presentation som flyttar sig så att allt fungerar på en 1920-pixlars skärm och på en mobil i porträttläge. Det är inte samma sak som att ha en separat "mobilversion". Det är en sajt som från start är byggd för att vara flexibel. Varför det är ett krav, inte ett val Mobil dominerar trafiken: för de flesta småföretag kommer 60–80 % av besöken från mobil Google rankar mobilversionen: det är mobilversionen av sidan som avgör er SEO – inte desktopversionen Konvertering tappas på mobil: en sida som är jobbig att använda på mobilen tappar besökaren innan formuläret Annonser blir dyrare: Google Ads belönar sidor med bra mobilupplevelse med lägre kostnad per klick Vad som krävs för att en sida ska vara genuint responsiv 1. Flexibel layout Inga fasta pixelbredder. Allt mäts i relativa enheter (procent, rem, viewport-units) så att layouten skalar med skärmen. Bilder och videor får aldrig sticka ut utanför skärmen. 2. Läsbar typografi Bröttext ska aldrig vara mindre än 16px på mobil. Rubriker ska skalas ned så att de inte tar fyra rader på en mobil. Radavstånd och radlängd ska vara läsvänliga. 3. Tappbara träffytor Knappar och länkar ska vara minst 44×44 pixlar – det är vad ett tumpekfinger faktiskt klarar att träffa utan att missa. Länkar i löpande text behöver tillräckligt avstånd från varandra. 4. Mobilanpassad navigation En hamburgermeny är standard, men den måste vara enkel att förstå. Stora menyträd ska struktureras om för m