Blog

Hvad er "mobile first", og hvad betyder det for dig?

Skrevet af: Rikke Toft Rønn
1. maj 2018

Længe har det samlede antal søgninger på Google været primært fra desktop-computere, men for et par år tilbage ændrede denne tendens sig.

I dag overstiger søgningerne fra mobiltelefoner og tablets computer-søgningerne. Denne tendens har medført, at Google nu har flyttet fokus fra ”desktop-first” til ”mobile-first”.

Før har Google rangeret og vurderet hjemmesider baseret på deres performance på desktop-versionen, men nu kigger Google altså i højere grad på, hvad mobilversionen kan, og hvordan denne ser ud.

Når websites i fremtiden skal optimeres, er det altså mobilversionen, der skal under luppen. Læs med herunder, hvis du vil vide mere om, hvordan du optimerer dit website efter “mobile first”-tilgangen.

Hastigheden er afgørende

De fleste bureauer udvikler stadig websites primært til desktop. I dag er det dog mobil-versionen, der bør tages udgangspunkt i, og herefter kan man tilpasse desktop-versionen – når vi altså snakker Google-performance.

På mobil-versionen er noget af det første, du bør være opmærksomhed på, hvor hurtigt websitet loader. Hjemmesiden får nemlig en højere rangering på Google, hvis mobilversionen loader hurtigt. Derudover er det de færreste mobil- og internetbrugere, der gider at vente længe på, at de kan besøge en hjemmeside eller skifte fane.

Går det for langsomt, kan dine besøgende meget hurtigt skifte din hjemmeside ud med et besøg hos en af konkurrenterne i stedet. Groft sagt skal du ned omkring 1-2 sekunder, hvis dit site er en blog eller en almindelig virksomhedsside. Kun hvis du har en shop med mange produktfotos, kan det forsvares med en lidt højere load tid.

Selve websitets design

På computeren benytter mange hjemmesider sig af flere kolonner på siden, men dette er imidlertid ikke en god idé, når vi snakker mobilversion. Her er skærmen nemlig i de fleste tilfælde ikke stor nok til, at det giver mening med flere kolonner.

Derudover bør du gøre alle touch-elementer store nok til, at de kan rammes med en tommeltot, eller i det mindste med en pegefinger. Dette hjælper nemlig brugerne med at ramme rigtigt første gang, når de gerne vil klikke sig ind på en ny side.

Eksempel: Tjek fx markiseeksperten.dk, som har opdateret alle klikbare elementer til store knapper, som både er lette at ramme med musen og med store tommeltotter.

I samme ombæring bør du ikke sætte to touch-elementer for tæt på hinanden, da dine besøgende så risikerer at trykke forkert – og det kan hurtigt skabe irritation. Det er derfor også en faktor, Google lægger mærke til.

 

Gør navigationen og headeren intuitiv

Gør det nemt for brugeren at navigere på siden og finde frem til menuen og de sider, der kan være relevante for vedkommende. Alt for mange sites har en dårlig navigation på mobilen, som inkluderer mange ikke-logiske links.

Mange website-skabeloner fungerer ikke godt på mobilen, hvor der ikke er plads til en vandret menu. Det giver ofte rod i navigationen og kan gøre det vanskeligt at finde frem til de informationer, brugerne søger.

Det er ofte nødvendigt at re-designe headeren specielt til mobilen, så der nærmest ikke genbruges noget fra desktop-versionen. Sørg for, at brugeren kan overskue menuen på et skærmbillede og fjern evt. elementer som fx sociale medier-ikoner. De kan placeres i bunden af siden i stedet.

Eksempel: På fagmagasinet.dk har jeg været med til at designe headeren, så logoet rykker over i midten på mobilen. Via tests fandt vi desuden ud af, at det er en god ide at skrive ”menu” ved siden af menu-ikonet, så de, der ikke kender mobil-ikonerne så godt, også forstår, hvor de finder menuen.

Én eller to versioner af websitet

Der findes ikke et endegyldigt svar på, om det er mest fordelagtigt med et særskilt design til hhv. mobilen og computeren. Begge dele kan have fordele og ulemper.

Vælger du første løsning – altså en mobilversion kun til mobilen – er den største ulempe, at du skal vedligeholde to forskellige udgaver af dit website, og derfor anbefaler jeg altid at køre med kun ét site.

Når du bruger samme design, skal du være opmærksom på at anvende et responsivt design, hvor du designer dit website efter, at det skal kunne fungere på både smartphones, tablets og desktop-computere.

Med et responsivt design tilpasser designet sig selv i forhold til skærmbredden, og på den måde kan du netop have fx to kolonner for desktop- og tablet-brugere og køre single-column design på mobilen.

Eksempel: Prøv fx at hive i bredden af siden på skatepro.dk, og se, hvordan kolonnen yderst til højre med filtrene forsvinder på de små skærme.

Uanset hvilken løsning du vælger, bør du ikke udarbejde mobilversionen efter desktop-versionen – du bør gøre det omvendt. Mobil-versionen bør med andre ord altid komme i første række, når du optimerer dit website. Således vil du efter Googles vurdering have større chance for at rangere højt under brugernes søgninger.

Læs flere tips om mobile first på netkablet.dk.