Myter, fakta och tips om Mobile First

Alexander Skogberg

Att erbjuda en bra användarupplevelse på mobila enheter är i dag underförstått, men det betyder inte att det är lätt. Låt oss hjälpa dig med några tips.

I år är det hela sju år sedan Luke Wroblewski myntade uttrycket Mobile First. Hans mantra om att i första hand tänka på mobilen för innehåll och design är idag världskänt. Men fortfarande släpps det många slutprodukter som känns mer som en eftertanke än en optimal lösning på en liten skärm.

Hur ska man då hitta rätt i denna snåriga och mobilfokuserade designdjungel? Låt mig komma med fyra tips som hjälper dig till framgång!

1.Prestanda är troligtvis din webbplats största problem

Enligt HTTP Archive vägde den genomsnittliga webbplatsen 717 kB i januari 2011. Fem år senare ligger siffran på 2 232 kB. Detta är en ökning på cirka 311 procent!

Sorgliga siffror över webbplatsens prestanda. 2011 överst och 2016 undertill.

Med tanke på att kortare laddningstider exempelvis innebär högre konvertering, bättre Google page rankning och lägre bounce rate är denna utveckling obegriplig.

Vad kan man då göra? Ja, exempelvis detta:

  • Minimera CSS och Javascript
  • Aktivera komprimering med GZIP
  • Implementera responsiva bilder med Picturefull
  • Komprimera bilder med JPEGmini eller TinyPNG

Gör detta och se laddningstiden minska – markant!

2. Tänk på att tummen inte når långt

Dagens mobiltelefoner har stora skärmar och de blir inte mindre. Ser vi på populära modeller från Samsung, Nokia, Sony Ericsson och Apple ligger de minsta på fyra tum och många på fem tum eller mer. Detta blir till en utmaning vid design av gränssnitt, då 75 procent enbart använder sin tumme för att navigera.

 

Exempelvis blir det svårt att nå menyknappen som, tyvärr, nästan alltid placeras i den mest svårnådda platsen av dem alla: det övre vänstra hörnet.

Varför placeras menyknappen vanligtvis där uppe till vänster?
Varför placeras menyknappen vanligtvis där uppe till vänster?

Bild från Luke Wroblewski.

3. Sätt breakpoints efter innehåll

När man designar responsiva webbplatser finns inte lyxen, jämfört med en app, att enbart behöva tänka på ett fåtal skärmbredder. En webbplats layout ska vara optimal på allt från en iPhone 4 på 3,5 tum till en Dell-skärm på 27 tum. Mitt råd är att tänka likt Stephen Hay och att först designa för den minsta skärmbredden och sedan dra ut webbläsarfönstret. När det börjar se illa ut, lägg till en breakpoint, justera designen och upprepa.

På detta sätt ser innehållet alltid bra ut, oavsett vilken mobil enhet eller skärm man ser det på.

4. Bestäm grafisk profil med Style Tiles

Att arbeta Mobile First i ett webbprojekt innebär ofta att man bygger en responsiv webbplats. När då den grafiska profilen ska sättas, blir det orimligt vad gäller tid och budget att ta fram pixelperfekta skisser i Photoshop. För många varianter på för många vyer bränner ut Art Directors och pulvriserar budgetar. Prova istället att använda Samantha Warrens koncept, Style Tiles.

En style tile för Washington Post. Ett exempel på grafisk profil utan beroende av innehåll eller layout.

I min inspirationsföreläsning Myter, fakta och tips om Mobile First fläskar jag ut dessa fyra tips, men den innehåller också så mycket mer:

  • Hur en fungerande designprocess ser ut.
  • Vad bra typografi innebär.
  • Tidseffektivt sätt att testa.
  • Hur man designar formulär som konverterar.
  • Varför karuseller fortfarande är sämst.
  • Hur man lyckas med sin navigering.

Lämna en kommentar

3 kommentarer

  • Karin Åberg

    Det övre vänstra hörnet är inte per definition det svåraste att nå. Det är svårast att nå för de flesta, för att de flesta är högerhänta. Så om man sätter menyn i det övre högra hörnet har man inte gjort nåt som är bra, men man har gjort nåt som är bättre för fler och sämre för färre. Om du t ex skulle göra en sida där du säljer saxar och konservöppnare för vänsterhänta så vore det troligtvis inte ett bra designval att placera menyn eller andra nyckelfunktioner längst uppe till höger.

  • Alexander Skogberg

    Hej Karin!

    Enligt en studie i min föreläsning, använder 82,4 % sin högerhand när de navigerar på sina mobiltelefoner. Om man optimerar en designlösning för en sådan stor majoritet anser jag att man har gjort något riktigt bra, om än inte perfekt. Jag förstår inte hur man kan se det på något annat sätt.

    För övrigt anser jag att det inte finns ett specifikt navigationsmönster som alltid ska användas, även om det finns en sak som alltid tycks leda till bra användbarhet. Men mer om det i föreläsningen ;)

    /Alex

  • Mårten Angner

    Tack för tipsen. En bra påminnelse om vad som är viktigt i designen. Skönt att se att skisskittet hänger med fortfarande. Hur ser du skisserna kommer in i din metodik nuförtiden?