det nya mobila landskapet
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?TRANSCRIPT
![Page 1: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/1.jpg)
DET NYA MOBILA LANDSKAPET APP, WEBB ELLER MITT I MELLAN?
![Page 2: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/2.jpg)
DET NYA MOBILA LANDSKAPET - APP, WEBB ELLER MITT I MELLAN?
HENRIK EMIL MATHIAS
![Page 3: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/3.jpg)
![Page 4: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/4.jpg)
![Page 5: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/5.jpg)
![Page 6: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/6.jpg)
![Page 7: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/7.jpg)
![Page 8: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/8.jpg)
![Page 9: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/9.jpg)
![Page 10: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/10.jpg)
![Page 11: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/11.jpg)
MOBIL STRATEGI
![Page 12: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/12.jpg)
![Page 13: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/13.jpg)
VARE SIG VI VILL ELLER INTE..
![Page 14: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/14.jpg)
KUNDVÄRDE UPPLEVELSE
ORGANISATIONSVÄRDE
![Page 15: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/15.jpg)
“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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/17.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/18.jpg)
![Page 19: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/19.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/20.jpg)
NATIVE APP ELLER MOBILANPASSAD WEBBPLATS?
![Page 21: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/22.jpg)
Native app Mobilanpassad
webbplats
![Page 23: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/23.jpg)
Mobilanpassad
![Page 24: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/24.jpg)
Native app
![Page 25: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/25.jpg)
HTML5-app
![Page 26: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/26.jpg)
Native app & HTML5-app
![Page 27: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/27.jpg)
NATIVE // MOBILANPASSAD WEBBPLATS // WEBBAPP // HTML5-APP // HYBRID
![Page 28: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/28.jpg)
NATIVE APP
![Page 29: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/29.jpg)
![Page 30: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/30.jpg)
![Page 31: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/31.jpg)
![Page 32: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/32.jpg)
![Page 33: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/33.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/34.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/35.jpg)
MOBILANPASSAD WEBBPLATS
![Page 36: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/36.jpg)
CMS
![Page 37: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/37.jpg)
![Page 38: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/38.jpg)
Responsive design
![Page 39: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/39.jpg)
![Page 40: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/40.jpg)
Responsive design
![Page 41: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/41.jpg)
RESPONSIVE DESIGN ÄR LÖSNINGEN!
men ...
![Page 42: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/42.jpg)
• 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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/43.jpg)
Device detection & Responsive design
![Page 44: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/44.jpg)
http://www.alistapart.com/articles/apps-vs-the-web/
http://m.alistapart.com/articles/apps-vs-the-web/
![Page 45: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/45.jpg)
http://www.expressen.se/sport/fotboll/1.2331093
http://m.expressen.se/sport/fotboll/1.2331093
![Page 46: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/46.jpg)
Device detection & olika CMS
![Page 47: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/47.jpg)
CMS med device detection & Responsive design + ett API
![Page 48: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/48.jpg)
CMS med device detection & Responsive design + ett API
![Page 49: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/49.jpg)
HTML5-APP & HYBRID WEBBLÄSARE
![Page 50: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/50.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/51.jpg)
![Page 52: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/52.jpg)
www.vardguiden.se
" Internet Explorer 7 & 8 " Firefox " Chrome " Safari
~98 %
![Page 53: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/53.jpg)
m.vardguiden.se
" Safari iPhone/iPad/iPod " Android (WebKit) " PSP (NetFront) " Symbian WebKit " Opera Mini
~97,5 %
~93 %
![Page 54: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/54.jpg)
Browserstöd är inte en statisk variabel!
![Page 55: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/55.jpg)
HTML5-APP & HYBRID HTML5-APP & HYBRID
![Page 56: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/56.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/57.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/58.jpg)
![Page 59: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/59.jpg)
![Page 60: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/60.jpg)
![Page 61: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/61.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/62.jpg)
TILL SLUT..
![Page 63: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/63.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/64.jpg)
Nästa tillfälle: 23 Mars Bonnier News+
![Page 65: Det nya mobila landskapet](https://reader034.vdocuments.site/reader034/viewer/2022042713/548dabbeb479597e6a8b4a60/html5/thumbnails/65.jpg)
www.valtechlabs.se