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.
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.