En mobilvenlig hjemmeside er en side, der er let at læse, navigere og handle på en telefon, uden at brugeren skal zoome, scrolle sidelæns eller ramme meget små knapper. Det handler om tre ting på en gang: layoutet skal tilpasse sig skærmen, siden skal være hurtig nok på mobilnet, og betjeningen skal virke med en tommelfinger frem for en mus.
Det er værd at holde de tre fra hinanden, for de fleste sites klarer den første og fejler på de to andre.
Responsivt layout er kun det første krav
Responsivt design betyder, at layoutet tilpasser sig skærmens bredde. Kolonner bliver til rækker, menuen bliver til en knap, tekststørrelser justeres.
Stort set alle moderne temaer kan det. Derfor er det heller ikke der, forskellen ligger længere. Et site kan være fuldt responsivt og stadig være elendigt at bruge på en telefon, hvis det tager otte sekunder at loade, eller hvis det vigtigste ligger nederst.
De fem krav, der afgør det i praksis
1. Layoutet tilpasser sig. Intet indhold stikker ud over skærmen, og man skal aldrig scrolle vandret for at læse en sætning.
2. Teksten kan læses uden zoom. Brødtekst omkring 16 pixels eller mere, og tilstrækkelig kontrast mod baggrunden. Lysegrå tekst på hvid er svær for alle og umulig i sollys.
3. Man kan ramme det, man sigter efter. Knapper og links skal have plads nok til en finger, og der skal være luft imellem dem. To links lige over hinanden med få pixels imellem er en fejlkilde, ikke et design.
4. Siden er hurtig nok på mobilnet. Det er her flest fejler. En telefon på dårlig dækning har hverken båndbredde eller processorkraft som din bærbare.
5. Det vigtigste kommer først. På en lille skærm er rækkefølgen alt. Åbningstider, pris, lokation og den knap, folk kom for at trykke på, skal ligge højt.
De fejl, vi oftest finder
Nogle problemer går igen på næsten alle sites, vi bliver bedt om at kigge på.
Billeder til store skærme sendt til telefoner. Et billede fremstillet til en bred skærm bliver hentet i fuld størrelse over mobilnettet og derefter skaleret ned. Brugeren har betalt ventetiden for opløsning, hun aldrig ser. Det er den enkeltstående ting, der oftest gør en side langsom på mobil.
Vigtige oplysninger gemt i et billede. Åbningstider eller priser lagt ind som grafik kan ikke læses op, ikke oversættes, ikke søges i og ikke kopieres. Det er både et tilgængelighedsproblem og et SEO problem.
Telefonnummeret er ikke et link. På en telefon burde et nummer kunne trykkes og ringes op. Det er en lille ting, der koster reelle henvendelser.
Formularer med for mange felter. Hvert felt er en forhandling, og på en telefon er tålmodigheden kortere. Spørg kun om det, I faktisk bruger, når I svarer.
Layoutet hopper under indlæsning. Man er ved at trykke, et banner lander ovenover, og man rammer forkert. Det skyldes næsten altid, at der ikke er reserveret plads til noget, der kommer senere.
Mobile first betyder rækkefølge, ikke kun bredde
Mobile first bliver ofte forstået som at tegne det smalle layout først. Det rigtige indhold i begrebet er, at man tvinges til at prioritere.
På en bred skærm kan man lade fem ting stå ved siden af hinanden og udskyde beslutningen om, hvad der er vigtigst. På en telefon står de under hinanden, og så skal nogen bestemme rækkefølgen. Den beslutning er værdifuld, og den er lettere at tage før designet end efter.
Et eksempel: to saloner og et bookingflow
O’s Barbershop har flere steder, man kan blive klippet. Tidligere fandt kunden først sent i bookingflowet ud af, hvilken salon hun var ved at vælge, og måtte nogle gange starte forfra.
Vi gjorde valget til det første, man ser, med adresse, så man kan se, hvilken der er ens egen. Efter omlægningen steg antallet af bookinger fra mobil 36 %, og andelen, der valgte lokation direkte fra forsiden, steg 48 %.
Der blev ikke tilføjet funktioner. Der blev flyttet en beslutning hen, hvor den hørte til.
Sådan tester du din egen side
- Åbn sitet på din egen telefon på mobildata, ikke på wifi
- Gennemfør den vigtigste handling: book, køb eller kontakt
- Læg mærke til hvert sted, du bliver i tvivl eller skal zoome
- Bed en, der ikke kender virksomheden, om at gøre det samme, og sig ingenting undervejs
- Kør en måling af Core Web Vitals på de vigtigste sidetyper
Den fjerde er den ubehagelige. Hver gang du får lyst til at forklare noget, har du fundet et sted, siden skulle have forklaret det selv.
Vi tegner altid mobilen først i designfasen og bygger performance ind fra start, både i WordPress og i Shopify. Vil I have et par øjne på jeres site, som det ser ud i dag, så få en gratis webanalyse.