Mobilen først,
og reelt hurtig

Nej, en responsiv side tilpasser sit layout til skærmen, mens en mobile first-side er designet og optimeret til telefonen fra starten.

Mange responsive sider sender stadig en side i desktopstørrelse til telefonen og stabler bare kolonnerne, med billeder i fuld bredde, tunge scripts og menuer bygget til en mus. Resultatet ser fint ud i et smalt browservindue og føles langsomt i kundens hånd i toget. Mobile first vender processen om. Vi beslutter, hvad den første skærm på telefonen skal sige, hvordan tommelfingeren når hovedknappen, og hvad der kan indlæses senere, og udvider derefter layoutet til større skærme. Alle mobile first-sider er responsive, men kun nogle responsive sider er mobile first, og forskellen ses tydeligst på mellemklassetelefoner og ustabile forbindelser.

Sigt efter, at hovedindholdet vises inden for 2,5 sekunder på en mellemklassetelefon over 4G, hvilket er den grænse, Google bruger for en god largest contentful paint.

Google ser også på, hvor hurtigt siden reagerer på et tryk, med 200 millisekunder som mål for interaction to next paint, og på hvor meget layoutet hopper under indlæsningen. For at nå de tal sikkert aftaler vi et ydelsesbudget ved projektets start: et loft for sidens vægt, antallet af forespørgsler, skrifttyper og tredjepartsscripts. Hver designbeslutning holdes op mod det, så hastighed er et krav under udviklingen i stedet for en oprydning bagefter. Vil du se, hvor din nuværende side står, er feltdata i Google Search Console stedet at begynde, og vores arbejde med Core Web Vitals dækker at rette det.

For de fleste virksomheder, der sælger til forbrugere, står telefoner for størstedelen af besøgene, men det eneste tal, der betyder noget, er dit eget, og det ligger allerede i dit analyseværktøj.

I Google Analytics viser rapporten over enhedskategorier fordelingen mellem mobil, desktop og tablet sammen med konverteringsraten for hver. Det andet tal er ofte det mest afslørende. Hvis telefonerne bringer de fleste besøgende, men desktop bringer de fleste henvendelser, er det som regel oplevelsen på mobilen, der taber folk, og ikke publikum, der er uinteresseret. B2B-sider ser nogle gange mere desktoptrafik i arbejdstiden, hvilket ændrer prioriteterne, men sjældent fjerner behovet for en god mobilversion, fordi folk researcher på telefonen og vender tilbage senere. Vi ser på de data i projektets første uge og bruger dem til at beslutte, hvilke sider og forløb der skal optimeres først.

De typiske årsager er for store billeder, for meget JavaScript, langsomme webfonte og tredjepartstags, der indlæses før indholdet.

Billeder er det mest almindelige problem: et foto eksporteret til en stor desktopskærm kan veje mange gange mere, end en telefon har brug for, så vi leverer moderne formater som AVIF og WebP i størrelser, der passer til enheden. JavaScript er den næste synder, fordi telefoner har langsommere processorer, og hvert script skal behandles, før siden kan reagere på et tryk. Chatwidgets, trackingpixels og indlejrede videoer lægger vægt på, som de besøgende aldrig har bedt om. Serverens svartid betyder også noget, især på billigt delt hosting. En mobile first-løsning tager fat på det hele på én gang, og derfor klarer den sig som regel bedre end en hurtig desktopside, der er presset ned på en lille skærm.

Delvist: rettelser af ydelse og brugervenlighed kan forvandle oplevelsen på mobilen uden at starte forfra, men et ægte mobile first-layout følger som regel med et redesign.

De hurtigste gevinster ligger i levering af billeder, oprydning i scripts, indlæsning af skrifttyper og fjernelse af tredjepartstags, der koster mere, end de giver. Klikflader, formularfelter og menuer kan ofte omarbejdes inden for de eksisterende skabeloner. Det, en eftermontering ikke let kan ændre, er den underliggende struktur, hvis siden er designet til en bred skærm, og det vigtigste budskab ligger halvvejs nede på telefonen. Vi starter med en gennemgang af dine vigtigste sider på rigtige enheder og anbefaler derefter enten målrettede rettelser eller en ny hjemmeside, med et klart billede af, hvad hver løsning giver. Mange kunder laver rettelserne først og planlægger redesignet til senere.

Vi tester på rigtige telefoner over neddroslede forbindelser, ikke kun i et smalt browservindue på en computer.

Vores enheder dækker nye og ældre iPhones og Android-telefoner i forskellige skærmstørrelser, fordi en side, der virker på en ny topmodel, kan hakke på en tre år gammel mellemklassemodel. Vi simulerer langsom 4G for at se, hvad en besøgende i toget eller til et event reelt venter på. Hvert vigtigt forløb gennemgås i hånden: at læse en side med én tommelfinger, åbne menuen, udfylde en formular med skærmtastaturet og gennemføre en booking eller et køb. Ved siden af de manuelle tjek måler labværktøjer indlæsning og layoutstabilitet op mod ydelsesbudgettet. Efter lanceringen bekræfter feltdata fra rigtige besøgende, om resultaterne holder, og vi justerer, hvis de ikke gør.