Guide til mobile-first design

Vi har tidligere skrevet om at mobilen overtar for den bærbare PCen, hvilket betyr vi i dag søker i større grad på mobilen enn på PCen. Særlig hvis vi regner med tablets som en mobil enhet.

Google har nettopp på årets Pubcon gitt en indikasjon på at de innenfor noen måneder oppdeler deres søkeindeks i mobil og desktop, og i samme omgang vil endre til at den primære indeksen vil være mobilindeksen! 

Det betyr at deres primære fokus blir på mobil og tablet, og det krever selvfølgelig at flere og flere hjemmesider bør være mobilvennlige.

mobile-first

Hva betyr mobile-first?

Når vi snakker om “mobile-first” har det som regel noe å gjøre med webdesign.

Det handler om tilgangen til å løse den designmessige oppgave med hjemmesiden eller webshoppen, slik at den blir 100 % mobilvennlig og responsiv.

Mange har en god mobilabonnement med Internett, og velger å bruke mobiltelefonen som det viktigste verktøyet i stedet for den bærbare datamaskinen.

Når man har en mobile-first tilgang betyr det enkelt og greit at man først designer til de mobile enhetene, og deretter optimere siden, slik at den også fungerer fint på en større skjerm.

Det betyr med andre ord at det stadig blir færre og færre sider hvor det er vanskelig å lese, eller kanskje i hele tatt uploade innholdet, på mobilen. Gamle teknologier som Flash osv vil derfor også bli mindre og mindre vanlig.

Hva skal man være særlig oppmerksom på som designer?

La oss se på hva man skal være oppmerksom på når man designer til mobile-first.

Hastighet

Som designer skal man sørge for at siden loader raskt på mobilen.

Det er medregnet i Googles algoritmer, slik at man får en bedre plassering i Google hvis man har en raskere side enn de andre man konkurrerer med på søkeresultatsiden.

designer

Google har lansert et værktøy som viser hvor raskt en side bør loade, og samtidig kommer med optimeringsforslag. Dermed kan man enkelt finne ut hvor man skal starte for å forbedre performance på ens side.

Single column design

Mange CMS-systemer, som fx. WordPress, arbeider i utgangspunktet med flere kolonner. Det gir ikke mening å ha på mobilen, siden skjermen ikke er særlig bred.

Det er viktig at det ikke plasseres viktige elementer i et widget-area eller en høyre kolonne. Denne er ikke synlig på mobilen.

Responsive design vs. mobilversjon

Det har alltid vært delte meninger om hva som er smartest av disse to mulighetene, men jeg vil argumentere for at et responsivt design alltid er å foretrekke.

La meg forklare.

Med et responsivt design unngår du å ha to versjoner av siden. Det betyr du slipper å tenke på utfordringer med duplicate content.

Det betyr også at du ikke trenger å vedlikeholde to ganske ulike plattformer, som jo likevel har samme innhold.

Videre skal man overveie at Google nettopp har signalisert at det er den mobile indeksen som blir den primære. Det vil si man ikke lenger bør tenke på mobilversjonen som en sekundær løsning.

navigation

Det er mange som mener at Google på sikt vil oppdatere desktopindeksen sin sjeldnere og sjeldnere, i takt med at mobile enheter tar mer og mer over. Det vil si at en separat desktop-utgave av siden kan bli foreldet.

Forstørr touch-elementer

Det er ikke alltid like lett å treffe en liten tekstlink eller en knapp på mobilskjermen.

Sørg for at alle klikkbare elementer er store nok, slik at brukeren enkelt kan klikke seg inn på dem. Unngå dessuten å plassere flere klikkbare elementer for nært hverandre. Det gjør det vanskeligere å treffe den riktige.

Navigasjon

Sørg for at menyen er enkel å lokalisere.

Unngå å ha for mange menypunkter. Overhold den gode, gamle designregelen om å ha maksimalt 7 menypunkter.

Gjør det enkelt å se at en meny er en meny. 

Den klassiske “burger-menyen” kan være vanskelig å gjennomskue for eldre mennesker, da det ikke er særlig intuitivt at det er en meny:

imgres

Skriv f.eks. ordet “meny” ved siden av, slik vi også har gjort her på nettkabelen.no.

Test hjemmesiden i Googles mobilvennlighets-verktøy

Google har laget et veldig fint, lite verktøy, som kommer med en vurdering av mobilvennligheten på din side. Videre kommer det også en rekke anbefalinger som kan inspirere til å få de siste tingene på plass.

Se verktøyet her.

God fornøyelse med å optimere mobilen først, og husk: test, test, tekst! Og gjør det på forskjellige mobiltelefoner.

Her er et godt værktøy som raskt viser hvordan siden tar seg ut i nærmest alle tenkelige skjermbredder.

Google begynner å bruke mobilindeksen som sin primære søkeindeks

I mange år har det vært desktop-søkeindeksen som har vært den primære, altså den stasjonære PC-løsningen. Men i takt med at søketrafikken fra mobile enheter har økt og overtatt flertallet, er Google nå i gang med å endre på dette, slik at den mobile indeksen blir det primære.

Det er nok en gang viktig å understreke viktigheten av å ha en mobilvisning som fungerer 100% optimalt, og at man vurdere å starte med å designe til mobilen først, og deretter til desktop og større skjermer.

Kilde: https://searchenginewatch.com/2016/10/18/google-index-set-to-go-mobile-first-within-months/

Morten Storgaard

Jeg skriver primært om Internett, WiFi-relaterte emner og gadgets. Jeg er 36 år gammel og (godt) gift på åttende året med en Youtube-reiseblogger, og er derfor også selv en del ute og reiser. Jeg har startet nettkabelen.no, og når jeg ikke nerder, nyter jeg gjerne god mat eller noe tung rock. :-)

Lignende artikler

Paste your AdWords Remarketing code here