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,

Instagram

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.

Facebook

“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!