�ݺ�ߣ

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
iOS
Android
Windows Phone

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
iOS
Android
Windows Phone
Respon
-sive
design
Web
Apps
(HTML5 apps)
Særskilt
mobil-
site

Apps, hybrider eller responsivt 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 ?
 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
iOS
Android
Windows Phone
Respon
sivt
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#

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
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 : jmh@vertica.dk
: @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

�ݺ�ߣ

Apps, hybrider eller responsivt design

Recommended

More Related Content

Similar to Apps, hybrider eller responsivt design (20)

Apps, hybrider eller responsivt design