Mobilanpassad räcker inte — det här gäller.

“Responsiv” betyder att layouten anpassar sig efter skärmens bredd. Det är en teknisk egenskap, och den är trettio år gammal vid det här laget.

Att en sida faktiskt går att använda på en telefon är något annat, och det avgörs av sju saker som ingen mediefråga i CSS löser åt dig.

Först: Google tittar bara på mobilversionen

Det här är värt att veta innan resten. Google använder sedan flera år mobile-first indexing — det är mobilversionen av din sida som crawlas, indexeras och rankas. Datorversionen används inte.

Följden är obehaglig och vanlig: har du gömt innehåll i mobilen för att spara plats — dolda avsnitt, kortare texter, bortplockade FAQ — så finns det innehållet i praktiken inte för Google. Sajten rankar på det som syns i telefonen.

De sju sakerna

1. Text som går att läsa utan att zooma

Minst 16 px för brödtext. Under det zoomar mobila webbläsare automatiskt in när man fokuserar ett fält, vilket rycker layouten ur läge.

Radlängden ska också hållas: 50–75 tecken gäller på mobil också, vilket sällan är problemet — där är risken snarare för korta rader på grund av onödig marginal.

2. Träffytor på 44 pixlar

Tummen är trubbig. Länkar i löpande text som ligger tätt, ikoner på 20 px, stängkryss i hörnet — allt sådant blir en fråga om tur. Se vad som gör en knapp klickbar för måtten.

3. Tumzonen

Det här missas nästan alltid. En telefon hålls med en hand, och delarna av skärmen är inte lika lätta att nå.

Praktisk följd: den viktigaste åtgärden — ring, boka, köp — hör hemma i nederkanten, inte i ett hamburgermenylager längst upp till höger.

4. Rätt tangentbord per fält

Två attribut som tar en minut och märks vid varje ifyllnad:

Fält	Attribut	Vad användaren slipper
E-post	type="email"	Leta efter @
Telefon	type="tel"	Bokstavstangentbord för siffror
Nummer	inputmode="numeric"	Samma sak
Postnummer	autocomplete="postal-code"	Skriva alls — telefonen fyller i

autocomplete är den mest underskattade: rätt satt fyller telefonen i namn, adress och e-post åt användaren automatiskt. MDN listar samtliga giltiga värden — det är en längre lista än de flesta tror. Det gör mer för din konverteringsgrad än de flesta designändringar.

5. Hastighet på riktigt nät

Din sajt testas oftast på kontorets wifi. Dina besökare är på 4G i rörelse, ibland med en telefon som är fem år gammal.

I Chrome: DevTools → Network → strypning till “Slow 4G”, och CPU-strypning 4×. Ladda om. Det är närmare verkligheten än något du sett hittills, och det är den upplevelsen Core Web Vitals mäter — vid 75:e percentilen, alltså på dina sämre besök.

6. Inget som kräver hovring

Menyer som fälls ut när man för musen över dem finns inte på en telefon. Det finns ingen mus. Meny, verktygstips och förhandsvisningar som bara har ett hover-tillstånd är otillgängliga.

Allt som går att nå med muspekaren måste gå att nå med en tryckning.

7. Ingen horisontell scroll

En enda bred tabell, ett långt ord eller en bild med fast bredd får hela sidan att glida i sidled, och då blir all text jobbig att läsa.

Vanliga bovar: tabeller utan egen scrollbox, kodblock, långa URL:er i löptext, och bilder utan max-width: 100%.

Testet som ersätter alla verktyg

Ta upp din telefon. Öppna din sajt. Håll telefonen i en hand och försök göra det du vill att en kund ska göra — hitta priset, boka en tid, fylla i formuläret.

Behöver du andra handen, zooma, eller leta mer än några sekunder efter något, har du hittat ditt problem. Det testet tar två minuter och fångar mer än en halvdag i ett emulatorfönster på en 27-tumsskärm.