PowerPoint Presentation

Navigating the mobile maze4.23Praveen Bohra

FUTURE OF EXPERIENCES

#

FUTURE BELONGS TO MOBILITY

#

THE 2ND SCREEN BECOMES 1ST SCREEN

#

THE 2ND SCREEN BECOMES 1ST SCREEN

#

Tablets sales surpassed PCs & Notebooks sales in < 3yrs

#

ECOSYSTEM

#

MOBILE DEVICES WORLD

Inconsistent GeosToo many sizesToo much fragmentation

#

MOBILE TECHNOLOGIES WORLD

iOSFlexWearables SDKSencha TouchWindows 8Appcelerator TitaniumAdobe PhoneGapIBM WorklightAndroidKonyHTML5Backbone.jsAngular.jsApache CordovaAntenna AmpChroma SAP SycloVerivoConvertigoNetBiscuitsSapient RelayJQuery MobileXamarinJQTouchiWebKitDHTMLX TouchiBeaconDigbyQualCommMobilize.jsBlackBerryUsableNet

#

EVOLVING SOLUTION APPROACHES

ExperiencesCross-CompilersWrapperNativeHybridRESSResponsiveHTML5ApproachesTechnologiesAppWeb?

#

14

Native appsA binary application which is compiled using the Native APIs and the native device runtimeProsConsUser experienceHigh performanceHigh interactivityAccess to device capabilitiesExtensibilityNo reusability Multiplication of effortsSpecialist team RedistributionVersion zooApps misuse accessUse CaseHigh power performance, slick and glossy interactions and rich graphicsHighly integrated to the deviceRegular use and frequently accessing personal information

#

WRAPPER APPWrapper Apps use a standardized native shell which is available for several platforms (e.g. PhoneGap). The shell defines a runtime environment for implementing UI and functionality using web technologies (HTML, CSS, JS). It especially exposes device features by JS APIs. In contrast to a Hybrid App, the web code is compiled into the App.ProsConsOne code for all platforms.No special skills needed, web developer can do the implementation.Device-specific adaptions and workaroundsPerformance and memory problems are common.Functionality is restricted to what the shell has to offer (if Passbook is e.g. not supported, it can not be used). Heavy-weight appsCompromized user experience Use CaseWhere budgets are constrained and rapid change is requiredUsers will be resistant to installing appTo reach broad base of devices/platforms

#

16

CROSS-PLATFORM COMPILERSTo address the platform fragmentation problems, several technologies have been developed that allow to compile one source code to native code for all supported platforms. The results are Native Apps.ProsConsOne code for all platformsEasy to support newer versionsProprietary technology Compromized user experienceHeavy-weight AppsPerformance and memory problemsRestricted functionality due to SDKSupport for newer version dependent on 3rd partyUse CaseUnified experience where overall polish and finish doesn't need to be nativeFrequently interacting with personal informationNeed to use 3rd party technologies for complete app

#

17

Mobile webWeb page / application which is run from the device web browser and has access to browser APIsProsConsStandards basedOne code for all devicesNo special skillsFast updatesMulti-Channel solutions - RESS approachHTML5 functionalities are available in latest OS versions.Compromised user expectationsLimited access to deviceDevice browser fragmentationPartly supported HTML5 featuresPerformance and memory problemsNo App store presenseUse CaseQuickly accessible public informationWhere budgets are constrained and rapid change is requiredUsers will be resistant to installing appTo reach broad base of devices/platforms

#

RESPONSIVE WEB DESIGN One design with a fluid layout is used for all devices. The page adapts itself on deviceProsConsNo additional server-side technologyRobust solution. Support for new devices.Fallback behavior available.Only one user flow over all channelsPhysical display size not available (only viewport size).Complex codeHigh CSS and JS overhead Performance might become an issueAdditional latency as larger images are scaled down in browser.Use CaseSame page is delivered to all devices.RWD uses modern browser features to adjust the site layout to the device viewport. This does not happen automaticallyOften images are used in one size (largest target device) and scaled down on client sideRWD does not reduce or solve cross-browser or device problems

#

Cons: Only one user flow over all channels. No adaption to channel specific use cases possible.Physical display size not available (only viewport size). High res small screen smart-phones and tablets get the same layout.Handling of device or browser bugs and incompatibilities difficult or impossible.High CSS and JS overhead because all devices get the superset of code for all platforms (including the specific adaptions for single devices). The increased code complexity leads to bad maintainability. Worsens over time because new devices appear which need additional modifications.Load and performance on mobile devices in most cases not satisfactory due to code overhead. Additional latency in low bandwidth networks if image for largest device is used and scaled down in browser.

