Mobile-first

Mobile-first betyder, at en webside bliver planlagt og designet med den lille skærm som udgangspunkt. Når indhold, navigation og funktioner fungerer på mobil, udvides løsningen til større skærme. Det er en arbejdsmetode inden for responsivt design.

Mobile-first er ikke det samme som "mobilen må få en enklere og dårligere udgave". Brugeren skal stadig kunne finde priser, kontakte virksomheden, læse vilkår og gennemføre et køb. Metoden tvinger designeren til at prioritere, fordi der ikke er plads til alt på én gang.

Google bruger mobilversionen af en side som udgangspunkt for crawling og indeksering. Hvis vigtigt indhold kun findes på desktop, kan det derfor også skabe problemer for SEO og indeksering.

Start med de vigtigste opgaver. En håndværkers kunde skal måske kunne ringe, se arbejdsområder og sende billeder. En webshopkunde skal kunne søge, filtrere, se lagerstatus og betale. Disse opgaver placeres før dekorative elementer og lange firmapræsentationer.

Navigationen skal kunne bruges med en tommelfinger, og knapper skal have tilstrækkelig størrelse og afstand. Tekst skal kunne læses uden zoom. Indholdet skal kunne flyde om, så brugeren ikke skal rulle vandret. Det hænger direkte sammen med webtilgængelighed.

Billeder skal leveres i passende størrelser, og tunge elementer bør ikke blokere den første visning. Her spiller Core Web Vitals, cache og billedformater som WebP ind. Mobile netværk og ældre telefoner er en mere ærlig test end en hurtig kontorcomputer.

På en hjemmeside bør tekst, formularer og telefonlinks testes på flere skærmstørrelser. På en webshop skal hele checkouten gennemføres på mobil — ikke kun forsiden og produktsiden.

En køreskole har på desktop en bred menu med ni punkter. På mobil bliver den presset ind i en menu, hvor "Priser" ligger som nummer syv og "Tilmelding" som nummer ni. Telefonnummeret er et billede og kan ikke trykkes på.

I den mobile-first version står "Se priser", "Tilmeld dig" og "Ring til os" tydeligt i toppen. Resten ligger i en logisk menu. Formularen har seks felter i stedet for elleve, fordi de øvrige oplysninger kan indhentes senere.

Ud af 600 mobile besøg starter 48 personer en tilmelding mod 24 før ændringen. Andelen stiger fra 4 % til 8 %. Samtidig falder antallet af afbrudte formularer, fordi felterne er lettere at udfylde.

Guiden om en god hjemmeside til håndværkere viser flere eksempler på, hvordan praktiske behov bør styre designet.

En almindelig fejl er at designe en flot desktopside og bagefter stable alle elementer oven på hinanden på mobil. Resultatet er teknisk responsivt, men ikke mobile-first. Brugeren får lange afstande, mærkelig rækkefølge og knapper, der først dukker op efter flere skærme.

En anden fejl er at skjule indhold for at få layoutet til at se rent ud. Hvis produktbeskrivelser, anmeldelser eller vigtig serviceinformation fjernes fra mobilen, får både brugere og søgemaskiner en ringere version.

Store popups er også et problem. Et cookiebanner, en chat og en rabatboks kan tilsammen dække næsten hele skærmen. Hvert element kan være velment, men summen gør siden ubrugelig.

Mobile-first er en designretning, mens Googles mobile-first-indeksering er en søgemaskinepraksis. De hænger sammen, men de er ikke det samme. Du kan teknisk have samme indhold på mobil og desktop uden at have arbejdet mobile-first i designprocessen.

Brug rigtige enheder og ikke kun browserens forhåndsvisning. Test langsomt net, liggende skærm, stor tekststørrelse og tastaturnavigation. Det afslører problemer, en perfekt mockup ikke viser.

En hero-sektion bør for eksempel ikke kræve, at mobilen downloader en stor video, før overskrift og CTA kan bruges. Prioriteringen skal være synlig i både design og kode.

På desktop kan tre kolonner ses samtidig. På mobil bliver de til en lang rækkefølge. Derfor skal rækkefølgen vælges bevidst. Hvis den vigtigste prisboks ligger i midten på desktop, kan den ende efter to mindre relevante bokse på mobil, afhængigt af koden.

Læs siden fra top til bund på en telefon. Kommer forklaringen før beviset? Ligger knappen efter det afsnit, der skaber behovet? Kan brugeren forstå tabeller og sammenligninger, når de bliver stablet? Det er indholdsdesign, ikke bare CSS.

