![Page 1: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/1.jpg)
To HTML5 or Not to HTML5?Designing for Cross Platform Mobile
Experiences
![Page 2: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/2.jpg)
Who are we?Derrick Morton, CEO, FlowPlay
20 years in game development, 17 years online development
Past companies – GameHouse, RealNetworks, iWin, Vivendi Universal Games
Douglas Pearson, CTO, FlowPlayPh.D. from Univ of Michigan in A.I.Founded company focused on mobile games
before they were easy12 years in casual game development
![Page 3: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/3.jpg)
Who is FlowPlay?Casual game company focusing on virtual
worlds45 people in SeattleEstablished in 2006Funded by Intel Capital and the creators of
Skype
![Page 4: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/4.jpg)
Who is FlowPlay?
![Page 5: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/5.jpg)
Who is FlowPlay?
![Page 6: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/6.jpg)
Don’t BlinkThe Past Five Years have seen incredible
technology changesNew Hardware Types – Tablets, Touchscreen
Laptops, SmartphonesNew Operating Systems – Rise of iOS and
AndroidNew Devices of Every Shape and SizeMigration from Desktop to Mobile Internet
![Page 7: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/7.jpg)
Why cross platform?
![Page 8: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/8.jpg)
Why cross platform?
![Page 9: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/9.jpg)
Why cross platform?
![Page 10: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/10.jpg)
Why cross platform?
![Page 11: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/11.jpg)
What are the biggest issues?
IDC Poll of 3,500 Mobile Developers
![Page 12: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/12.jpg)
What are you building?
Visual Complexity
Text &Simple Forms
Lots of StaticImages
2D games orenvironments
3D games orenvironments
![Page 13: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/13.jpg)
How much money do you have?
Pots of gold
2 guys ingarage
10 guys withSeed funding
25 guys withVC backing
1000 guyspublic company
How technical is your team?Is somebody else building it for you?
![Page 14: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/14.jpg)
Who is it for?
Target audience
B2B orInternal only
Your existingaudience
Mass marketNew and existing
![Page 15: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/15.jpg)
How will they find it?
Audience source
B2B orInternal only
Search(SEO, SEM, app store positioning etc.)
Marketing campaigns(web, in-app ads, etc.)
![Page 16: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/16.jpg)
Cross-platform – so which platforms?
Mobile
DesktopWeb
PCsConsoles
![Page 17: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/17.jpg)
Cross-platform – so which platforms?
+ Android Phones
iPhone
+ Android Tablets
iPads
iOS
Mobile
![Page 18: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/18.jpg)
Cross-platform – so which platforms?1. Just iOS2. Just mobile (iOS + Android)3. Mobile + PC/Console (e.g. games)
4. Mobile + Web (e.g. lots of interactive)
5. Mobile + Web + PC/Console (e.g. going really wide)
![Page 19: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/19.jpg)
Available solutionsHTML5 viewed in browser on phoneHTML5 wrapped into app
(PhoneGap/Appcelerator etc.)Native appsUnityMarmaladeOpenFL (or Gingee)Flash/Air(And lots more…)
![Page 20: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/20.jpg)
Major decision
Choice
App(Lots of choices)
No App(HTML5)
![Page 21: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/21.jpg)
HTML5 viewed in a browserWhat is it?
JavaScript applicationRendering into a “canvas” (HTML5)Viewed in a browser (normal “web”
experience)
![Page 22: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/22.jpg)
HTML5 viewed in a browserPros
One codebase that works everywhereFuture proof
HTML5 not going awayLots of industry support
Steadily better and better performanceDon’t pay 30% to Apple or Google
![Page 23: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/23.jpg)
HTML5 viewed in a browserCons
Browsers can be fickle. Esp Internet Explorer (~40% market share on desktop) HTML5 is a loose standard – optional features, variable
support Browser release can break the app
Performance will likely be significantly worse than almost all other solutions Likely to be a big deal on mobile – if a highly interactive app
No access to native featuresNo access to app storeApple doesn’t want this to succeed
No rev share if you are in a browser, not an app They could kill off successful browser “apps” if they wished
![Page 24: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/24.jpg)
HTML5 wrapped into an appWhat is it?
JavaScript applicationRendering into a “canvas” (HTML5)Built as an app that contains an embedded
browserPhoneGap, Appcelerator,… etc.Sometimes called “Hybrid”
![Page 25: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/25.jpg)
HTML5 wrapped into an appPros
One codebase that works everywhereHave access to native features (via app
integration layer)Less browser variability (as embedding the
browser)Quick to market (esp. if existing web app)App store presence – discovery etc.
![Page 26: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/26.jpg)
HTML5 wrapped into an appCons
Performance, performance, performance Likely to be a big deal on mobile – if a highly interactive
appWorse experience than your competitorsStill got to worry about Internet Explorer on
desktop Limited HTML5 support, nasty compatibility libraries
Facebook dropped this approach in a high profile move
Generally an “OK” rather than “Great” product solution
![Page 27: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/27.jpg)
Native applicationsWhat is it?
Custom solution for each targeted platformiOS: Objective C and/or SwiftAndroid: Java applicationWeb: HTML or FlashPC/Console: C++
![Page 28: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/28.jpg)
Native applicationsPros:
Fastest possible performanceAccess to every platform featureBest possible solution on each platform
![Page 29: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/29.jpg)
Native applicationsCons:
Many separate codebases Bugs/issues in one may not appear in others Feature additions need to be made separately in each codebase Different tools and production paths, different platform
capabilitiesDivides engineering team skillsSlower to marketHard to be agile. Much easier if doing waterfall.May lead to a “ports” model where 1 version is great and
rest are so-soNew technologies require all new port (e.g. Windows
phone, Tizen (Samsung))
![Page 30: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/30.jpg)
UnityWhat is it?
A cross-platform game development tool3D rendering engine primarily but adding 2D
supportCode written in C#
![Page 31: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/31.jpg)
UnityPros
Impressive 3D engine performance on all platforms
Single implementation deployed everywhereCross compiles as a native app on mobile so
native customizations are possible“Future proof” against new platforms
becoming popularHuge developer community
![Page 32: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/32.jpg)
UnityCons
Web support is a problemC# => C++ => JavaScript (asm.js a subset of
JavaScript)Amazing technology, but result is a very large
executable (~10MB for “hello world”)Internet Explorer support is still missingBrowsers dropping plug-in support
![Page 33: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/33.jpg)
MarmaladeWhat is it?
A cross-platform SDKPrimarily targeting existing C++ apps/gamesCross compile for iOS, Android, PC/ConsoleJavaScript SDK for web
![Page 34: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/34.jpg)
MarmaladePros
Single code baseNative performance (since C++)
ConsC++ is a tough language to develop in (1990s
vs 2010s)Slower development (in exchange for faster
performance)Web support seems unclear?
![Page 35: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/35.jpg)
OpenFL / GingeeWhat are they?
Cross compiler solutions Actionscript (or Haxe) => C++ or JavaScript
One set of source code => Native apps => HTML5 => …
OpenFL is open sourceGingee includes “liquid UI” to scale/relayout
elements on a per-platform basis
![Page 36: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/36.jpg)
OpenFL / GingeePros
Single implementation deployed everywhereCross compiles as a native app on mobile so native
customizations are possible“Future proof” against new platforms becoming
popularCan target HTML5 and Flash for web
ConsGingee is closed source. Small startup.OpenFL is a small team/communityLimited documentation/supportSomewhat unproven
![Page 37: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/37.jpg)
Flash / AirWhat is it?
Actionscript programming languageRuns in Flash plugin in browserRuns as Air application on desktop/mobile
Works fine on iOS contrary to rumors…
![Page 38: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/38.jpg)
Flash / AirPros
Single implementation deployed everywhereAccess to native features (via ANEs)Supports iOS (common confusion)Now with GPU support95%+ installed plugin supportMature and stable platform. Lots of
documentation etc.
![Page 39: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/39.jpg)
Flash / AirCons
Flash perceived as “old tech”Browser support could be dropped in the
futureSlower performance than native (esp if no GPU
support)Higher memory usage
![Page 40: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/40.jpg)
Potential Conclusions?
![Page 41: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/41.jpg)
Apps vs Mobile Web
http://www.flurry.com/bid/109749/Apps-Solidify-Leadership-Six-Years-into-the-Mobile-Revolution
![Page 42: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/42.jpg)
HTML5 interest declining?
http://www.appcelerator.com.s3.amazonaws.com/pdf/q4-2013-devsurvey.pdf
“Very interested” in HTML572.7% in July 201259.9% in Nov 2013
Browser compatibility issues
Performance problemsStill correct choice in
some cases
![Page 43: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/43.jpg)
How much money do you have?
2 guys ingarage
10 guys withSeed funding
25 guys withVC backing
1000 guyspublic company
Native apps
(maybe)
A cross-platform toolkit or language
(not native)
Anything
![Page 44: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/44.jpg)
What are you building?Text &
Simple FormsLots of Static
Images2D games orenvironments
3D games orenvironments
HTML5 in browserHTML5 wrapped as app
UnityUnityFlash+AirOpenFL
![Page 45: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/45.jpg)
How important is the web?Not really
(Just mobile)(Mobile + PC/Console)
VeryImportant
UnityMarmalade
HTML5Flash+AirOpenFL
![Page 46: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/46.jpg)
What are we doing?Flash + Air for tablets and web
Moving now to GPU accelerated performance Redesign of UI to better support tablets
OpenFL for handsets Somewhat experimental but could be good long
term
![Page 47: Where Design and Development Meet: Cross Platform Mobile Experiences](https://reader036.vdocuments.site/reader036/viewer/2022070321/558e0bf41a28ab78318b45b7/html5/thumbnails/47.jpg)
Questions / Comments?