43
FROKOSTSEMINAR 15. DESEMBER 2011

Tilpasning til mobil

Embed Size (px)

DESCRIPTION

Presentasjon fra Epinovas frokostseminar 15. desember 2011.

Citation preview

Page 1: Tilpasning til mobil

FROKOSTSEMINAR15. DESEMBER 2011

Page 2: Tilpasning til mobil

2

ØrjanEpinovaForretningsrådgiver

Page 3: Tilpasning til mobil

HVORDAN & HVORFOR TIL MOBIL?

Page 4: Tilpasning til mobil

HVORFOR

Page 5: Tilpasning til mobil

FORDI ALLE ANDRE GJØR DET!

Page 6: Tilpasning til mobil

FORDI ALLE ANDRE IKKE GJØR DET!

Page 7: Tilpasning til mobil

HVA ER STATUS?

”Sitter på gjerdet”Egne mobile løsningerVelger å ikke ha mobile løsningerLager AppsSatser friskTilpasser dagens nettløsning for mobil

Page 8: Tilpasning til mobil

8

MEN ER DETTE NYTT?DETTE HAR VI SETT FØR

Page 9: Tilpasning til mobil
Page 10: Tilpasning til mobil

HVA ER NYTT DENNE GANGEN?

Økt bruk av e-post og kalenderMobiltetthetBortskjemtBåndbreddeSosiale medier

Kort sagt bruket og brukerne har endret seg og er i stadig endring

Page 11: Tilpasning til mobil
Page 12: Tilpasning til mobil
Page 13: Tilpasning til mobil

ELLER DISSE…

Page 14: Tilpasning til mobil

TOGET GÅR…SKAL DU VÆRE MED?

ELLER…SKAL DU STÅ IGJEN PÅ PERONGEN?

Page 15: Tilpasning til mobil

DU SKAL VÆRE MED :-)

Page 16: Tilpasning til mobil

HVORDAN

Page 17: Tilpasning til mobil

START MED UTGANGSPUNKTET

Page 18: Tilpasning til mobil

JEG ANTAR DU HAR ET NETTSTED

Les statistikkHva blir besøkt av mobiler i dag?

Analyser brukeratferdHvordan navigerer brukerne rundt på nettstedet?

Se på personas og brukerintervjuHvordan bruker personasene mobiltelefon?

Lag brukerscenarierHva vil du tilby dine kunder?

Lag prototyperBest tilbakemelding er å prøve noe som eksisterer

Hør med eksperterDet er noen som er flinkere enn andre til mobilstrategi

Se på andreKonkurrenter (og andre bransjer) har kanskje gjort noe som du kan gjøre eller ikke vil gjøre.

Prioriter innhold og funksjonalitet

Page 19: Tilpasning til mobil

TEKNIKKER

Page 20: Tilpasning til mobil

TEKNIKKER

Egne maler for mobilEgen strukturMye samme innholdLett tilgjengelig og ett grensesnitt

AppsOfte én oppgaveLite innholdKun tilgjengelig for spesielle plattformer

Eks: iPhone App store, Android Market og lignende

Responsive Web DesignSamme innholdSamme strukturSamme maler

Page 21: Tilpasning til mobil

HVA SKAL VI TENKE PÅ?

SkjermstørrelserTelefontyperiPad og Galaxy tabStørrelse på sidenIntegrasjoner som for eksempel Flash og Java AppletsFungerer BankID på mobilVideoInnhold

Page 22: Tilpasning til mobil

OK, vi har tenkt på alt dette

HVORDAN FUNGERERDET FOR BRUKERNE?

Page 23: Tilpasning til mobil

EGNE MALER

23

Page 24: Tilpasning til mobil

EGNE MALER

24

Page 25: Tilpasning til mobil

EGNE MALER

25

Page 26: Tilpasning til mobil

APPS

26

Page 27: Tilpasning til mobil

LITT OM APPS

Ofte ett brukerbehovFinn boligSøk opp telefonnrOverfør pengerSjekk avgang på trikken

Noen slår sammen flere bruksområderNettbank, kvitteringer, oppgjør, valutakalkulator, kontakt og lignende

Skiller mellom Native App og Web AppApp for eks. iPhone og AndroidNorsk Tipping sin webside fungerer som web app

27

Page 28: Tilpasning til mobil

RESPONSIVE WEB DESIGN

28

Page 29: Tilpasning til mobil

KORT SAGT

Webdesignet responderer på størrelsen til skjermen som brukesInnholdet er det samme, men utseende endrer segMan bruker hovedsakelig CSS, men også JavaScript blir brukt for å justere designet

Page 30: Tilpasning til mobil

TEKNISK SAGT

Flexible GridsFlexible Images & MediaMedia Queries

Page 31: Tilpasning til mobil

TEKNISK SAGT

Flexible Grids#nav ul {

float: left; width: 25%;font-size: 1,5 em; /* 24px/16px = 1,5em */ }

#box { float: left; margin-left: 5%;}

Page 32: Tilpasning til mobil

TEKNISK SAGT

Flexible Images & Media#box img {

max-width: 100%;}

Page 33: Tilpasning til mobil

TEKNISK SAGT

Media queries@media screen and (max-width: 1160px) {

#nav { display: none; } }

@media screen and (max-width: 1540px) {

#box { background-color; red;}

}

Page 34: Tilpasning til mobil

34

Gullfisk demo ;-)

Page 35: Tilpasning til mobil

35

Page 36: Tilpasning til mobil

VIKTIG Å TENKE PÅ…

Page 37: Tilpasning til mobil

37

84% har internett tilkobling

76% bruker internett daglig

50% surfer utenfor hjem & kontor

Page 38: Tilpasning til mobil

Mobiltelefonen er blitt det kjæreste vi harden vet hvor vi er!den vet hvor vennene er!den vet om gode restauranter!den har svar på alle verdens spørsmål!den vet hvilken vin som er bestden kan ta bilder og sende til vennerden er online, underholdende ogkontrollerende

Page 39: Tilpasning til mobil

MEN VET DEN HVA VI EGENTLIG VIL HA?

Du står i butikken. Vil du da ha middagsoppskriften som du så på i går da du planla middagen

…eller vil du bare ha ingrediensene?

Du sitter på trikken.Vil du lese artikkelen om Berit du så på yr.no?

…eller vil du bare vite hva været blir i morgen akkurat hvor du er?

Page 40: Tilpasning til mobil

40

Page 41: Tilpasning til mobil

UTFORDRINGEN LIGGER IKKE I TEKNOLOGIEN

Utfordringen er å gi brukerne det de vil ha - når de vil ha detMan må finne ut i hvilken kontekst de befinner seg når de besøker nettstedet

Page 42: Tilpasning til mobil

UTFORDRINGEN LIGGER KANSKJE AT VANENE ENDRES?

77% bruker nettbank69% bruker mobilen når man shopper84% bruker nettet når man ser på TV..eller at 40% bruker mobilen på do?

Page 43: Tilpasning til mobil

TAKK FOR MEG!

Ørjan ClausenForretningsrådgiver

[email protected]

twitter.com/orjanc

+47 930 95 222