Apps, hybrider eller responsivt design

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 : 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