65
DET NYA MOBILA LANDSKAPET APP, WEBB ELLER MITT I MELLAN?

Det nya mobila landskapet

Embed Size (px)

DESCRIPTION

Att utvecklingen av det mobila internet rusar fram är nog ingen nyhet. Det ökande användandet av smartphones och tablets (plattor) förändrar vårt beteende och förhållande till webbtjänster. Detta ställer naturligtvis nya krav, men öppnar även för helt nya möjligheter. Så hur skall vi förhålla oss till denna utveckling, och vilka vägar finns i det mobila landskapet av appar och mobila webbar? Vad är viktigt att tänka på inför ett mobilprojekt? Vilka tekniker och vägval bör man som beställare och organisation känna till? Vi delar med oss av våra erfarenheter, och försöker besvara frågor som: - Vad är egentligen skillnaden mellan en mobilapplikation (app) och en mobilanpassad webblösning? - Måste vi stödja alla mobilwebbläsare (browsers) eller mobila operativsystem? - Behöver vi ett CMS, specifikt för mobil?

Citation preview

Page 1: Det nya mobila landskapet

DET NYA MOBILA LANDSKAPET APP, WEBB ELLER MITT I MELLAN?

Page 2: Det nya mobila landskapet

DET NYA MOBILA LANDSKAPET - APP, WEBB ELLER MITT I MELLAN?

HENRIK EMIL MATHIAS

Page 3: Det nya mobila landskapet
Page 4: Det nya mobila landskapet
Page 5: Det nya mobila landskapet
Page 6: Det nya mobila landskapet
Page 7: Det nya mobila landskapet
Page 8: Det nya mobila landskapet
Page 9: Det nya mobila landskapet
Page 10: Det nya mobila landskapet
Page 11: Det nya mobila landskapet

MOBIL STRATEGI

Page 12: Det nya mobila landskapet
Page 13: Det nya mobila landskapet

VARE SIG VI VILL ELLER INTE..

Page 14: Det nya mobila landskapet

KUNDVÄRDE UPPLEVELSE

ORGANISATIONSVÄRDE

Page 15: Det nya mobila landskapet

“Fundamentally, ‘mobile’ refers to the user, and not the device or the application.” Barbara Ballard - Designing the Mobile User Experience

Page 16: Det nya mobila landskapet

ANVÄNDBARHET, ENLIGT ISO-9241-11

“Den grad i vilken användare i ett givet sammanhang kan bruka en produkt för att uppnå specifika mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt.”

Page 17: Det nya mobila landskapet

ANVÄNDBARHET

1. Användare 2. Givet sammanhang 3. Specifika mål 4. Lösningen ska vara... –  Ändamålsenlig –  Effektiv –  Tillfredsställande

Page 18: Det nya mobila landskapet
Page 19: Det nya mobila landskapet

Inspiration? Möjligheter •  Geolocation •  Accelerometer •  Gyro •  Kompass •  Telefon •  Kamera •  Mikrofon …

Utmaningar •  Smal skärm •  Långsam uppkoppling •  Dålig kontrast •  Ofta mer specifika mål …

Page 20: Det nya mobila landskapet

NATIVE APP ELLER MOBILANPASSAD WEBBPLATS?

Page 21: Det nya mobila landskapet

Vad är vad? "   Native App – Program som är specialskrivet för

operativsystemet – Installeras på telefonen

"   Mobilanpassad webbplats – Kommer man åt genom att gå till en viss URL i en

webbläsare

Page 22: Det nya mobila landskapet

Native app Mobilanpassad

webbplats

Page 23: Det nya mobila landskapet

Mobilanpassad

Page 24: Det nya mobila landskapet

Native app

Page 25: Det nya mobila landskapet

HTML5-app

Page 26: Det nya mobila landskapet

Native app & HTML5-app

Page 27: Det nya mobila landskapet

NATIVE // MOBILANPASSAD WEBBPLATS // WEBBAPP // HTML5-APP // HYBRID

Page 28: Det nya mobila landskapet

NATIVE APP

Page 29: Det nya mobila landskapet
Page 30: Det nya mobila landskapet
Page 31: Det nya mobila landskapet
Page 32: Det nya mobila landskapet
Page 33: Det nya mobila landskapet

Hur väljer vi plattform?

"   Vad säger vår egen statistik?

"   Vad använder målgruppen?

