Guidelines til mobile-first design

I dag foretager vi flere søgninger på mobilen end på den bærbare computer. I hvert fald hvis man tæller tablets med som mobil enhed.

Google annoncerede på Pubcon i 2016, at de opdeler deres søgeindex i mobil og desktop, og i samme omgang vil skifte til at det primære indeks vil være mobilindekset!

Det betyder, at deres primære fokus bliver på mobil, og det kræver at hjemmesider skal være mobilvenlige.

mobile-first

Hvad betyder mobile-first?

Når man taler om “mobile-first” har det som regel noget at gøre med webdesign.

Det handler om tilgangen til at løse den designmæssige opgave med hjemmesiden eller webshoppen, så den bliver 100% mobilvenlig og responsiv.

Når man har en mobile-first tilgang, betyder det ganske enkelt, at man først designer til de mobile enheder, og derefter optimerer siden, så den også fungerer godt på en større skærm.

Det betyder med andre ord, at de dage er ved at være ovre, hvor man igen og igen støder på hjemmesider på mobilen, som ikke er lette at bruge eller måske overhovedet ikke loader pga. problemer med gamle teknologier som Flash osv.

Hvad skal man være særlig opmærksom på som designer?

Lad os se på hvad man skal være opmærksom på, når man designer til mobile-first.

Hastighed

Som designer skal man sørge for at sitet loader hurtigt på mobilen.

Folk har lynhurtigt mobilt internet i dag, og hastighed er bygget med ind i Google algoritme, så man får en bedre placering i Google hvis man har en hurtigere side en de øvrige sider, som man konkurrerer med på søgeresultatssiden.

designer

Google har lanceret et værktøj, som viser hvor hurtigt en side loader, og samtidig kommer med optimeringsforslag, så man ved hvor man skal tage fat for at forbedre performance.

Single column design

Mange CMS systemer som fx. WordPress arbejder som udgangspunkt med flere kolonner. Det giver imidlertid ikke mening på mobilen, hvor skærmen ikke er særlig bred.

Det er vigtigt at der ikke placeres vigtige elementer i et widget area eller en højre kolonne, som ikke er synlig på mobilen.

Ved at vælge et design med alt indholdet i én kolonne, kan du sørge for at brugeren får den samme oplevelse, uanset hvilken enhed han/hun benytter. Et godt eksempel er denne side.

Responsive design vs. mobil version

Der har altid været delte meninger om hvad der er smartest her, men jeg vil argumentere for at et responsivt design altid er at foretrække.

Lad mig forklare.

Med et responsivt design undgår du at have to versioner af sitet. Det betyder, at du slipper for at skulle tænke på udfordringer med duplicate content.

Det betyder også, at du ikke behøver vedligeholde to platforme.

Derudover skal man tage med i overvejelsen, at Google netop har meldt ud at det mobile index bliver det primære, dvs. at man skal ikke tænke mobil-versionen som en sekundær løsning.

navigation

Der er stemmer som mener, at Google på sigt vil opdatere desktop indekset sjældnere og sjældnere, i takt med at mobilen tager over, og det vil sige at en separat desktop udgave af sitet kan blive forældet.

Forstør touch elementer

Det er ikke altid let at ramme et lille tekstlink eller en knap på mobilskærmen.

Sørg for at alle klikbare elementer er store nok, så det er let at klikke på dem. Undgå desuden at placere flere klikbare elementer for tæt på hinanden, da det kan gøre det vanskeligt at ramme rigtigt.

Navigation

Sørg for at menuen er let at lokalisere.

Undlad at have for mange menupunkter. Overhold den gode gamle designregel om at have max 7 menupunkter.

Gør det let at se at en menu er en menu.

Den klassiske “burger-menu” kan være vanskelig at gennemskue for ældre mennesker, da det ikke er særligt intuitivt, at det er en menu:

imgres

Skriv fx. ordet “menu” ved siden af, ligesom vi har gjort her på netkablet.dk.

Test hjemmesiden i Googles mobilvenligheds-værktøj

Google har lavet et rigtig fint lille værktøj, som kommer med en vurdering af mobilvenligheden på sitet. Derudover kommer der også en række anbefalinger, som kan inspirere til at få de sidste ting på plads.

Se værktøjet her.

God fornøjelse med at optimere mod mobilen først, og husk: test, test, test! Og gør det på forskellige mobiltelefoner.

Google begynder at bruge mobil søgeindekset som det primære indeks

I mange år har det været desktop søgeindekset, som har været det primære, men i takt med at søgetrafikken fra mobile enheder har overhalet antallet af søgninger fra desktop, er Google nu i gang med at skifte rundt, så det mobile indeks bliver det primære. Du kan læse mere om dette hos Henrik Bondtofte, som beskæftiger sig med det tekniske omkring søgemaskiner.

Det er blot endnu en gang med til at understrege vigtigheden af, at man har en mobilside, som fungerer 100% optimalt, og begynder at bevæge sig i retning af at designe til mobilen først, og derefter til desktop og øvrige større skærmformater.