Optimer dit indhold med strategien ”Mobile first”

23 jun 2016 | Janus Helkjær, Lead Web Developer

Vores seneste blogindlæg handlede om, at flere og flere besøger hjemmesider og finder information fra deres mobil eller tablet frem for deres computere eller laptops. Det er en tendens, der kun bliver større, og som du derfor ikke må ignorere, når du laver hjemmesider eller andet indhold i din virksomhed. Ideen om at fokusere på de mobile enheder har udviklet sig til et mindset, der hedder ”mobile first”. Her kan du læse mere om, hvad det drejer sig om, og hvordan du kan implementere det.

Mange virksomheder ser deres hjemmeside som det sted, hvor virksomheden kan imponere og vise, alt hvad den har at byde på. Det betyder ofte tonsvis af indhold, en masse billeder, lækre grafikker, spændende statistikker og fantastiske funktioner på undersider og undersider til undersider i et kæmpe forgrenet system. Det er tit utrolig flotte og gennemtænkte hjemmesider. Og det er da også virksomhedens identitet, de besøgende møder gennem hjemmesiden.

Derfor kan der være en masse forskellige interesser fra forskellige kanter på en virksomheds hjemmeside. Afdelinger, stakeholders og interessenter har hver deres agenda og ser gerne, at deres del kommer med på sitet – helst på forsiden.

Men den tilgang til at lave en virksomheds hjemmeside bliver mere og mere forældet. I takt med større fokus på de mobile enheder, bør virksomheder tage udgangspunkt i mobilvisningen af hjemmesiden, og ikke den flotte, store og informationstunge hjemmeside lavet til computerskærme. Det er den tilgang, der kaldes ”mobile first”. Den har de vigtige fordele, at brugerne får en bedre oplevelse og et bedre indtryk af virksomheden, og at du bliver skarpere på din virksomheds budskaber.

Hvad er ”mobile first”?

”Mobile first” er en designstrategi og et mindset inden for designudvikling, der slet og ret betyder, at man altid tager udgangspunkt i mobilskærmen frem for computerskærmen. Man tænker på mobilen først, og så kan man derefter udvikle til computerskærmen på baggrund af det, man har lavet til mobilen.

Det er altså en metode, hvor man først og fremmest designer og udvikler indhold til mobile enheder med mindre skærme og først derefter skalerer op til større skærme i forhold til design og yderligere indhold. Fordelen er, at det på grund af mobilskærmens begrænsede plads tvinger dig til at prioritere i indhold og funktioner på sitet, så de vigtigste ting står helt klart.


Hvem har fundet på det?

Det er en fyr ved navn Luke Wroblewski, som menes at være den første, der har foreslået denne nye designstrategi. Han er Product Director hos Google, og han så allerede i 2009, at mobilerne var ved at overtage måden, vi går på internettet på. Du kan læse mere om hans egne tanker om ”mobile first” i dette blogindlæg på hans hjemmeside.

Indtil Lukes nye måde at tænke på var den normale design- og udviklingsmetode den, der hedder ”graceful degradation”, som dækker over, at man udviklede et indhold og et design til en hjemmeside på en skærm, og derefter kunne man overveje, hvordan hjemmesiden skulle tage sig ud på andre skærme, hvis man overhovedet gjorde det. Den tilgang er fra en tid, hvor responsive hjemmesider ikke var normen.

 

Folk i dag forventer mobiloptimering

I dag er de responsive og mobiloptimerede hjemmesider langt mere udbredte. Faktisk er der en forventning hos internetbrugerne til, at din hjemmeside konverterer optimalt. En undersøgelse fra Wolfgang Jaegel, 2015 viser, at 83 % af webbrugerne forventer en gnidningsfri oplevelse på tværs af platforme og enheder. Og det gælder om ikke at skuffe dem, for oplever brugerne de mindste problemer, er de væk fra din hjemmeside og ovre på konkurrentens, som har en langt bedre mobilhjemmeside.

 

Webudviklere elsker store skærme

Selvom det lyder logisk, at man starter med mobilen, fordi det er den vej, de fleste kunder møder virksomheden første gang, så kan det godt være et svært mindset at skifte til. Det kan nemlig virke meget sjovere at lave en hjemmeside til en stor skærm. Der er jo mange flere muligheder, masser af skærmplads med mulighed for megamenuer, sidebarer, masser af produkter i fokus, flotte grafikker og lækre billedgallerier. Og så vil de fleste webudviklere jo selv sidde foran en stor skærm og udvikle, og derfor kan det også være en proces i sig selv at tænke selve arbejdsgangen anderledes, når mobilen skal være udgangspunktet.

 