"   Vad skiljer olika platformar åt?

Page 34: Det nya mobila landskapet

iOS Android

Regler/Styrning Många Få

Betalning One-click Kreditkort

Avgift 30% + $99/år 30% + $25

Antal appar ~400,000 ~250,000

Nerladdningar ~10 miljarder ~2.5 miljarder

Programmeringsspråk Objective C Java

Tablet-stöd Ja Nja + Separat

Flash Nej Ja

Systemvariationer Få Många

Page 35: Det nya mobila landskapet

MOBILANPASSAD WEBBPLATS

Page 36: Det nya mobila landskapet

CMS

Page 37: Det nya mobila landskapet
Page 38: Det nya mobila landskapet

Responsive design

Page 39: Det nya mobila landskapet
Page 40: Det nya mobila landskapet

Responsive design

Page 41: Det nya mobila landskapet

RESPONSIVE DESIGN ÄR LÖSNINGEN!

men ...

Page 42: Det nya mobila landskapet

• Mobilanpassning genom att lägga till kod - Vi vill ladda mindre kod i mobilen!

•  Mindre kod (HTML, JavaScript CSS) •  Färre och mindre bilder

... anpassar bara utseendet.

Page 43: Det nya mobila landskapet

Device detection & Responsive design

Page 44: Det nya mobila landskapet

http://www.alistapart.com/articles/apps-vs-the-web/

http://m.alistapart.com/articles/apps-vs-the-web/

Page 45: Det nya mobila landskapet

http://www.expressen.se/sport/fotboll/1.2331093

http://m.expressen.se/sport/fotboll/1.2331093

Page 46: Det nya mobila landskapet

Device detection & olika CMS

Page 47: Det nya mobila landskapet

CMS med device detection & Responsive design + ett API

Page 48: Det nya mobila landskapet

CMS med device detection & Responsive design + ett API

Page 49: Det nya mobila landskapet

HTML5-APP & HYBRID WEBBLÄSARE

Page 50: Det nya mobila landskapet

Funderingar

"   Vilka webbläsare ska vi stödja?

"  Hur många olika webbläsare ska vi testa i?

"   Vilka tekniker är OK att använda?

Page 51: Det nya mobila landskapet
Page 52: Det nya mobila landskapet

www.vardguiden.se

"  Internet Explorer 7 & 8 "  Firefox "  Chrome "  Safari

~98 %

Page 53: Det nya mobila landskapet

m.vardguiden.se

"   Safari iPhone/iPad/iPod "   Android (WebKit) "   PSP (NetFront) "   Symbian WebKit "  Opera Mini

~97,5 %

~93 %

Page 54: Det nya mobila landskapet

Browserstöd är inte en statisk variabel!

Page 55: Det nya mobila landskapet

HTML5-APP & HYBRID HTML5-APP & HYBRID

Page 56: Det nya mobila landskapet

Varför bygga HTML5-app?

"  Du vill ha en app men har inga funktioner som kräver rå prestanda eller koppling till speciella funktioner (kamera, mikrofon, adressbok o.s.v.)

Page 57: Det nya mobila landskapet

Varför bygga HTML5-app? "   Plattformsoberoende – Allt som krävs är en modern webbläsare

"   Samma programmeringsspråk för alla plattformar – HTML, CSS & JavaScript

"   Framåtkompatibelt – Kommer att fungera i nästa version av Safari/Android osv.

"   Du bestämmer själv innehållet

Page 58: Det nya mobila landskapet
Page 59: Det nya mobila landskapet
Page 60: Det nya mobila landskapet
Page 61: Det nya mobila landskapet

Det bästa av två världar. "   PhoneGap – Bygg en HTML5-app – Bädda in den i PhoneGap – Kompilera till native app

(iOS, Android, Symbian, Windows m.fl.)

Se även: Titanium, NimbleKit m.fl.

Page 62: Det nya mobila landskapet

TILL SLUT..

Page 63: Det nya mobila landskapet

VÅGA! // LÄR // UTVECKLA

"  Affärsmål "  Målgrupp // Behov "  Engagemang // Upplevelse "  Användbarhet "  Native App // Webb "  Behövs ett Mobilt CMS?

Page 64: Det nya mobila landskapet

Nästa tillfälle: 23 Mars Bonnier News+

Page 65: Det nya mobila landskapet

www.valtechlabs.se