Formularer bør bruge de rigtige inputtyper, så telefonen viser passende tastatur til mail, telefon og tal. Autofuldførelse og tydelige fejlbeskeder kan spare brugeren for besvær. Bed kun om oplysninger, der er nødvendige på det tidspunkt.

Faste elementer i bunden kan være nyttige til booking eller køb, men de må ikke dække indhold, cookiebanner eller andre kontroller. På små skærme bliver 60 pixels hurtigt en stor del af pladsen.

Mobile-first handler også om, hvad der bliver downloadet. Det hjælper ikke at skjule en stor video med CSS, hvis browseren stadig henter filen. Billeder, scripts og fonte skal leveres efter behov, ikke kun gemmes visuelt.

Brug responsive billeder, så telefonen får en mindre fil. Begræns antallet af fontvægte og tredjepartsscripts. En chat, heatmap, annoncepixel og flere trackingværktøjer kan tilsammen forsinke siden mærkbart.

Test med en realistisk mobilforbindelse. Kontorets wifi skjuler problemer, som en kunde oplever i bilen, i et sommerhus eller i et område med svag dækning. En side, der føles øjeblikkelig på desktop, kan være frustrerende på 4G.

Se også på interaktion efter indlæsning. Menupunkter, filtre og accordions skal reagere hurtigt. Layoutet må ikke hoppe, når billeder eller bannere kommer ind. Disse detaljer påvirker oplevelsen lige så meget som det første load.

Den mobile version er ofte den version, flest kunder bruger. Den bør derfor have samme redaktionelle opmærksomhed som desktop — ikke bare et sidste kvalitetstjek før lancering.

Mobile formularer skal være korte og lette at rette. Brug den rigtige tastaturtype til telefon, mail og tal, tydelige labels samt fejlbeskeder tæt på feltet. Autofuldførelse kan spare tid, mens unødvendige felter øger risikoen for, at brugeren stopper. En formular, der virker overskuelig på computer, kan føles lang, når hvert felt fylder en hel skærm.

Navigationen skal vise de vigtigste valg uden at skjule alt bag uklare ikoner. En burgermenu kan være nødvendig, men kontakt, kurv eller booking kan fortjene en synlig placering. Klikflader skal have luft, så en tommelfinger ikke rammer naboelementet. Hover-effekter kan ikke være den eneste forklaring, fordi touchskærme ikke har en stabil hover-tilstand.

På en webshop bør variantvalg, pris, lagerstatus og købsknap være nemme at nå. Sticky elementer kan hjælpe, men de må ikke dække produktinformation eller cookieindstillinger. Test med en lille skærm og med forstørret tekst; problemer viser sig ofte først, når standardlayoutet presses.

Start skitserne med den mindste realistiske skærm. Beslut, hvad der skal stå først, hvilke elementer der kan foldes sammen, og hvilke handlinger der skal være synlige. Udvid derefter layoutet til tablet og desktop. Det tvinger teamet til at prioritere indholdet frem for at skære en stor desktopside ned bagefter.

Udviklingen bør bruge fleksible grids, relative mål og billeder, der tilpasser sig. Et responsivt design er ikke en samling tilfældige brudpunkter, men et layout, der reagerer fornuftigt mellem dem. Test derfor også bredder, der ikke svarer til en bestemt telefonmodel.

Indholdet skal redigeres med mobil i tankerne. Lange overskrifter kan bryde uhensigtsmæssigt, tabeller kan blive ulæselige, og store ord kan skubbe layoutet ud. Det betyder ikke, at teksten skal gøres overfladisk. Den skal struktureres med klare overskrifter, korte afsnit og mulighed for at finde detaljer uden at scrolle blindt.

Browserens responsive visning er nyttig, men den kan ikke efterligne alt. Tastatur, adressefelt, touch, netværk, kamera, betalingsapps og telefonens indbyggede browser påvirker oplevelsen. Test derfor de vigtigste flows på mindst én iPhone og én Android-enhed samt under langsommere forbindelse.

Gennemfør konkrete opgaver: find en ydelse, udfyld en formular, køb et produkt, åbn menuen og gå tilbage. Notér hvor fingeren tøver, hvor tekst bliver skjult, og hvor siden hopper under indlæsning. Den type observation er mere værdifuld end blot at konstatere, at siden “ser fin ud”.

Mobile-first er afsluttet, når den vigtigste opgave kan løses sikkert og uden unødige omveje på en lille skærm. Desktopversionen må gerne være mere rummelig, men den mobile oplevelse skal være et fuldt produkt, ikke en reduceret nødløsning.