Mobilanpassad hemsida: 8 vanliga problem att kontrollera

Granskad på datorn, använd i mobilen

När en hemsida byggs, granskas och godkänns sker mycket av arbetet på en stor skärm. Där finns gott om plats för rubriker, bilder, menyer och animationer.

Men kunden kanske möter samma sida stående i tunnelbanan – med en hand, dålig uppkoppling och några sekunders tålamod. Det förändrar hela upplevelsen.

Här är några av de vanligaste anledningarna till att företag tappar kunder på mobilen utan att märka det.

Problem 1: Mobilversionen är bara datorversionen i mindre format

Det här är kanske det vanligaste misstaget. Hemsidan designas först för datorn. Sedan krymps elementen, staplas under varandra och justeras tills ingenting längre sticker utanför skärmen. Tekniskt sett är sidan responsiv – men upplevelsen kan fortfarande vara dålig.

I mobilen har besökaren mindre skärmyta, mindre överblick, längre scroll, ett finger i stället för en muspekare och ofta mindre tålamod. Innehållet behöver därför ibland prioriteras annorlunda, inte bara göras mindre.

Ett enkelt exempel

Vi skriver mer om mobilens egna prioriteringar i guiden 3 misstag på din hemsida som kan få dig att tappa kunder.

Problem 2: Det tar för lång tid att förstå vad företaget erbjuder

På en stor skärm ser besökaren ofta flera delar av sidan samtidigt. I mobilen ser man kanske bara en stor bild, en rubrik och början på en text. Det gör den första delen av sidan extra viktig.

Står det något vagt som ”Vi skapar möjligheter tillsammans.” och besökaren måste scrolla flera gånger innan det framgår vad företaget gör, skapar du onödig friktion. I mobilen behöver hierarkin vara extremt tydlig. Besökaren ska snabbt kunna förstå:

1. 01Vad erbjuder ni?
2. 02Är det relevant för mig?
3. 03Vad kan jag göra härnäst?

Det handlar inte om att pressa in allt ovanför första scrollen. Det handlar om att visa rätt saker först.

Problem 3: Kunden måste leta efter nästa steg

Föreställ dig att någon hittar din hemsida efter att ha sökt på ”målare Stockholm”. Personen gillar det den ser och vill kontakta dig. Sedan börjar letandet:

Gör nästa steg tydligt

Tjänsteföretag

Få offert

Restaurang

Boka bord

Frisör

Boka tid

Konsult

Boka ett samtal

Den viktigaste handlingen bör vara lätt att hitta även när personen befinner sig långt ned på sidan. En tydlig knapp på rätt plats kan vara betydligt viktigare än ännu en snygg sektion.

Problem 4: Dina knappar är gjorda för en mus

På datorn är det ganska enkelt att klicka på en liten textlänk med muspekaren. Med tummen på en telefon är det en annan sak. Små knappar, länkar som ligger för nära varandra, små ikoner utan tillräcklig tryckyta och rullgardinsmenyer som kräver precision skapar små irritationsmoment.

Var för sig kan de verka obetydliga. Tills kunden trycker på fel sak två gånger och lämnar sidan.

Testa med tummen

Gå igenom din hemsida med en hand. Inte försiktigt – använd den som en vanlig besökare skulle göra. Kan du enkelt:

• öppna menyn?
• trycka på alla knappar?
• stänga popup-rutor?
• välja alternativ?
• fylla i formulär?
• gå tillbaka?

Det är ett väldigt enkelt test som avslöjar mycket.

Problem 5: Mobilmenyn har blivit ett förråd

På datorn finns gott om plats i navigationen. I mobilen hamnar allt bakom en menyikon – och då är det lätt att tänka ”vi lägger in allt där”.

För ett mindre företag räcker det ofta med tjänster, case, om oss och kontakt – plus en tydlig knapp för det viktigaste nästa steget. Det är betydligt enklare att navigera.

Problem 6: Formuläret fungerar – men ingen vill fylla i det

Kontaktformulär är ett klassiskt exempel på något som fungerar tekniskt men ändå skapar problem. På datorn känns sex eller sju fält kanske inte särskilt jobbigt. I mobilen innebär varje fält ett tryck, ett tangentbord som öppnas, skrivande, stängning, scroll – och sedan nästa fält.

Behöver du verkligen veta företagsnamn, organisationsnummer, telefon, mejl, adress, budget, deadline, tjänst och en lång projektbeskrivning innan du ens har pratat med personen? Förmodligen inte.

Ju mindre arbete du kräver av kunden innan kontakten är etablerad, desto enklare blir det att faktiskt skicka förfrågan.

Problem 7: Sidan känns långsam på mobilen

En hemsida kan kännas snabb på kontorets wifi och betydligt långsammare på en telefon ute på stan. Var för sig är de små, men tillsammans gör de sidan tyngre:

• stora bilder
• video som spelas automatiskt
• tunga animationer
• många typsnitt
• spårningsskript
• chattverktyg och andra externa tjänster

Mobilanvändaren märker det snabbt. Google lyfter fram bland annat Core Web Vitals och att innehållet visas bra på mobila enheter som en del av en bra sidupplevelse. Vill du se hur din sida klarar grunderna kan du göra en kostnadsfri SEO-koll.

Design och prestanda hör ihop

Det är lätt att tänka att designern gör designen och utvecklaren löser prestandan. Men bra webbdesign behöver ta hänsyn till båda. Kräver en animation så mycket att sidan känns långsam i mobilen är det också ett designproblem. Och är en video högst upp sidans tyngsta element utan att tillföra något, är det värt att fråga om den verkligen behövs.

En modern hemsida ska inte bara se snabb ut. Den ska kännas snabb.

Problem 8: Cookie-rutor och popup-fönster tar över hela skärmen

På datorn tar en cookie-ruta kanske upp en liten del av skärmen. I mobilen kan samma ruta täcka halva sidan. Lägg sedan till en chattikon, ett nyhetsbrev, en erbjudandepopup och kanske en fast knapp längst ned – plötsligt finns det nästan inget innehåll kvar.

Google beskriver också störande rutor och dialoger som täcker innehållet som ett problem: de gör det svårare både för besökare och för sökmotorer att ta del av sidan. I stället föreslår Google banners som bara tar upp en liten del av skärmen.

Vissa rutor behövs – en cookie-ruta kan till exempel vara nödvändig. Men den kan utformas så att den inte tar över hela skärmen, och du kan vara sparsam med allt annat som läggs ovanpå innehållet.

Testa din egen hemsida i mobilen

Ta fram telefonen, öppna din hemsida via mobilnätet och gå igenom den som en ny kund. Stämmer det här?

• Det viktigaste är lätt att nå – inte bara krympt.
• Det framgår direkt vad du erbjuder.
• Nästa steg finns nära till hands hela vägen.
• Knappar och länkar går att träffa med tummen.
• Menyn innehåller det kunden behöver – inte allt.
• Formuläret frågar bara efter det du behöver nu.
• Sidan känns snabb även utanför kontorets wifi.
• Innehållet syns – inte rutorna ovanpå det.

Det är sällan en enda stor sak som får en kund att lämna. Oftare är det många små – och de flesta går att hitta med en telefon och några minuters ärlig testning.