Apps, hybrider eller
responsivt design
Seminar: Mobil e-handel
September 2013
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 %
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 ?
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 ?
WEB (Browser)
Den mobile verden
Mobile Web Native Apps
WEB (Browser)
Den mobile verden
Mobile Web Native Apps
Mobile Web
iOS Android
Windows Phone
Mobile Web eksempel
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
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
Responsive Design ex.
Design
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 ?
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
Særskilt mobilsite eksempler
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
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
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
Mobile Web Apps ex.
App.ft.com m.superbest.dk ?
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
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
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
WEB (Browser)
Den mobile verden
Mobile Web Native Apps
Mobile Web
iOS Android
Windows Phone
Responsivt
design
Web Apps
(HTML5 apps)
Særskilt mobil-
site
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#
Native Apps ex.
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
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
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
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
Phonegap ex.
m.bt.dk m.superbest.dk
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
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
Xamarin ex.
Rdio E-reolen Heroes & Generals
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
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
Phonegap Native API (standard)
Eksempler på mulig besparelse (!)
Forretningslogik Data C#
Native App Api
Native Custom
Design
UI præsentation Native
Forretningslogik Data
Javascript
Native App Api
Native Custom
Design
UI præsentation CSS / HTML (Eller Native)
Genbrug til App nr. 2
Forretningslogik Data C#
Native App Api
Native Custom
Design
UI præsentation Native
Forretningslogik Data / C#
Design
Native app
UI præsentation Native
Blødende udvikler
Udviklerne bløder ved hybrid platformene
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
Tak for nu
Jeppe Hansen
Mobil : +45 53 63 81 79
Mail : [email protected]
: @jeppemhansen
Web : www.vertica.dk
Blog : blog.vertica.dk
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