Use CaseSame page is delivered to all devices.RWD uses modern browser features to adjust the site layout to the device viewport. This does not happen automatically behavior has to be defined in concept phase (fluid grid layouts) and implemented with CSS MediaQueries.Often images are used in one size (largest target device) and scaled down on client side. More enhanced image handling needs server side support.RWD does not reduce or solve cross-browser or device problems. Any necessary adaptions to the specific device have to be detected on client side and handled there (Javascript code).

19

ADAPTIVE WEB DESIGN Each class of devices gets its own layout and flow. Device is detected on server and page gets adapted before being delivered to device.ProsConsHigh quality pixel-accurate layouts possible.Handling of device specific bugs and incompatibilities possible.Device gets optimized page and content. No CSS/JS overhead, images scaled to device before delivery. Fast page load time and overall page performance.Easier to maintain because server-side capabilities can be usedBetter classification of devices possibleAdaptions in flow and layout to channel possibleHigh dependency on completeness and quality of device database. No graceful degradationProblems with browsers that dont deliver any device id for detection.Layouts are normally pixel-accurate and therefore inflexible Additional technology needed on server-side (device database, rendering layer).Effort for new features or bug fixes in many cases multiplies by number of channels.Use CaseCurrent device and browser are detected utilizing a device databaseA switch is implemented mapping the device to the corresponding channelWithin a channel each page is adapted to a specific device or device group before delivery Pages can be delivered with a pixel accurate layout

#

ProsHigh quality pixel-accurate layouts possible.Handling of device specific bugs and incompatibilities possible. Older devices and browsers can be supported.Device gets optimized page and content. No CSS/JS overhead, images scaled to device before delivery. Fast page load time and overall page performance.Easier to maintain because server-side capabilities can be used (libraries, development tools, computing power, ...). Maintainability of server side code is much better than JS code.Better classification of devices possible due to device database information (e.g. distinguishing high resolution smartphones from tablets with same viewport size).Adaptions in flow and layout to channel possible (e.g. if channel corresponds to a different use case).ConsHigh dependency on completeness and quality of device database. No graceful degradation: If detection fails, device only gets fallback.Problems with browsers that dont deliver any device id for detection.Layouts are normally pixel-accurate and therefore inflexible (e.g. orientation change from portrait to landscape leads to elements being much to high because element aspect ratio is conserved).Additional technology needed on server-side (device database, rendering layer).Effort for new features or bug fixes in many cases multiplies by number of channels.Use CaseCurrent device and browser are detected utilizing a device databaseA switch is implemented mapping the device to the corresponding channelWithin a channel each page is adapted to a specific device or device group before delivery (adaption of HTML/CSS/JS, resizing of images) - based on information about its capabilities from a device databasePages can be delivered with a pixel accurate layout

20

Hybrid appsA binary application using a 3rd party runtime able to accessing Native APIs including HTML5, Flash or equally suitable runtimes. ProsConsTrade-off between user-experience and cost.Evolutionary enhancement based on feedbackLeverages Mobile PortalFast changes without redistribution.Look & feel gap between native and web partsAdditional effort on portal sideNative shell for all supported platforms. Use CaseIn a content rich application, gamingUnified experience where overall polish and finish doesn't need to be nativeFrequently interacting with personal informationNeed to use 3rd party technologies for complete app

#

21

PRAGMATIC SOLUTION APPROACH

CLIENT Vs USERS CONSIDERATIONS

Time and cost effective

Largest customer base reach User Experience

PerformanceClientsUsers

#

CHOOSING AN APPROACH Mobile Portal Native App +Access to device capabilities+Changeability+Reusability+Standards based+Security+Technical flexibility+Marketing+Platform independentHybridApp+User Experience

#

BASIC DECISION TREECan we utilize a mobile portal? HYBRID APPHigh customer expectationsAnd/orneeds native capabilitiesNATIVEAPPHYBRIDAPPWRAPPER APPWEBAPPDo I need the AppStore?Can we utilize a mobile portal?YESYESYESYESNONONONO

#

FEW OTHER CONSIDERATIONSMobile WebWeb-Wrapper AppCross-Compile AppNative AppSmall development budgetVery tight timelineRobust full functional website App store presence mustMultiple OS & DevicesSkill set of current teamExtensibility to external h/wLots of animationIn-store appPerformanceFeaturesFlexibilityCost effectiveCode reuse

#

GUIDING PRINCIPLES

Adapt to diversifying market of mobile devicesQuick time to marketGuiding Principles for Mobile Experience CreationGo beyond mobile and multi-channel to Omni-ChannelLower the incremental cost of software creation

#

Lets take the plunge into ever evolving, innovating, crowded & fast paced mobility space to build great experiences for our users

and also have lots of fun on the way!

#

Thank You

praveen-bohra

2014 SAPIENT CORPORATION | CONFIDENTIAL