Du skal ikke skrotte, men prioritere bedre

Fordelene ved en hjemmeside med de mange funktioner, der fungerer på en stor skærm, er dog stadig mange. Der er selvfølgelig en værdi i sådan en hjemmeside, fx intern branding, branding over for samarbejdspartnere osv. Og ”mobile first” er heller ikke ude på at skrotte den slags hjemmeside. Men strategien tvinger dig til at blive bedre til at prioritere i dit indhold, og gør dig skarpere på, hvad der er vigtigst på hjemmesiden, og hvordan det bliver tilgængeligt.

Det vil både være en fordel for virksomheden, som skærper sit forretningsfokus, men ikke mindst også for hjemmesidens besøgende. På større skærme kan man arbejde med, at visse elementer kommer mere til udtryk gennem farvevalg, størrelser og animationer. Arbejder man med ”mobile first”-metoden, er man tvunget til at rent faktisk at prioritere. Og så er den helt store fordel også, at hvis din hjemmeside fungerer godt på mobil, kan den nemmere overføres til andre platforme.

 

Altid ”mobile first” hos Mindmill

For at give et eksempel på, hvordan man kan implementere ”mobile first” som designstrategi og mindset, kan vi passende bruge os selv. Hos Mindmill arbejder vi altid – ikke ulig mange andre digitalbureauer – med at udvikle responsive websites uanset produktet, dvs. hjemmesider der afvikles og opleves gnidningsfrit, uanset hvilken enhed man oplever dem på.

Hos os har det derfor været et naturligt skridt at inkorporere den nye designstrategi, og vi tilstræber derfor altid at arbejde med ”mobile first”. Det gør vi blandt andet, fordi vi mener, at det optimerer vores beslutninger om designet af navigation og strukturering af indhold. Det gør os i stand til at skære helt ind til benet og identificere, hvad vores kunder bør sætte størst fokus på. Den proces optimerer brugernes færden på hjemmeside og øger hjemmesidens konvertering. Det gør vi på grund af de nye statistikker, der viser, hvordan de besøgende bruger mobilen til at gå på nettet, men også fordi det virkelig skærper budskaberne, så de står knivskarpt.

Mobil_tablet_computerTænk over jeres målgruppe

Stort set alle vores kunder kan se ideen med ”mobile first”-strategien. Det er fordi, at deres besøgende også typisk bruger deres mobiler. Men hvis jeres målgruppe faktisk mest besøger jeres hjemmeside fra en computer, så skal I selvfølgelig ikke implementere ”mobile first” uden videre. Overvej, og undersøg, hvor jeres besøgende kommer fra, og hvordan de kommer ind på jeres hjemmeside, og målret jeres strategi til målgruppen. Men selv hvis de fleste besøgende kommer gennem en computerskærm, kan strategien stadig være en god måde at tvinge sig selv til at prioritere indhold, så de budskaber, der er de vigtigste, er dem, de besøgende forstår og husker.

 

Lad kreativiteten flyde, men fokuser på det vigtigste

Man skal selvfølgelig ikke begrænse sine ideer. Selvfølgelig kan og bør I berige brugerens oplevelse, hvis det er værdiskabende for brugeren. Det er fint at have mulighederne på større skærme og stærkere maskiner i mente, men sørg for at have klargjort, hvilke elementer, links, funktioner og indhold, der strengt nødvendigt, og byg så videre derfra.

 

Hvordan gør du så?

Nu har du læst om principperne bag ”mobile first”, som er første skridt til at ændre mindset. Det næste skridt er konkrete råd til, hvordan du kan implementere og bruge strategien. Vi gennemgår her en række nøglepunkter i ”mobile first” og giver dig nogle overordnede råd til, hvordan du kan tænke nyt.

 

”Mobile first” = ”Content first”

I ”mobile first” fokuserer man på sit kerneindhold og de mest afgørende funktioner på siden som grundlæggende ide. Man planlægger og udvikler sit indhold først, og så prioriterer og optimerer man derefter på det. Derfor skal I tænke content først med mobilsiden i baghovedet, før I begynder at designe og udvikle de kreative ideer og løsninger.

