Your SlideShare is downloading. ×
0
10.03.2013 Hotel Sofitel Minneapolis, MN
Mobile Solution Strategies
Erik Mau
Senior Architect, Avtex
Agenda
• Mobile Landscape
• Mobile Solution Strategies
– Mobile Web
– Native Applications
– Hybrid Applications
• Summary
Session Goals
• Provide education around the options for mobile
solutions.
• Understand the differences between web, nativ...
BEFORE WE GET STARTED
What role do you play in your organization?
MOBILE LANDSCAPE
Email, Spotify,
News, Researc
h
Email,
Facebook,
Pinterest,
Houzz
Princess / Barbie
games, Selfies,
YouTube Craft
vids
You...
Mobile Usage is Changing
(Source: Qualcomm, 2013)
29% of Americans say their phone is the first and last
thing they look a...
The Web is Changing
(Source: Pew Research Center, 2013)
63% of mobile owners use their phones to go online.
By 2014, mobil...
Mobile App Usage is Changing
(Source: Nielsen, 2013)
Smartphone users spent 87% of their time using mobile apps.
Smartphon...
MOBILE SOLUTION STRATEGIES
Mobile Solution Strategies
• Budget and timeline
• Understand your users, user
expectations, and usage scenarios
• Define ...
Mobile Solution Strategies
• Mobile Web
• Native Applications
• Hybrid Applications
3 Primary Strategies
(Source: www.brig...
MOBILE SOLUTION STRATEGIES
Mobile Web
Mobile Web Defined
Mobile web solutions are built with server-side
technology that renders HTML that is optimized for
mobi...
Polling Question
Have you deployed a mobile version of a web
site?
• Yes
• No
• I don’t know
View Results
www.avtex.com/en...
Mobile Web Strategies
• Separate sites (the m. strategy)
• Responsive sites
Two flavors…
Mobile Web Strategies
• Separate site for mobile browsers (i.e. m.espn.go.com)
• Use device detection to redirect users
• ...
Mobile Web Strategies
Separate Sites
http://espn.go.com http://m.espn.go.com
Mobile Web Strategies
Separate Sites
http://www.flickr.com http://m.flickr.com
Mobile Web Strategies
• Web design that “responds” to the viewport of the
browser.
• Leverages CSS and JavaScript
Responsi...
Mobile Web Strategies
Responsive Design
Mobile Web Strategies
Responsive Design
Mobile Web Strategies
Responsive Design
Mobile Web Strategies
Responsive
• Single Site
• Flexible grid / fluid
layout, flexible images, and
media queries with CSS...
Mobile Web Strategies
• Leverage standard platforms and tools (Visual
Studio, Sitefinity, Sitecore, SharePoint, etc.)
• Kn...
Mobile Web Strategies
Pros
• Cross-platform
• Common web technologies
• Cost
• Centralized, immediate
updates
• Reach / Un...
MOBILE SOLUTION STRATEGIES
Native Applications
Native Apps
Native apps are built for a specific platform using an SDK,
a specific language, and an IDE provided by the pl...
Polling Question
Have you deployed a native application? If yes,
what platforms have you targeted?
• No
• I don’t know
• Y...
Native Apps
• “There’s an app for that…”
• Significant impact on mobile computing
• Organizations are extending services
–...
Native Apps
Enterprise App Stores
(Source: Gartner, 2013)
Within the next four years, up to 25 percent of enterprises
will...
Native Apps
• Access to contacts or address book
• Accelerometer (motion detection)
• Camera
• Data storage – local / offl...
Native Apps
Platform Language IDE SDK App Store
iOS Objective C Xcode (Mac) iOS SDK App Store
Windows Phone C#, VB.NET Vis...
Native Apps
…but I’m a Microsoft developer and I
don’t want to learn each platform?
• Xamarin
• Develop core / common comp...
Native Apps
Xamarin Architecture and Code Reuse
40%
60%
Approximate Code Reuse with Xamarin
OS Specific
Shared
Xamarin Hig...
Native Apps
Avtex Secure Messaging Prototype
Native Apps
Avtex Secure Messaging Prototype
Native Apps
Pros
• Rich, integrated experience
• Performance
• Access to device hardware
features
• Monetization / App Sto...
MOBILE SOLUTION STRATEGIES
Hybrid Applications
Hybrid Apps
Hybrid apps run on the device inside a native container
that uses the browser engine for rendering and executi...
Polling Question
Have you deployed a hybrid application?
• Yes
• No
• I don’t know
View Results
www.avtex.com/engage
Hybrid Apps
• App Store!
• Access to device capabilities
– Contacts / Address book
– Accelerometer
– Camera
– Data storage...
Hybrid Apps
• HTML, JavaScript, and CSS
“packaged” with application
• Open Source JavaScript layer
gives access to device ...
Hybrid Apps
Examples: Untappd
iPhone Android
Hybrid Apps
Examples: Healthtap
iPhone Android
Hybrid Apps
• Technologies
– HTML5
– CSS
– JavaScript
• CSS and JavaScript Frameworks
Tools and Technologies
Hybrid Apps
• Tools
– PhoneGap
– Nomad
– Icenium
– and more…
Tools and Technologies
DEMO
Telerik Icenium
Hybrid Apps
Performance was a big reason they transitioned from
hybrid to native.
Facebook
“Our biggest mistake was relyin...
Hybrid Apps
Pros
• Monetization / App Store
• Cross Platform
• Familiar Web Technologies
• Access to Device Capabilities
•...
SUMMARY
Polling Question
What strategy is right for you?
• Web
• Native
• Hybrid
• I’m still not sure
View Results
www.avtex.com/e...
Mobile Solution Strategies
A Continuum of Options
Web based approach to
mobile app dev. / deploy
Pro
• Time to market/rele...
Mobile Solution StrategiesTime/Cost
Features
Native
Hybrid
Web
Mobile Solution Strategies
• Budget and timeline
• Understand your users and user expectations
• Understand usage scenario...
Thank You!
Engage 2013 - Mobile solution strategies
Upcoming SlideShare
Loading in...5
×

Engage 2013 - Mobile solution strategies

740

Published on

A deep dive into mobile solutions showcasing the differences between native app, web and hybrid approaches.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
740
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Engage 2013 - Mobile solution strategies"

  1. 1. 10.03.2013 Hotel Sofitel Minneapolis, MN
  2. 2. Mobile Solution Strategies Erik Mau Senior Architect, Avtex
  3. 3. Agenda • Mobile Landscape • Mobile Solution Strategies – Mobile Web – Native Applications – Hybrid Applications • Summary
  4. 4. Session Goals • Provide education around the options for mobile solutions. • Understand the differences between web, native, and the hybrid model for mobile solutions. • Understand options for supporting cross-platform mobile solutions.
  5. 5. BEFORE WE GET STARTED What role do you play in your organization?
  6. 6. MOBILE LANDSCAPE
  7. 7. Email, Spotify, News, Researc h Email, Facebook, Pinterest, Houzz Princess / Barbie games, Selfies, YouTube Craft vids YouTube Rollercoaster vids ESPN, Yahoo Fantasy, Instagram
  8. 8. Mobile Usage is Changing (Source: Qualcomm, 2013) 29% of Americans say their phone is the first and last thing they look at every day. 34% of adults own a tablet device. (Source Pew Research, 2013) (Source: Qualcomm, 2013) The average age for a person’s first cell phone is now 13.
  9. 9. The Web is Changing (Source: Pew Research Center, 2013) 63% of mobile owners use their phones to go online. By 2014, mobile internet is predicted to take over desktop internet usage. (Source: Microsoft Tag, 2012) (Source: Pew Research Center, 2013) 34% of mobile owners go online mostly using their phones.
  10. 10. Mobile App Usage is Changing (Source: Nielsen, 2013) Smartphone users spent 87% of their time using mobile apps. Smartphone users spent 13% of their time using the mobile web. (Source: Nielsen, 2013)
  11. 11. MOBILE SOLUTION STRATEGIES
  12. 12. Mobile Solution Strategies • Budget and timeline • Understand your users, user expectations, and usage scenarios • Define your application goals and features Considerations for a mobile strategy
  13. 13. Mobile Solution Strategies • Mobile Web • Native Applications • Hybrid Applications 3 Primary Strategies (Source: www.brightcove.com)
  14. 14. MOBILE SOLUTION STRATEGIES Mobile Web
  15. 15. Mobile Web Defined Mobile web solutions are built with server-side technology that renders HTML that is optimized for mobile devices.
  16. 16. Polling Question Have you deployed a mobile version of a web site? • Yes • No • I don’t know View Results www.avtex.com/engage
  17. 17. Mobile Web Strategies • Separate sites (the m. strategy) • Responsive sites Two flavors…
  18. 18. Mobile Web Strategies • Separate site for mobile browsers (i.e. m.espn.go.com) • Use device detection to redirect users • Requires a CMS for content synchronization Separate Sites
  19. 19. Mobile Web Strategies Separate Sites http://espn.go.com http://m.espn.go.com
  20. 20. Mobile Web Strategies Separate Sites http://www.flickr.com http://m.flickr.com
  21. 21. Mobile Web Strategies • Web design that “responds” to the viewport of the browser. • Leverages CSS and JavaScript Responsive Design
  22. 22. Mobile Web Strategies Responsive Design
  23. 23. Mobile Web Strategies Responsive Design
  24. 24. Mobile Web Strategies Responsive Design
  25. 25. Mobile Web Strategies Responsive • Single Site • Flexible grid / fluid layout, flexible images, and media queries with CSS • Client responsible for “responding” to view port Separate Mobile Site • Multiple Sites • Complete control over HTML structure and images • Server responsible for redirecting to mobile version Responsive vs. Separate Mobile Site
  26. 26. Mobile Web Strategies • Leverage standard platforms and tools (Visual Studio, Sitefinity, Sitecore, SharePoint, etc.) • Know your JavaScript and CSS Frameworks Tools and Technologies
  27. 27. Mobile Web Strategies Pros • Cross-platform • Common web technologies • Cost • Centralized, immediate updates • Reach / Unrestricted distribution • SEO Cons • No App Store • Device must be online / connected • No native integration • Limited features Pros and Cons
  28. 28. MOBILE SOLUTION STRATEGIES Native Applications
  29. 29. Native Apps Native apps are built for a specific platform using an SDK, a specific language, and an IDE provided by the platform vendor. Native apps are designed to target a specific platform.
  30. 30. Polling Question Have you deployed a native application? If yes, what platforms have you targeted? • No • I don’t know • Yes – iOS • Yes – Android • Yes – Windows Phone • Yes – Other View Results www.avtex.com/engage
  31. 31. Native Apps • “There’s an app for that…” • Significant impact on mobile computing • Organizations are extending services – Self-service – Premium experience The App Store Impact
  32. 32. Native Apps Enterprise App Stores (Source: Gartner, 2013) Within the next four years, up to 25 percent of enterprises will have their own enterprise app stores for managing corporate-sanctioned apps… • B2E Apps • Corporate-approved – Custom – 3rd Party – Public • Secure / SSO • BYOD – MDM meet MAM
  33. 33. Native Apps • Access to contacts or address book • Accelerometer (motion detection) • Camera • Data storage – local / offline • Accessing network properties and conditions • Access to local file system • Geolocation • Notifications / Push • … Capabilities
  34. 34. Native Apps Platform Language IDE SDK App Store iOS Objective C Xcode (Mac) iOS SDK App Store Windows Phone C#, VB.NET Visual Studio, Blend (Windows) Windows Phone SDK Windows Phone Marketplace Android Java Eclipse, Android Studio (Windows or Mac) Android SDK Google Play Tools and Technologies
  35. 35. Native Apps …but I’m a Microsoft developer and I don’t want to learn each platform? • Xamarin • Develop core / common components in C# • Still requires platform SDKs • Designer support for Android • iOS still requires Xcode (designer support coming?) The DRY Principle
  36. 36. Native Apps Xamarin Architecture and Code Reuse 40% 60% Approximate Code Reuse with Xamarin OS Specific Shared Xamarin High-level Architecture
  37. 37. Native Apps Avtex Secure Messaging Prototype
  38. 38. Native Apps Avtex Secure Messaging Prototype
  39. 39. Native Apps Pros • Rich, integrated experience • Performance • Access to device hardware features • Monetization / App Store • Offline Capabilities Cons • *Single platform / develop app per platform • *Cost to maintain and develop (learning curve) • App Store rules / policies • Device variation Pros and Cons
  40. 40. MOBILE SOLUTION STRATEGIES Hybrid Applications
  41. 41. Hybrid Apps Hybrid apps run on the device inside a native container that uses the browser engine for rendering and executing HTML, JavaScript, and CSS. The major mobile platforms support Hybrid Apps!
  42. 42. Polling Question Have you deployed a hybrid application? • Yes • No • I don’t know View Results www.avtex.com/engage
  43. 43. Hybrid Apps • App Store! • Access to device capabilities – Contacts / Address book – Accelerometer – Camera – Data storage – Network properties and conditions – Local file system – Geolocation – Notifications How is this different than the mobile web option?
  44. 44. Hybrid Apps • HTML, JavaScript, and CSS “packaged” with application • Open Source JavaScript layer gives access to device APIs • Leverage web services for integration • Use native “web view”` on device How does it work?
  45. 45. Hybrid Apps Examples: Untappd iPhone Android
  46. 46. Hybrid Apps Examples: Healthtap iPhone Android
  47. 47. Hybrid Apps • Technologies – HTML5 – CSS – JavaScript • CSS and JavaScript Frameworks Tools and Technologies
  48. 48. Hybrid Apps • Tools – PhoneGap – Nomad – Icenium – and more… Tools and Technologies
  49. 49. DEMO Telerik Icenium
  50. 50. Hybrid Apps Performance was a big reason they transitioned from hybrid to native. Facebook “Our biggest mistake was relying too much on HTML 5 and not on native apps.” -- Mark Zuckerberg
  51. 51. Hybrid Apps Pros • Monetization / App Store • Cross Platform • Familiar Web Technologies • Access to Device Capabilities • Offline support • Shared / Common Codebase • Cost to support / maintain Cons • Performance • Achieving Native UI when targeting cross-platform • Limited device API access • Debugging can be difficult Pros and Cons
  52. 52. SUMMARY
  53. 53. Polling Question What strategy is right for you? • Web • Native • Hybrid • I’m still not sure View Results www.avtex.com/engage
  54. 54. Mobile Solution Strategies A Continuum of Options Web based approach to mobile app dev. / deploy Pro • Time to market/releases • Leverage skills • Cross platform • Lower cost • Centralized Con • Potential performance • User experience • Not an app in store Web Native “shell” with embedded HTML, CSS, and JavaScript Pro • Cross platform • Native experience • Access to onboard resources • Lives in app stores Con • Potential performance • Potentially multiple codebases Hybrid Fully native mobile application Pro • Performance • Native experience • Lives in app stores Con • Adds time / cost • Potentially multiple codebases • Increased support • Slower release cycle Native
  55. 55. Mobile Solution StrategiesTime/Cost Features Native Hybrid Web
  56. 56. Mobile Solution Strategies • Budget and timeline • Understand your users and user expectations • Understand usage scenarios • Know your application goals • Do you need device capabilities? What’s your mobile strategy? There isn’t a one-size-fits-all solution… It’s based on the required features and expectations of your users.
  57. 57. Thank You!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×