Vad är en mobilanpassad webbplats och hur testar man den?

01Vad är en mobilanpassad webbplats?

Om du på mobilen måste zooma med två fingrar för att läsa texten, scrolla i sidled eller försöka träffa små länkar är sajten inte mobilanpassad. En mobilanpassad webbplats tar bort de problemen: texten är läsbar, menyn öppnas med ett tryck och knapparna har fingerstorlek.

Mobilanpassning är inte en förminskad kopia av skrivbordssajten. Innehållets prioritet, menyns struktur och formulärens längd tänks om utifrån den lilla skärmens villkor. Mobilanvändaren är ofta på språng, har växlande uppkoppling och vill snabbt hitta det hen söker.

Sökmotorerna tar också hänsyn till det. Google använder i första hand mobilversionen när sajter indexeras och rankas. En sida som ser ofullständig eller trasig ut i telefonen kan alltså försvaga sökresultaten, hur bra den än är på datorn.

02Vad är responsiv design?

Responsiv design innebär att en enda HTML-struktur visas i olika layouter vid olika skärmbredder. I stället för en separat mobilsajt (som m.domän.se) används samma adress och samma innehåll; det som ändras är bara layouten.

Ansatsen har tre grundpelare: flexibelt rutnät (kolumner definierade i procent eller bråkdelar), flexibla bilder (bilder som inte flödar över sin behållare) och mediefrågor (CSS-regler som aktiveras vid vissa skärmbredder).

<meta name="viewport" content="width=device-width, initial-scale=1">

.kartlar {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}

03Mobile first som designansats

Mobile first betyder att man börjar designa med den minsta skärmen och bygger ut mot större skärmar. CSS-exemplet ovan är skrivet enligt den logiken: standardlayouten är en kolumn, och när skärmen blir bredare läggs kolumner till.

Nyttan med ansatsen är inte bara teknisk. På en liten skärm är utrymmet begränsat, så teamet tvingas avgöra vilken information som verkligen är viktig. Resultatet blir enklare, mer fokuserade och snabbare sidor, och skrivbordsversionen drar nytta av den tydligheten.

Detaljerna kring mobile first i gränssnittet har vi gått igenom i artikeln skillnaden mellan UI och UX, och hur det tillämpas på företagssajter beskriver vi på tjänstesidan mobilanpassad design.

04Hur testar man mobilanpassning?

För att kontrollera en sajts mobilanpassning behöver du inga dyra verktyg. Använder du metoderna nedan tillsammans fångar du större delen av problemen.

Webbläsarens enhetsläge

Öppna sidan i Chrome, Edge eller Firefox och öppna utvecklarverktygen (F12 i Windows, Cmd+Option+I på macOS). Genom att aktivera enhetsverktygsfältet kan du se sidan i olika telefonstorlekar och dra ihop och vidga skärmen för att se var layouten går sönder.

Lighthouse och PageSpeed Insights

Fliken Lighthouse i Chromes utvecklarverktyg och PageSpeed Insights analyserar din sida under mobila förhållanden. Rapporterna om prestanda, tillgänglighet och bästa praxis listar små tryckytor, oläsliga texter och saknad viewport var för sig.

Rapporter i Search Console

Google Search Console visar rapporten om Core Web Vitals, baserad på riktiga användardata från din sajt, separat för mobil och dator. Eftersom Googles gamla fristående test för mobilanpassning har tagits bort används i dag den rapporten tillsammans med Lighthouse.

Test på en riktig enhet

Simuleringen visar inte allt. Öppna sajten på minst en Android och en iPhone, i olika webbläsare. Fyll i formuläret, öppna och stäng menyn och kontrollera att ett telefonnummer startar ett samtal när du trycker på det. Test på riktig enhet avslöjar problem som att tangentbordet täcker formuläret först på det sättet.

05Sajten ser trasig ut i telefonen: vanliga orsaker

Sajter vars layout går sönder på mobil har oftast samma få orsaker. Tabellen nedan hjälper dig att utgå från symptomet och hitta lösningen.

06Varför är mobilhastighet extra viktig?

Mobilanvändaren har oftast en långsammare eller mer växlande uppkoppling än på datorn, och enhetens processor är mer begränsad. En sida som öppnas snabbt på datorn kan få mobilen att vänta i flera sekunder på grund av tunga bilder och stora JavaScript-filer.

Googles mätvärden för Core Web Vitals mäter den upplevelsen: som “bra” gäller 2,5 sekunder för laddningstiden för det största innehållet (LCP), 200 millisekunder för responstid vid interaktion (INP) och 0,1 för visuell förskjutning (CLS). Att leverera bilder i moderna format, bara ladda den kod som behövs och ställa in cachen rätt förbättrar värdena.

Det tekniska arbetet går vi igenom under hastighet och prestanda. Eftersom mobilhastighet också påverkar sökbarheten bör den planeras tillsammans med SEO-anpassad webbdesign.

07Checklista för mobilanpassning

Bocka av följande punkter en efter en innan du publicerar eller när du utvärderar sajten på nytt:

• Viewport-metataggen finns på varje sida.
• Ingen sidledsscroll uppstår vid någon bredd.
• Brödtexten går att läsa utan att zooma och radavståndet är luftigt.
• Knappar och länkar har en storlek som är lätt att trycka på med fingret.
• Telefonnummer fungerar som klicka-för-att-ringa och adresser som kartlänkar.
• Formulären är korta och rätt tangentbordstyp (e-post, telefon, siffror) öppnas.
• Popup-fönster täcker inte innehållet och går lätt att stänga.
• Färgkontrasten är läsbar även i solsken; kontrastförhållandet 4,5:1 som WCAG rekommenderar för normal text är ett bra mått.
• Mobilrapporten i Lighthouse har inga kritiska varningar.

08Mobilanpassning är aldrig färdig en gång för alla

Nya enheter, olika skärmproportioner och webbläsaruppdateringar dyker upp varje år. Varje ny sektion, kampanjbanner eller chattverktyg som läggs till på sajten kan förstöra mobillayouten. Därför är det en bra vana att upprepa mobiltesterna efter varje större uppdatering.

Vad du bör tänka på kring tillgänglighet hittar du i vår guide om webbtillgänglighet, och hur mobilupplevelsen byggs upp på en företagssajt i artikeln vad är en företagswebbplats. Vill du ha en bedömning av hur din sajt ser ut på mobil kan du skriva till oss.