Everybody wants an app today, but do you really need an app? The need for mobile solutions is growing and there are many ways to accomplish this. There is no "silver bullet" that fits every situation. As usual you need to first look at what problem you need to solve, what are the needs and then pick a technology. Responsive design, mobile website, web app, HTML5, hybrid, mixed hybrid, custom runtime, native, mobile platform, there are a lot of technical terms floating around in mobile development. Lets go thru each one and look at the benefits as well as the drawbacks, when they fit and when not to use them. We look at a couple of real world examples, what technology they use and why. Finally we end the presentation with a new interactive model that can give you a helping hand when choosing technology for your next mobile project.

1. How to pick the right development model
for your next mobile project
Conny Svensson | Managing Architect and Strategist Mobility
c.svensson@cgi.com | @connysvensson
ScanDev 2013

2. 2

3. 2

4. 2

5. Web vs Native is irrelevant!

6. Every project is different!

7. Requirements and context
• Audience
• Time and budget
• Usage patterns
• Features
• Monetization
• Maintenance
4

8. Technology is only one part
5

9. Technology is only one part
Business User
Technology
5

10. We live in a multi-platform world!

11. 7

12. 7

13. 7

14. Change is constant
Android iOS Symbian RIM Bada Windows Others
8

15. Change is constant
80,0
60,0
40,0
20,0
2007 2008 2009 10Q110Q210Q310Q411Q111Q211Q311Q412Q112Q212Q312Q4
Android iOS Symbian RIM Bada Windows Others
8

16. 9

17. 9

18. We live in a multi-device world!

19. 11

20. 11

21. 11

22. 12

23. Hybrid
Mobile website
Responsive
Cross compiling
Web app Mixed hybrid
Custom runtime
Native
Mobile platform
12

24. What’s the difference?
Mobile Web Site Mobile Web App Hybrid App Custom runtime Native App
Mobile Browser Mobile Browser Wrapper App App
HTML4/5 HTML5 HTML5 JavaScript Java
CSS2/3 CSS3 CSS3 ActionScript Objective-C
JavaScript JavaScript JavaScript Java C#
App Framework App Framework C# C/C++
Bridge API Framework API Platform SDK
Plugins Runtime
Device API Device API Device API
13

25. Lets go through them
one by one...

26. Responsive design
15

27. Responsive design
15

28. Responsive design
15

29. Responsive design
15

30. Responsive design
16

31. Responsive design
@media screen and (min-width: 560px){
! .ui-field-contain label.ui-slider {
! ! vertical-align: top;
! ! display: inline-block;
! ! width: 100%;
! ! margin: 0 2% 0 0;
! }
! .ui-field-contain div.ui-slider {
! ! display: block;
! ! width: 100%%;
! }
! .ui-field-contain.ui-hide-label div.ui-slider {
! ! display: block;
! ! width: auto;
! }
}
16

32. Responsive design
Frameworks
– 1140 CSS Grid
– 320 and Up
– Amazium
– Base
– Foundation
– Gumby
– Kube
– Skeleton
– Twitter Bootstrap
17

33. Mobile web site
18

34. Mobile web site
18

35. Mobile web site
Tools and services
– Mippin
– Mobify
– MobiSite Galore
– Mobstac
– Mofuse
– BMobilized
– Onbile
– Winksite
– Zinadoo
19

36. Mobile web app
20

37. Mobile web app
20

38. Mobile web app
Frameworks
– DHTMLX Touch
– Dojo Mobile
– Jo
– jQuery Mobile
– Kendo UI
– Sencha Touch
– Sproutcore
– The M-Project
– Wijmo
21

39. Hybrid
Wrapper
HTML5
CSS3
JavaScript
App Framework
Bridge API
Plugins
Device API
22

40. Hybrid
23

41. Hybrid
23

42. Hybrid
23

43. PhoneGap / Cordova
It’s your own custom branded web browser!
24

44. PhoneGap / Cordova
It’s your own custom branded web browser!
24

45. Custom Runtime
App
JavaScript
ActionScript
Java
C/C++/C#
Framework API
Runtime
Device API
25

46. Custom Runtime
Frameworks
– Flash / Air (ActionScript)
– MoSync (C/C++)
– Titanium (JavaScript)
– Xamarin (C#)
Cross compiling
– Codename One (Java)
– Java2ObjC (Java)
26

47. Native
App
Java
Objective-C
C#
C/C++
Platform SDK
Device API
27

48. Native
28

49. How do I choose?

50. Full capability
Single platform Multiple platforms
Partial capability
30

51. Native Full capability
Java/Obj-C/C#
Advanced UI
Fastest performance
Full access to platform
App store distribution
Single platform Multiple platforms
Web
HTML/CSS/JavaScript
No special tools or hardware
Desktop reusability
Limited access to device
Unrestricted distribution
Partial capability
30

52. Custom Runtime
Java/C#/JavaScript
Native Full capability Native UI / Custom UI
Java/Obj-C/C# Partial access to device
Advanced UI App store distribution
Fastest performance
Full access to platform
App store distribution Hybrid
HTML5/CSS3/JavaScript
Emulated native UI
Partial access to device
App store distribution
Single platform Multiple platforms
Web
HTML/CSS/JavaScript
No special tools or hardware
Desktop reusability
Limited access to device
Unrestricted distribution
Partial capability
30

53. Resources
User experience and features
31

54. Resources
Mobile platform
Native
Custom runtime
Hybrid
Web app
Mobile website
Responsive
User experience and features
31

55. There are no silver bullets!

56. AppDevMoPr (App Development Model Picker)
A tool helping you to choose the right
development model based on your needs
33

57. AppDevMoPr (App Development Model Picker)
A tool helping you to choose the right
development model based on your needs
B
ET
http://admp.cgilabs.se
A
33

58. Thank you!
Conny Svensson
c.svensson@cgi.com
@connysvensson