Gennemgang af den mobile verden, når det kommer til valg af platform / fordele og ulemper ved Mobile web, særskilte mobilsites, Web apps, Hybrid apps og Native apps. VIdeo af præsentation findes på Vertica.dk + Blog indlæg inden længe.
2. Bolia.com / juni 2013
74.000 besøg fra iPads, heraf er de ca. 3.000 besøg interne
52.000 besøg fra smartphones
Samlet antal besøgende er uændret i perioden
~ 41,5 %
3. Hvad er udfordringen ?
Et omfattende mobil landskab…
Er der nogle genveje, når man skal ud på
alle platforme ?
Hvornår skal man vælge det ene fremfor det
andet ?
Og er det enten eller ?
4. Hvad er udfordringen ?
Et omfattende mobil landskab…
Er der nogle genveje, når man skal ud på
alle platforme ?
Hvornår skal man vælge det ene fremfor det
andet ?
Og er det enten eller ?
Hvordan kan man
udvikle mobile løsninger
-
og ramme den størst
mulige andel af brugerne
-
for mindst mulig omkostning,
-
med løsninger der virker ?
8. Hvad er Mobile Web ?
Et website med en mobil/tablet
tilpasset brugergrænseflade
Mobilenheden dedekteres og
tilpasset præsentation vises
Optimeret brugeroplevelsen med
touchscreen interaktion
Samme kodebase til alle platforme
9. WEB
(Browser)
Den mobile verden
Mobile Web Native Apps
Mobile
Web
iOS
Android
Windows Phone
Respon
-sive
design
Web
Apps
(HTML5 apps)
Særskilt
mobil-
site
14. Responsive Design ?
En præsentation og kode til alle platforme (inkl. desktop & tablets)
Tilpasser sig alle skærmstørrelser
Fremtidige skærmstørrelser er med
En fordel ved mere enkle sites / information / Lav interaktion
÷ Flere hensyn/begrænsninger i designproces, da præsentation skal
fungere flere steder
÷ Problematisk at udvikle særskilte webmobilfunktioner/desktop
÷ Pas på med at gå på kompromis med købsoplevelsen pga. teknik
÷ (HTML udviklingen er 30-50% dyrere)
15. Responsive Design ?
En præsentation og kode til alle platforme (inkl. desktop & tablets)
Tilpasser sig alle skærmstørrelser
Fremtidige skærmstørrelser er med
En fordel ved mere enkle sites / information / Lav interaktion
÷ Flere hensyn/begrænsninger i designproces, da præsentation skal
fungere flere steder
÷ Problematisk at udvikle særskilte webmobilfunktioner/desktop
÷ Pas på med at gå på kompromis med købsoplevelsen pga. teknik
÷ (HTML udviklingen er 30-50% dyrere)
Responsive design
er godt til
webløsninger
med begrænset interaktion
Ikke godt til
mere kompleks interaktion
17. Særskilt mobilsite ?
Frie tøjler/ingen hensyn/individuelle tilpasninger
Fordel ved komplekse interaktioner i løsningen (ex. e-handel) -
ingen kompromis med købsoplevelsen
Har du et nyere website i forvejen – er det måske løsningen
Enkle funktioner fra website, som skal gøres mobile
÷ Adskilte præsentationslag, dvs. 2 præsentationer skal udvikles og
vedligeholdes til desktop/tablets og mobil
18. Anbefaling ifht. Mobile Web / Desktop
Responsive design fra Desktop til Tablets m.
tilpasset touchscreen interaktion
Responsive design på Smartphones ved enkel interaktion
Særskilt mobil design på Smartphones/sikre købsoplevelsen/komplekse interaktioner
Særskilt Mobil
design
19. Mobil Web er 100% nødvendigt
Du kan ikke nå din kunde
igennem en App de ikke har !
Mobil Web skal sikre brugeroplevelsen og at
løsningen virker
Når bruger tilgår dit site fra
en mobil enhed
Når de åbner et nyhedsbrev
fra deres mobil og linker videre
Når der skal være sammenhæng i
oplevelsen på tværs af enheder
21. Hvornår Mobile Web Apps ?
Ingen design sammenhæng til Desktop
Spare penge på udvikling & vedligehold
Simulere App oplevelsen men undgå Appstore (økonomi / tid / regler)
iOS
Web Browser
Android
Web Browser
Windows Phone
Web Browser
Business/Data Code
HTML5/CSS/JavaScript
Forretning/Data
Præsentation
22. Mobile Web Apps (HTML 5 Apps) ?
En platform til vedligeholdelse
Dermed (som regel) billigere at udvikle
Markedsføres med særskilt adresse og
simulere App ikon
HTML 5 forbedrer den alm. Browser
oplevelse og tilbyder delvis offline
mulighed
÷ Ingen profilering i App Store
÷ Brugeroplevelsen er ikke på højde med
Native Apps / performance er ringere
÷ Visse ting er ikke muligt (endnu)
÷ HTML 5 supporteres forskelligt i
browserne
Vedligehold
Kompetencekrav
Performance
Brugervenlighed
Offline mulighed
App store
Pris
23. Mobile Web Apps (HTML 5 Apps) ?
En platform til vedligeholdelse
Dermed (som regel) billigere at udvikle
Markedsføres med særskilt adresse og
simulere App ikon
HTML 5 forbedrer den alm. Browser
oplevelse og tilbyder delvis offline
mulighed
÷ Ingen profilering i App Store
÷ Brugeroplevelsen er ikke på højde med
Native Apps / performance er ringere
÷ Visse ting er ikke muligt (endnu)
÷ HTML 5 supporteres forskelligt i
browserne
Vedligehold
Kompetencekrav
Performance
Brugervenlighed
Offline mulighed
App store
Pris
Web apps lider under
at man prøver
at gøre dem til noget
som de ikke er
Men afstanden til Native
Apps bliver mindre
24. WEB
(Browser)
Den mobile verden
Mobile Web Native Apps
Mobile
Web
iOS
Android
Windows Phone
Respon
sivt
design
Web
Apps
(HTML5 apps)
Særskilt
mobil-
site
25. Native Apps
Native Apps udvikles særskilt til hver mobile enhed
iOS
Native App
Android
Native App
Windows Phone
Native App
Objective C Java C#
27. Hvornår native apps ?
Højfrekvens brug
Når der er tale om et værktøj, der løser en opgave
Når Hardwaredelene i telefonen anvendes i
løsningen, Kamera, GPS, Accelerometer, Gyro etc. (!)
Når tung grafik og regnekraft er påkrævet
Når detaljen i oplevelsen af app’en er afgørende
Når der er tale om spil, musik, kort, social
Når Offline er vigtigt
Når App Storen er vigtig for udbredelsen
÷ Dyrt at udvikle – Unik kode til alle platforme
÷ Vedligehold x 3
÷ Kompetencekrav x ca. 3
÷ Godkendelsesprocesser i App stores
Vedligehold
Kompetencekrav
Performance
Brugervenlighed
Offline mulighed
App store
Pris
28. Hvornår native apps ?
Højfrekvens brug
Når der er tale om et værktøj, der løser en opgave
Når Hardwaredelene i telefonen anvendes i
løsningen, Kamera, GPS, Accelerometer, Gyro etc. (!)
Når tung grafik og regnekraft er påkrævet
Når detaljen i oplevelsen af app’en er afgørende
Når der er tale om spil, musik, kort, social
Når Offline er vigtigt
Når App Storen er vigtig for udbredelsen
÷ Dyrt at udvikle – Unik kode til alle platforme
÷ Vedligehold x 3
÷ Kompetencekrav x ca. 3
÷ Godkendelsesprocesser i App stores
Vedligehold
Kompetencekrav
Performance
Brugervenlighed
Offline mulighed
App store
Pris
Native Apps er
optimalt til højfrekvens
brug og når der skal
løses opgaver
- Et værktøj
29. WEB
(Browser)
Den mobile verden
Mobile Web Native Apps
Mobile
Web
iOS
Android
Windows Phone
Xamarin
Phonegap
Hybrid Apps
Native
Web app
Wrapper
Cross
Com-
piled
30. Hybrid: Native Wrapper - Phonegap
En Web App er pakket ind i enheds specifik kode for at køre som en Native App
Web app’en er hostet i et menuløst browservindue
HTML5/CSS/JavaScript
Android
Web View
Bridge
Native API
iOS
Web View
Bridge
Native API
Windows Phone
Web View
Bridge
Native API
32. Hvornår Phonegap apps ?
Når der skal spares på udviklingen og
vedligeholdelsen
Manglende kompetencer
Begrænset kompleksitet, ala m.bt.dk
Men App Storen er vigtig for udbredelsen
÷ Brugeroplevelsen - dommen er hård fra brugerne
÷ Performance
Vedligehold
Kompetencekrav
Performance
Brugervenlighed
Offline mulighed
App store
Pris
33. Hybrid: Cross Compiled - Xamarin
Forretningslogikken/backend kode kombineret med platform specifik præsentation
(UI kode) ind i Native Apps
iOS
Native App
Android
Native App
Windows Phone
Native App
C# Business/Data Code
C# iOS UI C# Android UI C# Win Phone UI
35. Hvornår Xamarin apps ?
100% lig Native apps – samme brugsoplevelse
Når forretningskoden udgør væsentlig del af
løsningen
÷ Måske billigere og nemmere
÷ Det hele afhænger af, hvad din app skal kunne
÷ Performance er ringere end native (hacks,
workarounds etc.)
÷ Generelt tungere Apps (MB)
Vedligehold Lidt
rød
Kompetencekrav Lidt
rød
Performance
Brugervenlighed
Offline mulighed
App store
Pris Lidt
rød
Vedligehold Lidt
rød
Kompetencekrav Lidt
rød
Performance
Brugervenlighed
Offline mulighed
App store
Pris Lidt
rød
36. Native App Api
Native Custom
Forretningslogik
Data
C#
Design
?Zxing
UI præsentation
Native
Native Custom
Design
UI præsentation
Native
Native App Api
Genbrug af
Forretningslogik
Data
C#
Forretningslogik
Data
Javascript
Native App Api
Native Custom
Design
Native Custom
Native
App Api
Design
UI præsentation
CSS / HTML
Genbrug af
Forretningslogik
Data
Javascript
UI præsentation
CSS / HTML (Eller Native)
Genbrug til App nr. 2
40. Opsummering
Mobile Web – Skal alle have / sammenhæng fra desktop til mobil
Responsive web – Mere enkle løsninger med mindre interaktion
Særskilt mobilsite – Mere avancerede løsninger med megen interaktion
Apps
Webapps – Undgå Appstore & der skal spares penge
Native Apps - Højfrekvens brug & værktøjs orienteret
Phonegap – Simple & enkle Apps & der skal spares penge
Xamarin – Når forretningslogikken fylder meget & UI fylder mindre
41. Tak for nu
Jeppe Hansen
Mobil : +45 53 63 81 79
Mail : jmh@vertica.dk
: @jeppemhansen
Web : www.vertica.dk
Blog : blog.vertica.dk
42. Om Vertica
Kort fortalt: Vi får it og forretning til at gå op i en højere
enhed med fokus på brugeroplevelsen
Ydelser: E-handel, integration, mobile
løsninger & procesoptimering
Kompetencer: Forretningsforståelse, brugerindsigt,
interaktionsdesign, system-
udvikling og projektledelse
Nøgletal: 50 ansatte / etableret i 2001
Børsen gazelle i 2008, 2009, 2010
Soliditetsgrad på 59 / overskud alle år