Responsiv hemsida – så fungerar den bra på mobilen

”Vår sajt funkar väl på mobil?” är en fråga vi får ofta. En sida kan gå att öppna på telefonen och ändå vara svår att använda. Texten kanske är för liten, menyn krånglig eller formuläret dolt av tangentbordet. Det är skillnad på att sidan visas och att besökaren kan göra det den kom dit för.

Här går vi igenom vad responsiv design betyder, vad du bör kontrollera och hur du testar din egen hemsida. Mobilanpassning är en naturlig del av vår webbdesign.

Vad är en responsiv hemsida?

En responsiv hemsida anpassar layout, bilder, typografi och navigation efter det utrymme som finns. Samma webbadress och innehåll ska fungera på en stor datorskärm, en surfplatta och en mobil i porträttläge. Kolumner kan staplas, bilder skalas och menyn få en annan presentation.

Du behöver inte en separat mobilwebbplats. Du behöver en flexibel sida som fungerar på olika skärmar och när besökaren förstorar innehållet.

Varför mobilanpassningen är viktig

• Besökarnas behov: den som kommer från telefonen behöver kunna läsa, kontakta dig eller köpa utan onödiga hinder. Hur stor andel av din trafik som är mobil varierar – kontrollera din egen statistik.
• Synligheten i Google: Google använder mobilversionens innehåll för indexering och rankning. Viktigt innehåll behöver därför finnas även på mobilen. Det betyder inte att mobilanpassning ensam avgör placeringen. Läs Googles råd om mobilindexering.
• Förfrågningar och köp: svåranvända knappar och formulär kan hindra besökaren från att gå vidare.
• Annonsering: landningssidans upplevelse är en del av Googles kvalitetsbedömning. En bättre mobilupplevelse är ändå ingen garanti för lägre klickpris. Kvalitetsresultatet är ett diagnostiskt mått, inte ett direkt auktionsvärde. Läs om kvalitetsresultat i Google Ads.

Sex saker att kontrollera

1. Flexibel layout

Layouten ska anpassas efter skärmens bredd. Bilder, videor och långa rubriker får inte pressa ut hela sidan i sidled. Testa även storlekar mellan vanliga mobil- och datorbredder. En layout behöver fungera i fler lägen än två förutbestämda skärmbilder.

2. Läsbar text och möjlighet att zooma

Brödtext runt 16 CSS-pixlar kan vara en bra utgångspunkt på mobil, men typsnitt, kontrast och radavstånd påverkar också läsbarheten. Anpassa rubriker så att de får plats utan att bli för små. Läs mer om färger och kontrast.

Stäng inte av zoomfunktionen. Testa att förstora texten till 200 procent utan att innehåll eller funktioner försvinner. Kontrollera också att vanlig text kan flöda om i ett utrymme som är 320 CSS-pixlar brett, exempelvis vid kraftig zoom på datorn. Besökaren ska kunna läsa utan att behöva scrolla både uppifrån och ner och i sidled. Vissa innehåll, som breda datatabeller och kartor, har undantag och kan behöva egen sidledsscrollning. Läs W3C:s råd om omflödning.

3. Träffytor som går att använda

Sikta gärna på minst 44 × 44 CSS-pixlar för knappar och andra fristående kontroller. Det är en praktisk tumregel som ger fingret mer utrymme. WCAG 2.2:s krav på nivå AA utgår från 24 × 24 CSS-pixlar, med regler för avstånd och undantag. Den högre nivån AAA anger 44 × 44, också med undantag. Länkar inne i brödtext bedöms därför inte på samma sätt som fristående knappar. Läs om träffytor enligt WCAG 2.2.

Lämna luft mellan kontrollerna och kontrollera att den klickbara ytan är tillräckligt stor – inte bara ikonen du ser.

4. Navigation som fungerar på mobilen

En menyknapp kan vara ett bra sätt att spara utrymme, men navigationen behöver fortfarande vara tydlig. Testa att öppna och stänga menyn, expandera undermenyer och nå huvudsidorna. Kontrollerna ska ligga stabilt när du trycker och fungera även med tangentbord. Prioritera de vägar som hjälper kunden vidare.

5. Bilder i rätt storlek

Leverera bilder anpassade till skärmen och använd moderna format som WebP eller AVIF när det passar. En telefon behöver sällan samma bildstorlek som en stor datorskärm. Bilder längre ner kan laddas in när besökaren närmar sig dem.

Skjut däremot inte upp laddningen av den stora bilden som syns direkt högst upp. Om den är sidans största synliga innehåll kan fördröjd laddning försämra LCP. Bilder behöver också reserverat utrymme så att text och knappar inte hoppar när de visas.

6. Snabb visning och stabil användning

Responsiv layout och prestanda är olika saker, men båda behövs. Largest Contentful Paint (LCP) mäter när det största synliga innehållselementet i visningsytan visas. Ett bra värde är 2,5 sekunder eller mindre, bedömt vid den 75:e percentilen av sidladdningar. Titta också på hur snabbt sidan reagerar och om layouten hoppar. Läs om LCP och vår guide om SEO-misstag.

Så testar du din hemsida

1. Använd en riktig telefon: gå från startsidan till en tjänst, öppna menyn och testa formulär eller köpflöde. Kontrollera även vad som händer när skärmtangentbordet visas. Testa både porträtt- och landskapsläge.
2. Testa olika bredder i webbläsaren: Chromes utvecklarverktyg har en enhetsvy där du kan simulera olika skärmar. Den hjälper dig att hitta layoutproblem, men ersätter inte test på riktiga telefoner.
3. Kör PageSpeed Insights: granska mobilresultatet och förslagen på förbättringar. Skilj det simulerade testet från eventuell data från riktiga besökare. En hög poäng bevisar inte att formuläret eller menyn fungerar.
4. Öppna Viktiga webbvärden i Search Console: rapporten, även kallad Core Web Vitals, visar prestanda för sidgrupper baserat på verklig användardata. Den kan sakna information om webbplatsen har för lite data. Den testar inte hela mobilupplevelsen. Läs om rapporten Viktiga webbvärden.
5. Följ upp i GA4: jämför relevanta förfrågningar eller köp i förhållande till trafik på mobil och dator. Undersök en stor skillnad, men ta också hänsyn till trafikkälla, kundernas beteende, samtycke och hur mycket data du har. Skillnaden ensam bevisar inte ett layoutfel. Läs vår GA4-guide.

Vanliga misstag

• Att bara krympa datorlayouten: planera hur innehåll, meny och funktioner ska fungera på små skärmar redan från början.
• Att packa menyn för tätt: små kontroller nära varandra gör det lätt att trycka fel.
• Att täcka innehållet med popupfönster: gör meddelanden lätta att stänga och undvik påträngande dialoger direkt vid sidöppning. Google rekommenderar att innehållet ska vara lätt att nå.
• Att glömma formuläret: kontrollera etiketter, fält, felmeddelanden och bekräftelsen efter att formuläret skickats. Läs om konverteringsoptimering.
• Att stoppa zoom eller dölja viktigt innehåll: sidan ska fungera även när besökaren behöver större text.

Vill du veta hur din hemsida fungerar på mobilen?

En bra mobilupplevelse gör det lättare att läsa, hitta och ta kontakt. Börja med att testa de vägar dina kunder faktiskt använder och prioritera problemen som hindrar dem.

Vi hjälper dig med responsiv webbdesign. Boka ett kostnadsfritt samtal, så går vi igenom din sida och ger konkreta förslag på vad du bör åtgärda först.