Mobilanpassad hemsida — därför tappar du kunder på mobilen

Din hemsida ser bra ut. Det vet du, för du tittar på den i datorn — stor skärm, mus och gott om plats. Men de flesta av dina besökare ser något helt annat: en hopträngd version i en telefon som hålls i ena handen, ofta i rörelse och nästan alltid med ont om tid. Är sidan inte byggd för det får du aldrig veta vad du missade, för den som ger upp på en mobilsida hör aldrig av sig för att berätta varför.

Här går vi igenom vad mobilanpassad faktiskt betyder, vilka fel som får besökare att lämna, vad det innebär att Google indexerar mobilversionen av din sida — och ett mobiltest du gör på fem minuter med din egen telefon.

Mobilanpassad betyder inte "sidan syns i mobilen"

Nästan alla hemsidor syns i mobilen. Frågan är hur. Den vanliga lösningen är att datorsidan krymps ihop tills den får plats på skärmen — samma tre kolumner, samma meny, samma bildspel, fast i miniatyr. Tekniskt fungerar det. I praktiken sitter besökaren och zoomar.

En mobilanpassad sida är något annat. Innehållet bryts om till en enda kolumn, texten sätts i en storlek som går att läsa direkt, och allt man ska trycka på är gjort för en tumme. En muspekare träffar på pixeln. En tumme täcker ett helt fält, och den som håller telefonen gör det ofta med en hand, stående, i dåligt ljus.

Grunden är en rad kod i sidans huvud som säger åt telefonen att layouten ska följa skärmens bredd. Saknas den ritas sidan upp som om den vore en datorskärm och zoomas ut. Googles guide om responsiv design på web.dev beskriver den inställningen som förutsättningen för att sidan ska gå att läsa utan att zooma in.

De sju felen som kostar dig kunder

1. Texten måste zoomas

Behöver besökaren nypa isär skärmen för att läsa dina öppettider har du tappat en del av dem redan där. Vanligaste orsaken är att sidan sätter en fast textstorlek som ser rimlig ut på en 27-tumsskärm och blir myrspår i handen.

2. Knappar och länkar ligger för tätt

Tre länkar under varandra med några pixlars mellanrum fungerar med muspekare. Med tumme blir det ett lotteri, och den som trycker fel en gång för mycket lämnar sidan. Tillgänglighetsstandarden WCAG 2.2 sätter en konkret miniminivå: en klickyta ska vara minst 24 gånger 24 CSS-pixlar på nivå AA, med undantag bland annat för länkar inuti löpande text. Det är ett golv, inte ett mål — knappar som ska tryckas ofta mår bra av att vara större.

3. Telefonnumret går inte att trycka på

Det här är det billigaste felet att åtgärda och ett av de dyraste att låta vara. Ett nummer som bara står som text tvingar kunden att markera siffrorna, kopiera dem och klistra in dem i telefonappen. Halvvägs dit har hon tröttnat. Numret ska starta samtalet med ett tryck, adressen ska öppna kartan.

4. Innehållet ligger i en PDF

Menyer, prislistor och kursscheman hamnar ofta i en PDF, för det var filen som redan fanns. På mobilen laddar besökaren då ner ett dokument som öppnas i en separat läsare, i A4-format, och måste zoomas och dras i sidled. Vi har gått igenom resonemanget i guiden om hur du gör menyn på hemsidan sökbar och säljande, men det gäller alla branscher: det kunden ska läsa hör hemma på sidan, inte i en bilaga.

5. Sidan går att dra i sidled

Kan du svepa sidan åt vänster och se en tom remsa vid kanten är något bredare än skärmen — oftast en bild, en tabell eller ett kartfönster med fast bredd. Följden är att texten hoppar i sidled när man scrollar och att knappar hamnar utanför synfältet. Vi är vana vid att scrolla uppåt och nedåt, och sidled irriterar direkt.

6. Popupen täcker hela skärmen

En ruta om nyhetsbrev, rabattkod eller cookies är på en datorskärm en tredjedel av ytan och lätt att stänga. På mobilen är samma ruta hela upplevelsen, och krysset ofta stort som ett knappnålshuvud. Är det första besökaren möter något hon måste sikta för att bli av med, har du lagt ett hinder framför din egen entré.

7. Menyn kräver precision

Hamburgermenyn — de tre strecken uppe i hörnet — är standard och helt okej. Problemet uppstår när den fälls ut till fjorton punkter i liten stil, med undermenyer som öppnas när muspekaren vilar över dem, något som inte finns på en pekskärm. Menyn ska ha få punkter, stora träffytor och det viktigaste först: kontakt, öppettider, boka.

Vad mobilanpassning inte kräver

Lika viktigt är vad du kan låta bli. Du behöver ingen app — för ett litet företag är det nästan alltid fel investering, eftersom kunden måste installera den innan hon kan använda dig. Du behöver ingen separat mobilsida på egen adress heller; det betyder bara två versioner av samma innehåll, varav den ena glöms bort. Och banta inte innehållet för mobilen: en kund som läser i telefonen har lika många frågor som en vid datorn.

Google indexerar mobilversionen av din sida

Det här är delen som brukar överraska. Google läser inte din datorsida och visar den sedan i mobilen — det är tvärtom. I dokumentationen står det att mobilversionen av innehållet, hämtad med smartphone-agenten, används för indexering och rankning. Google rekommenderar också att mobilsidan innehåller samma innehåll som datorsidan.

I praktiken betyder det tre saker. Text som saknas i mobilen finns inte för Google heller — har någon förenklat mobilversionen genom att plocka bort tjänstebeskrivningar, är det den bantade versionen som bedöms. Rubriker, bilder och bildbeskrivningar behöver finnas i mobilen, inte bara på datorsidan. Och eftersom det är mobilversionen som indexeras är det där titeln och sidans meta description måste sitta rätt.

Hastighet hör till samma helhet men är en egen fråga — här handlar det om hur sidan fungerar när den väl visas. En sak går ändå inte att skilja åt: en bild gjord för en datorskärm laddas ner i full storlek även på telefonen, om sidan bara skalar ner den visuellt.

Femminuterstestet på din egen telefon

Du behöver inga verktyg och ingen teknisk bakgrund. Ta upp telefonen, öppna din hemsida och gå igenom punkterna i tur och ordning — med en hand, precis som en kund skulle göra.

Klarade sidan alla sex är grunden på plats, och då är det värt att gå vidare med vår checklista över tio saker din hemsida måste ha. Föll den på tre eller fler har du hittat orsaken till att besökarna inte hör av sig.

De flesta mobilfel är småfix, inte en ombyggnad

Här är den ärliga versionen: de flesta hemsidor behöver inte byggas om för att fungera i mobilen. Klickbart telefonnummer, större text, luft mellan länkarna, kortare meny och en PDF som blir vanlig text — fem ändringar som ofta ryms på en förmiddag och tar hand om merparten av problemen.

Ombyggnad behövs först när grunden saknas: när sidan är ritad i fast bredd och bara krymps ihop, när layouten inte går att bryta om till en kolumn. Då blir lappandet dyrare än att göra om. Gör testet innan du bestämmer dig — det avgör vilken situation du befinner dig i.