For 15 år siden var det aller viktigst å lage hjemmesiden din fin på datamaskin, slik er det ikke lenger.
I 2015 passerte søkevolumet på mobiltelefoner PC-ene for første gang [1] og i dag skjer over 60% av google-aktivitet på mobiltelefon [2]. Dessuten har google trappet opp viktigheten av en rask og brukervennlig mobil-visning i søkeresultat-rangeringene.
Mobil-visningen til hjemmesiden din er altså enda viktigere enn PC-visningen. Derfor skal vi ta en kjapp gjennomgang av hvordan du kan gjøre hjemmesiden sin mer mobilvennlig.
1 Bruk responsive verktøy
Avhengig av hvilke verktøy man bruker til å lage siden sin er det forskjellige ting man kan gjøre. De fleste nye nettsidebyggere som Wix og Squarespace tilpasser en del for deg slik at det ikke ser helt krise ut på mobil. Som regel kan man bytte mellom å redigere PC- eller Mobil-visningen.
Andre verktøy som Divi-editoren, en plug-in for wordpress, gir deg ingen muligheter for å tilpasse mobil-visningen, med gjør en del for deg. Der du får muligheten til å redigere begge visningene detaljert er det lurt å bruke relative størrelser, i motsetning til absolutte. Det vil si at man ønsker å definere størrelsen til et bilde til for eksempel 20% av høyden til skjermen, istedenfor f.eks. 300 pixler. Dersom man bruker pixler, som er en absolutt størrelse, vil det se helt forskjellig ut på PC og mobil.
Et generelt tips: sett deg inn i det verktøyet du bruker for å lage nettsiden din og finn ut både hvilke muligheter du har for å skreddersy mobil-visningen, og hvor mye hjelp du får av verktøyet til å tilpasse siden.
2 Sidehastighet
Sidehastighet er kjempeviktig; en rask side forbedrer brukeropplevelsen og det hjelper med søkemotoroptimaliseringen (SEO). Dessuten er det enda viktigere på mobil enn på pc. Når google rangerer de ulike sidene på søkeresultatene, går den i hovedsak ut fra mobil-visningen. I tillegg er mobilen som regel tregere enn PC-en, og vil slite mye mer dersom siden ikke er rask nok.
En stor del av optimaliseringen av sidehastigheten ligger på kode-delen, det har vi ikke tid til i dag. Men, du kommer veldig langt med å passe på disse enkle tingene:
Sørg for at bildefilene ikke er større enn 500kb
Bruk WebP eller JPEG format på bildefilene - man kan konvertere på nettsider som: https://cloudconvert.com/
Bruk maksimalt 4 forskjellige fonter
Begrens animasjonsbruken så mye som mulig
Prøv å ikke ha så mye innhold på den delen av skjermen som vises først når siden har lastet inn
Dersom det er tilgjengelig, bruk “lazy loading” - bilder lastes kun inn når man scroller ned til dem
Ikke bruk videoer - evt. bruk youtube-link
3 Bruk simplere design
Forenkle nettsidedesignet ved å fjerne unødvendige elementer. Det kan være lurt å redusere kompleksiteten på mobil-visningen. De fleste nettsidebyggere gir deg muligheten til å fjerne elementer kun fra mobil-visningen. Det hjelper både med sidehastigheten og brukeropplevelsen.
Selv om mobiltelefonene har blitt veldig store de siste årene er det mange som bruker små telefoner, da er det viktig at det som er på hjemmesiden ikke er rotete eller uoversiktlig. En tommelfingerregel er å ha kun 1 overskrift, 1 avsnitt og 1 bilde samtidig på skjermen.
Det er også lurt å minimere antall animasjoner slik at det ikke blir forstyrrende og forvirrende for brukeren. Vurder også å redusere antall skrifttyper, farger og grafikker for å skape et mer sammenhengende og brukervennlig design.
4 ikke bruk pop-ups
Unngå å bruke pop-up-vinduer med nyhetsbrev, spørsmål eller annen informasjon. Det kan øke lastetiden, noe vi vet ikke er ønskelig, og det forverrer brukeropplevelsen. Det er forstyrrende for brukeren, og som vi har nevnt ønsker vi ikke å ha for mye på skjermen samtidig. Dessuten kan det bli vanskelig å navigere seg vekk fra pop-up-vinduet hvis krysset er lite eller feilplassert.
Hvis du absolutt må bruke pop-ups, sørg for at de er enkle å lukke, ikke blokkerer viktig innhold, og er tilpasset mobilvisning.
5 Store knapper og pusterom mellom linker
Sørg for at knapper og klikkbare elementer på nettsiden er store nok til å trykkes på med en finger på en liten skjerm. Husk at tommelen er ganske stor i forhold til skjermen på en mindre telefon. Av samme grunn bør ikke knapper og linker være for tett inntil hverandre, da man kan risikere å trykke feil med et uhell.
Det er ønskelig med litt færre knapper totalt, men de knappene man velger å ha på siden bør være store, lette å finne, og det må være tydelig hvor de leder. På mobil er det litt mer knotete å navigere mellom faner, og for enkelte brukere kan det bli forvirrende dersom de havner en plass de ikke hadde forventet.
Ikke bruk en vanlig meny med de forskjellige knappene på rekke og rad øverst på siden. Bruk en “hamburger”-meny. De fleste har en intuitiv forståelse av hvordan hamburger-menyene funker, og de er lette å navigere i. Dessuten ser de som regel ganske pene ut og gjør siden simplere.
6 Stor og lesbar font
Velg en lesbar fontstil. Den bør ikke ligne håndskrift, og må ha en viss tykkelse. Teksten bør også være litt større på mobil-visning i forhold til skjermen enn på PC - det siste vi vil er at brukeren ikke klarer å lese hva som står. Gode kontraster er alltid viktig, men spesielt på mobil. Svart tekst på en lys bakgrunn er det aller beste.
7 Tydelige forklaringer på lenker
Som nevnt er det litt vanskeligere å navigere mellom faner på mobil, det er derfor viktig at det kommer tydelig frem hvor alle knapper og lenker fører hen. Spesielt viktig dersom man blir sendt til en ny nettside, eller dersom lenken åpnes i en ny fane.
Generelt er det ikke å anbefale å bruke linker som åpner i en ny fane fordi det gjør at tilbake-pilen i nettleseren ikke funker. For noen brukere kan det være forvirrende, og i det minste irriterende.
8 Optimaliser innsendingsskjema
Innsendingsskjema kan være knotete å håndtere og det er tungvint å skrive for mye tekst med tastaturet på mobilen. Derfor anbefaler vi å redusere antall felt i skjema til kun de som er nødvendige. Her gjelder også de tidligere nevnte prinsippene om god avstand mellom elementene som skal trykkes på, klar tekst og tydelige instruksjoner.
BONUS: Husk å teste på mobil!
Som vi nevnte i innledningen, er mobil egentlig den viktigste plattformen. De fleste nettsidebyggere bruker PC-visningen som utgangspunkt, så start gjerne der - men glem aldri å sjekke hvordan det ser ut på mobil.
Det er også lurt å teste med ulike telefoner: stor skjerm, liten skjerm, gammel, ny osv. Spør gjerne familie og venner om deres førsteinntrykk av siden, og om de får til å navigere slik de ønsker. Ellers er det bare å huske at kunden alltid har rett og prøve å gjøre livet så enkelt som mulig for dem.