“Hemsidan är responsive. Den fungerar på mobil.”

Det är en mening vi hör ofta från lokala företagare som beställt en hemsida. Och tekniskt är det ofta sant — sidan renderar på mobil. Men “renderar” och “fungerar bra” är inte samma sak.

Majoriteten av besökarna på en typisk lokal företagshemsida kommer från mobil — ofta tydligt över hälften enligt de mätningar vi sett. Att inte göra mobilupplevelsen riktigt bra är att medvetet förlora majoriteten.

Här är de tio konkreta sakerna som avgör om en sida faktiskt fungerar på mobil.

1. Snabb laddning

Mål: under 2 sekunder LCP (Largest Contentful Paint) på mobil.

Detta är det mest grundläggande. En sida som tar 5 sekunder att ladda på 4G har redan tappat 40% av besökarna innan första pixeln visas.

Mätbart i Google PageSpeed Insights. Om er sida är över 3 sekunder LCP — det är där förbättringspotentialen är störst.

Vanliga orsaker till långsam mobil-laddning:

  • För stora obearbetade bilder
  • Tunga JavaScript-bibliotek
  • Flera tracking-skript (analytics, Pixel, hotjar)
  • Långsam hosting/server

2. Klickbar telefon

tel:-länkar gör telefonnumret klickbart på mobil. Ett tap = uppringning startar.

Test: öppna er sida på mobil. Tap på telefonnumret. Startar ringfunktionen? Om inte, fixa det.

Detta är en av de enklaste men mest impactfulla mobil-fixarna. Lokala kunder ringer ofta direkt från sökresultatet — gör det löjligt enkelt.

3. 44px+ knappar

Apple’s Human Interface Guidelines (och Google’s Material Design) rekommenderar minimum 44×44 pixel för pekbara element på touchscreen. Mindre = svårt att träffa, frustrerande att använda.

Detta gäller speciellt för CTA-knappar, navigations-länkar, och telefon/mejl-länkar.

4. Läsbar text utan zoom

Brödtext minst 16 pixel. Underrubriker proportionellt större. Ingen text som kräver zoom för att läsas.

Vanliga misstag:

  • “Liten” text på 11-12px (svår att läsa på mobil)
  • Footer-text som krymps under 14px
  • Fotnoter eller “fine print” som blir oläsligt

5. Formulär med rätt input-typer

På mobil bör formulärfält använda rätt input-typ för att aktivera rätt tangentbord:

  • type="tel" för telefon → nummerknappsats
  • type="email" för e-post → e-postknappsats med @
  • type="url" för webbplats → URL-knappsats
  • type="number" för siffror → nummerknappsats

Detta minskar friktion dramatiskt. Att tvinga någon att leta efter @-tecknet på en standard tangentbord är friktion.

6. Ingen horisontell scroll

Sidan ska inte tvinga användaren att skrolla i sidled för att se innehållet. Detta är ett vanligt symptom på dålig responsive design — något (en stor bild, en tabell, en bred container) bryter ut från viewport-bredden.

Test: öppna sidan på mobil. Försök skrolla horisontellt. Om sidan rör sig — det är ett buggar.

7. Lättnavigerad meny

Hamburger-menyer är standard på mobil. Men de måste:

  • Öppnas och stängas tydligt (inte hänga öppen oavsiktligt)
  • Inte täcka kritiskt innehåll när öppnad
  • Ha tillräckligt stora touch-mål (44px per länk)
  • Ha en uppenbar stäng-knapp

Testa er meny med tummen, inte med musens. Den verkliga upplevelsen.

Cookie-banners måste finnas för EU-besökare. Men de bör:

  • Inte täcka huvudinnehållet (täck bara nedre 1/3 max)
  • Ha tydliga val (“Godkänn” och “Bara nödvändiga” — inte bara “Godkänn alla”)
  • Vara rimligt designade för mobil

Banner som täcker hela skärmen och kräver komplicerade val tappar mätbart konverteringar.

9. Bilder som laddar progressivt

Bilder bör vara:

  • Optimerade i format (WebP där möjligt, JPEG/PNG annars)
  • Komprimerade (75-85% kvalitet är oftast tillräckligt)
  • Lazy-loaded (bilder utanför viewport laddas inte direkt)
  • Responsive (rätt storlek levereras baserat på enhet)

En sida med 5 MB:s bildsumma är trög på mobil. Optimerad version kan ofta ner till 500 KB utan synlig kvalitetsförlust.

10. Mobilanpassad CTA-design

Den primära CTA:n ska vara:

  • Synlig på första skärmen utan att skrolla
  • Stor nog att tappas (44px+)
  • Färgmässigt distinkt från resten
  • Texten konkret (“Ring 08-XXX”, “Boka tid”) inte vag (“Mer info”)

Sticky-CTA längst ner på mobilen (alltid synlig medan användaren skrollar) är en debatterad funktion — det fungerar för vissa, känns påträngande för andra. Test för er specifika sida.

Hur du själv testar

Öppna er hemsida på er egen mobil. Inte i desktopläge. Riktig mobilupplevelse.

Det praktiska första steget

Om ni har många mobil-friktionspunkter:

  1. Lista dem alla under en testsession.
  2. Sortera efter störst påverkan på konvertering (telefon, CTA, formulär först).
  3. Fixa en åt gången under kommande veckor.

Många mobil-förbättringar är snabba att fixa — speciellt med en byrå som har erfarenhet. Värdet ackumulerar för varje förbättring.

Vill du gå djupare? Läs Hemsidan som faktiskt skapar kunder för helheten, eller Vad kostar en dålig hemsida? för räkneexempel på den dolda kostnaden.