For at finde ud af, hvad der er kerneindhold for jeres virksomhed, kan I bl.a. stille jer selv disse spørgsmål:

  • Hvad vil I gerne sælge?
    • Er der produkter på tilbud i shoppen?
    • Hvor ønsker i primært at lede brugeren hen?
  • Hvad vil brugeren gerne købe?
    • Hvilke produkter/ydelser er jeres mest populære?
  • Hvad vil vi gerne sige?
    • Har i budskaber i ønsker at gøre brugeren særligt opmærksom på?

På den måde har I et udgangspunkt i forhold til, hvordan det skal designes.

 

Find det gode indhold, og skriv det klart og tydeligt

Dit indhold bør være rigtigt afstemt og godt og enkelt skrevet. Her skal du overveje, hvordan dit indhold kan svare på brugerens spørgsmål hurtigt, klart og tydeligt. Det er nemlig det, de besøgende leder efter. Tænk grundigt over at prioritere indholdet, og bliv ikke afhængig af “bare at kunne lægge noget i sidebaren” – den eksisterer for det første ikke på mobil, og det er også en doven tilgang at have til hjemmesiden til computerskærmen. På den måde kan ”mobile first” også hjælpe dig med at fokusere på det vigtigste, når du bevæger dig fra mobilskærmen til computerskærmen.


Øvelse: Skift til den analoge verden, og brug post-its

En god øvelse og en god måde at arbejde med prioriteringer på er at splitte sit indhold og sine elementer op og skrive dem ned på post-its. Så kan I liste dem op på en tavle efter hinanden. På den måde bliver det tydeligt, hvad der er vigtigt, og hvilken struktur der er den bedste.

Forenklingens kunst

På grund af mobilskærmens begrænsede plads gælder det inden for ”mobile first”-design om at forenkle. Har I prioriteret indholdet godt, kan I begynde at tænke på, hvordan I med farver, fonte og grafikker kan forenkle, finde den bedste struktur og det bedste visuelle hierarki. Ved at forenkle jeres elementer bliver I ikke distraheret af diskussioner om det visuelle udtryk. Det er ikke der, designet skal starte. Sørg derimod for at fokusere på elementers størrelse, prioritering og afkodning med spørgsmålene fra før i baghovedet. Alt dette handler også om, hvor gennemskuelig navigationen er.

Her kan det også være relevant at stille sig selv tre yderligere spørgsmål:

  • Er sidens hensigt nemt at aflæse?
  • Er navigationen let tilgængelig?
  • Er prioriteringerne afstemte?

Pointer i forhold til interaktion

Brugernes interaktion med hjemmesiden skal være gnidningsfri. Her får du tre gode rettesnore, når du arbejder med ”mobile first”:

  • Vigtige klikbare elementer, som skal være touch-venlige. Det er nemlig helt naturligt for brugerne at klikke på hjemmesiden på skærmen.
  • Regn ikke med hover-effekter. Skjul ikke vigtigt indhold i dropdown menuer, små-infobokse, o.lig., der kun afsløres ved at føre musen over. Den ekstra interaktion kan ikke forventes af brugeren, og dette bør primært benyttes som en berigelse af brugerens oplevelse.
  • Undgå store grafikker. Store billede slidere, bannere og logo tager meget plads på mobile enheder og kan være svære at navigere i og langsomme at indlæse.

Udnyt de gode elementer i ”mobile first”-strategien

Mange virksomheder sidder fast i den gamle tænkemåde, hvor man i arbejdet med en hjemmeside starter med desktop, bevæger sig til tablet og til sidst tænker på mobilen. Udviklingen har vist, at den omvendte tankerække er mere givende: Start med mobilen, gå til tablet og til sidst desktop og computerskærme. Det matcher nemlig den måde, dine besøgende bruger din hjemmeside på.

”Mobile first” er et mindsæt, en designstrategi og en fremgangsmåde, der er i tråd dine besøgendes brug af mobiler på nettet. Hvis du vil følge med dine besøgende, bør du fokusere på mobilen. Det vil både give dig bedre konvertering på din hjemmeside, og det vil også gøre dig og virksomheden helt skarp på, hvilke budskaber I vil ud med. På den måde kan ”mobile first”-strategien også hjælpe virksomheden med at definere jeres kerneydelser skarpere. Så står budskaberne, jeres mobilhjemmeside og I langt stærkere i feltet.

Janus Helkjær

Lead Web Developer

Ta' fat i mig og hør mere

Hos os starter alt forretningsudvikling digitalt, og en god forretningsplan og strategi tager udgangspunkt i kundernes adfærd i en omskiftelig verden. Jeg glæder mig til at høre om dine udfordringer, så vi kan imødegå dem sammen!

Top