Helps developers and clients on how to choose the right development model and technology for mobile projects. There are no silver bullets, every project is different! Also presenting a new interactive tool to help you pick a technology given some requirements and context of your project. This is pretty close to the presentation I held at ScanDev 2013, but added som nuances and slides.

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
dev:mobile 2013

3. Every project is different!Web vs Native is irrelevant!

4. • Target audience
• Time and budget
• Usage patterns
• Features
• Monetization
• Volume
• Maintenance
• Prioritization
Requirements and context

5. Technology is only one piece
5
Business User
Technology

6. We live in a multi-platform world!

8. 20.0
40.0
60.0
80.0
20072008200910Q110Q210Q310Q411Q111Q211Q311Q412Q112Q212Q312Q413Q1
Android iOS Symbian Blackberry Bada Windows

10. Audience and industry
IOS ANDROID WINDOWS MOBILE

11. We live in a multi-device world!

12. 12

13. 13
Responsive
vs
Adaptive
][ + Multiple

14. Different usage patterns
14
PC
Tablet
Smartphone
Overlap

15. Lets get technical!

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

17. Lets go through them
one by one...

19. Mobile Web
Mobile Browser
HTML4/5
CSS2/3
JavaScript
Mobile Web Site
Mobile Browser
HTML5
CSS3
JavaScript
App Framework
Mobile Web App
Wrapper
HTML5
CSS3
JavaScript
App Framework
Bridge API
Hybrid App
Device API
Plugins

20. Responsive design

21. Responsive design
<style type="text/css">
#content {
width:960px;
}
@media (min-width: 481px) and (max-width: 768px) {
#content { width:740px; }
}
@media (min-width: 321px) and (max-width: 480px) {
#content { width:450px; }
}
@media (max-width: 320px) {
#content { width:290px; }
}
</style>

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

23. Mobile web site / Adaptive design

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

25. Mobile web app

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

28. wser
5
3
pt
b Site
Mobile Browser
HTML5
CSS3
JavaScript
App Framework
Mobile Web App
Wrapper
HTML5
CSS3
JavaScript
App Framework
Bridge API
Hybrid App
Device API
Plugins
Ob
C
Plat
Na
De
App
JavaScript
ActionScript
Java
C#
Framework API
Custom runtime
Device API
Runtime
Hybrid

29. Hybrid

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

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

33. Custom Runtime
Runtimes / Bridges
– Flash / Air (ActionScript)
– MoSync (C/C++)
– Titanium (JavaScript)
– Xamarin (C#)
– Corona (Lua)
– RhoMobile (Ruby)
– Tabris (Java)
Cross compiling
– Codename One (Java)
– Java2ObjC (Java)
– XMLVM (Java)

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

36. Native

38. Rule of three
App 1 App 2 App 3 App n
System 1 System 2 System 3 System n

39. Mobile platforms
39
Gartner Magic Quadrant April 2012

40. How do I choose?

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

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

43. There are no silver bullets!

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

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