Apps, hybrider eller responsivt design

  • View
    191

  • Download
    0

Embed Size (px)

DESCRIPTION

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.

Text of Apps, hybrider eller responsivt design

  • 1. Apps, hybrider eller responsivt design Seminar: Mobil e-handel September 2013

2. Bolia.com / juni 2013 74.000 besg fra iPads, heraf er de ca. 3.000 besg interne 52.000 besg fra smartphones Samlet antal besgende er undret i perioden ~ 41,5 % 3. Hvad er udfordringen ? Et omfattende mobil landskab Er der nogle genveje, nr man skal ud p alle platforme ? Hvornr skal man vlge det ene fremfor det andet ? Og er det enten eller ? 4. Hvad er udfordringen ? Et omfattende mobil landskab Er der nogle genveje, nr man skal ud p alle platforme ? Hvornr skal man vlge det ene fremfor det andet ? Og er det enten eller ? Hvordan kan man udvikle mobile lsninger - og ramme den strst mulige andel af brugerne - for mindst mulig omkostning, - med lsninger der virker ? 5. WEB (Browser) Den mobile verden Mobile Web Native Apps 6. WEB (Browser) Den mobile verden Mobile Web Native Apps Mobile Web iOS Android Windows Phone 7. Mobile Web eksempel 8. Hvad er Mobile Web ? Et website med en mobil/tablet tilpasset brugergrnseflade Mobilenheden dedekteres og tilpasset prsentation 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) Srskilt mobil- site 10. Responsive Design ex. 11. Design 12. Responsive Design ? En prsentation og kode til alle platforme (inkl. desktop & tablets) Tilpasser sig alle skrmstrrelser Fremtidige skrmstrrelser er med En fordel ved mere enkle sites / information / Lav interaktion Flere hensyn/begrnsninger i designproces, da prsentation skal fungere flere steder Problematisk at udvikle srskilte webmobilfunktioner/desktop Pas p med at g p kompromis med kbsoplevelsen pga. teknik (HTML udviklingen er 30-50% dyrere) 13. Responsive Design ? En prsentation og kode til alle platforme (inkl. desktop & tablets) Tilpasser sig alle skrmstrrelser Fremtidige skrmstrrelser er med En fordel ved mere enkle sites / information / Lav interaktion Flere hensyn/begrnsninger i designproces, da prsentation skal fungere flere steder Problematisk at udvikle srskilte webmobilfunktioner/desktop Pas p med at g p kompromis med kbsoplevelsen pga. teknik (HTML udviklingen er 30-50% dyrere) Responsive design er godt til weblsninger med begrnset interaktion Ikke godt til mere kompleks interaktion 14. Srskilt mobilsite eksempler 15. Srskilt mobilsite ? Frie tjler/ingen hensyn/individuelle tilpasninger Fordel ved komplekse interaktioner i lsningen (ex. e-handel) - ingen kompromis med kbsoplevelsen Har du et nyere website i forvejen er det mske lsningen Enkle funktioner fra website, som skal gres mobile Adskilte prsentationslag, dvs. 2 prsentationer skal udvikles og vedligeholdes til desktop/tablets og mobil 16. Anbefaling ifht. Mobile Web / Desktop Responsive design fra Desktop til Tablets m. tilpasset touchscreen interaktion Responsive design p Smartphones ved enkel interaktion Srskilt mobil design p Smartphones/sikre kbsoplevelsen/komplekse interaktioner Srskilt Mobil design 17. Mobil Web er 100% ndvendigt Du kan ikke n din kunde igennem en App de ikke har ! Mobil Web skal sikre brugeroplevelsen og at lsningen virker Nr bruger tilgr dit site fra en mobil enhed Nr de bner et nyhedsbrev fra deres mobil og linker videre Nr der skal vre sammenhng i oplevelsen p tvrs af enheder 18. Mobile Web Apps ex. App.ft.com m.superbest.dk? 19. Hvornr Mobile Web Apps ? Ingen design sammenhng 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 Prsentation 20. Mobile Web Apps (HTML 5 Apps) ? En platform til vedligeholdelse Dermed (som regel) billigere at udvikle Markedsfres med srskilt 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 hjde 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 21. Mobile Web Apps (HTML 5 Apps) ? En platform til vedligeholdelse Dermed (som regel) billigere at udvikle Markedsfres med srskilt 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 hjde 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 prver at gre dem til noget som de ikke er Men afstanden til Native Apps bliver mindre 22. WEB (Browser) Den mobile verden Mobile Web Native Apps Mobile Web iOS Android Windows Phone Respon sivt design Web Apps (HTML5 apps) Srskilt mobil- site 23. Native Apps Native Apps udvikles srskilt til hver mobile enhed iOS Native App Android Native App Windows Phone Native App Objective C Java C# 24. Native Apps ex. 25. Hvornr native apps ? Hjfrekvens brug Nr der er tale om et vrktj, der lser en opgave Nr Hardwaredelene i telefonen anvendes i lsningen, Kamera, GPS, Accelerometer, Gyro etc. (!) Nr tung grafik og regnekraft er pkrvet Nr detaljen i oplevelsen af appen er afgrende Nr der er tale om spil, musik, kort, social Nr Offline er vigtigt Nr 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 26. Hvornr native apps ? Hjfrekvens brug Nr der er tale om et vrktj, der lser en opgave Nr Hardwaredelene i telefonen anvendes i lsningen, Kamera, GPS, Accelerometer, Gyro etc. (!) Nr tung grafik og regnekraft er pkrvet Nr detaljen i oplevelsen af appen er afgrende Nr der er tale om spil, musik, kort, social Nr Offline er vigtigt Nr 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 hjfrekvens brug og nr der skal lses opgaver - Et vrktj 27. 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 28. Hybrid: Native Wrapper - Phonegap En Web App er pakket ind i enheds specifik kode for at kre som en Native App Web appen er hostet i et menulst browservindue HTML5/CSS/JavaScript Android Web View Bridge Native API iOS Web View Bridge Native API Windows Phone Web View Bridge Native API 29. Phonegap ex. m.bt.dk m.superbest.dk 30. Hvornr Phonegap apps ? Nr der skal spares p udviklingen og vedligeholdelsen Manglende kompetencer Begrnset kompleksitet, ala m.bt.dk Men App Storen er vigtig for udbredelsen Brugeroplevelsen - dommen er hrd fra brugerne Performance Vedligehold Kompetencekrav Performance Brugervenlighed Offline mulighed App store Pris 31. Hybrid: Cross Compiled - Xamarin Forretningslogikken/backend kode kombineret med platform specifik prsentation (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 32. Xamarin ex. Rdio E-reolen Heroes & Generals 33. Hvornr Xamarin apps ? 100% lig Native apps samme brugsoplevelse Nr forretningskoden udgr vsentlig del af lsningen Mske billigere og nemmere Det hele afhnger af, hvad din app skal kunne Performance er ringere end native (hacks, workarounds etc.) Generelt tungere Apps (MB) Vedligehold Lidt rd Kompetencekrav Lidt rd Performance Brugervenlighed Offline mulighed App store Pris Lidt rd Vedligehold Lidt rd Kompetencekrav Lidt rd Performance Brugervenlighed Offline mulighed App store Pris Lidt rd 34. Native App Api Native Custom Forretningslogik Data C# Design ?Zxing UI prsentation Native Native Custom Design UI prsentation 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 prsentation CSS / HTML Genbrug af Forretningslogik Data Javascript UI prsentation CSS / HTML (Eller Native) Genbrug til App nr. 2 35. Phonegap Native API (standard) 36. Eksempler p mulig besparelse (!) Forretningslogik Data C# Native App Api Native Custom Design UI prsentation Native Forretningslogik Data Javascript Native App Api Native Custom Design UI prsentation CSS / HTML (Eller Native) Genbrug til App nr. 2 Forretningslogik Data C# Native App Api Native Custom Design UI prsentation Native Forretningslogik Data / C# Design Native app UI prsentation Native 37. Bldende udvikler Udviklerne blder ved hybrid platformene 38. Opsummering Mobile Web Skal alle have / sammenhng fra desktop til mobil Responsive web Mere enkle lsninger med mindre interaktion Srskilt mobilsite Mere avancerede lsninger med megen interaktion Apps Webapps Undg Appstore & der skal spares penge Native Apps - Hjfrekvens brug & vrktjs orienteret Phonegap Simple & enkle Apps & der skal spares penge Xamarin Nr forretningslogikken fylder meget & UI fylder mindre 39. Tak for nu Jeppe Hansen Mobil : +45 53 63 81 79 Mail : jmh@vertica.dk : @jeppemhansen Web : www.vertica.dk Blog : blog.vertica.dk 40. Om Vertica Kort fortalt: Vi fr it og forretning til at g op i en hjere enhed med fokus p brugeroplevelsen Ydelser: E-handel, integration, mobil