10.03.2013 Hotel Sofitel Minneapolis, MN
Mobile Solution Strategies
Erik MauSenior 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, native, and the hybrid model for mobile solutions.
• Understand options for supporting cross-platform mobile solutions.
BEFORE WE GET STARTEDWhat role do you play in your organization?
MOBILE LANDSCAPE
Email, Spotify, News,
Research
Email, Facebook, Pinterest,
Houzz
Princess / Barbie games, Selfies, YouTube Craft
vids
YouTube Rollercoaster
vids
ESPN, Yahoo Fantasy,
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.
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.
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)
MOBILE SOLUTION STRATEGIES
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
Mobile Solution Strategies
• Mobile Web• Native Applications• Hybrid Applications
3 Primary Strategies
(Source: www.brightcove.com)
MOBILE SOLUTION STRATEGIESMobile Web
Mobile Web Defined
Mobile web solutions are built with server-side technology that renders HTML that is optimized for mobile devices.
Polling Question
Have you deployed a mobile version of a web site?• Yes• No• I don’t know
View Results
www.avtex.com/engage
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• Requires a CMS for content synchronization
Separate Sites
Mobile Web StrategiesSeparate Sites
http://espn.go.com http://m.espn.go.com
Mobile Web StrategiesSeparate 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
Responsive Design
Mobile Web StrategiesResponsive Design
Mobile Web StrategiesResponsive Design
Mobile Web StrategiesResponsive Design
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
Mobile Web Strategies
• Leverage standard platforms and tools (Visual Studio, Sitefinity, Sitecore, SharePoint, etc.)
• Know your JavaScript and CSS Frameworks
Tools and Technologies
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
MOBILE SOLUTION STRATEGIESNative Applications
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.
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
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
Native AppsEnterprise 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
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
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
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
Native AppsXamarin Architecture and Code Reuse
40%
60%
Approximate Code Reuse with Xamarin
OS SpecificShared
Xamarin High-level Architecture
Native AppsAvtex Secure Messaging Prototype
Native AppsAvtex Secure Messaging Prototype
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
MOBILE SOLUTION STRATEGIESHybrid Applications
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!
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– Network properties and conditions– Local file system– Geolocation– Notifications
How is this different than the mobile web option?
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?
Hybrid AppsExamples: Untappd
iPhone Android
Hybrid AppsExamples: 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
DEMOTelerik Icenium
Hybrid Apps
Performance was a big reason they transitioned from hybrid to native.
“Our biggest mistake was relying too much on HTML 5 and not on native apps.”
-- Mark Zuckerberg
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
SUMMARY
Polling Question
What strategy is right for you?• Web• Native• Hybrid• I’m still not sure
View Results
www.avtex.com/engage
Mobile Solution StrategiesA Continuum of Options
Web based approach to mobile app dev. / deploy
Pro• Time to market/releases• Leverage skills• Cross platform• Lower cost• CentralizedCon• 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 storesCon• Potential performance• Potentially multiple
codebases
Hybrid
Fully native mobile application
Pro• Performance• Native experience• Lives in app storesCon• Adds time / cost• Potentially multiple
codebases• Increased support• Slower release cycle
Native
Mobile Solution StrategiesTi
me /
Cost
Features
Native
Hybrid
Web
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.
Thank You!