Native v. Hybrid v. Web

Presented at Web Directions Unplugged about some of the specific costs and challenges we face when selecting a mobile development strategy.

1. native hybrid web vs vs
2. @fling
3. the format
4. ask questions. get answers.
5. my sad love story of the mobile web
6. native hybrid web vs vs
7. bradfrostweb.com
8. bradfrostweb.com “[Brian] made me feel the same way I feel when my grandpa talks to me about surviving the Great Depression. —Brad Frost
9. That Guy
13. 3:1 QA : Dev
14. For every hour spent on development, three had to be spent in QA.
15. mobile ux web
16. mobile ux web
19. 2010 “If the web was my religion, I feel as though I’ve lost my faith.
20. mobiledesign.org
22. “[Brian] states making a native application can be the best thing for a product, but confirms on the other hand that the mobile web is the only long term commercially viable content platform for mobile devices —Thibault Imbert
23. MADE WITH LOVE IN SEATTLE BY
24. while my friends were rolling in cash from native apps,
25. while my friends were rolling in cash from native apps, I couldn’t pay my rent building web apps.
27. “I want desperately to be a web developer again, but if I have to wait until 2020 for browsers to do what Cocoa can do in 2010, I won’t wait. —Joe Hewitt 29 April 2010
28. pinch/zoom pinchzoom.com
29. Price Apps !
30. iflowreader.com
31. iflowreader.com “We bet everything on Apple and iOS and then Apple killed us by changing the rules in the middle of the game.
32. suck my ass
33. I bet everything on the web and I lost.
34. That Guy
35. Why?
37. MADE WITH LOVE IN SEATTLE BY MADE WITH LOVE IN SEATTLE BY
38. computing network internet devices web 2010 2000 1990 1980 1970 2020 mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
39. computing network internet devices web 2010 2000 1990 1980 1970 2020 ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
40. computing network internet devices web 2010 2000 1990 1980 1970 3G 2020 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
41. computing network internet devices web 2010 2000 1990 1980 1970 3G 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
42. computing network internet devices web 2010 2000 1990 1980 1970 IPv4 3G 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
43. computing network internet devices web 2010 2000 1990 1980 1970 IPv4 3G IPv6 2020 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
44. computing network internet devices web 2010 2000 1990 1980 1970 feature brick IPv4 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
45. computing network internet devices web 2010 2000 1990 1980 1970 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe MADE WITH LOVE IN SEATTLE BY
46. computing network internet devices web dot-com 2010 2000 1990 1980 1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe academia MADE WITH LOVE IN SEATTLE BY
47. computing network internet devices web dot-com 2010 2000 1990 1980 1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY
48. computing network internet devices web dot-com 2010 2000 1990 1980 1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY
49. computing network internet devices web dot-com 2010 2000 1990 1980 1970 web 2.0 feature brick IPv4 touch 3G IPv6 2020 candybar 4G 2.5G 2G 1G ubiquity mobility pc’s mainframe next academia MADE WITH LOVE IN SEATTLE BY touch IPv6 4G ubiquity next
50. everything has led to this moment
51. the future of mobile will not be the web...
52. the future of mobile will not be the web... ...or apps
55. it’s everything everywhere
56. That Guy
57. native hybrid web vs vs
58. native app An application that is specifically written for a device platform.
66. “They are expensive to create —a simple app could cost you $32,639 and take two months to create.
67. $32,639 for a simple app 2 months to create 2 weeks per feature 4 features $8,160 per feature
68. “A complex app could have a price tag of more than $163,200 and take six months to develop.
69. $163,200 for a complex app 6 months to create 2 weeks per feature 12 features $13,600 per feature
70. “This price multiplies if you decide you want to make it available on more than one operating system.
71. PLATFORM RESOURCES iPhone 100% iPad 150% Android 175% Honeycomb 200% Blackberry 300%
72. Cost of Native Simple App Complex App iPhone $32,639 $163,200 iPad $48,959 $244,800 Android $57,118 $285,600 Honeycomb $65,278 $326,400 Blackberry $97,917 $489,600 Total $301,911 $1,509,600
73. hybrid app An application using primarily web technologies inside a native container.
74. hybrid app ...to be in the App Store.
79. Price Apps !
81. The PhoneGap Box Score 1.2 Platforms 53 Reviews Stars
83. PLATFORM RESOURCES Hybrid iPhone 113% Hybrid iPad 141% Hybrid Android 225% Hybrid Honeycomb 225% Hybrid Blackberry 338%
84. wtf?
85. 2.85:1 QA : Dev
86. For every hour spent on development, three has to be spent in QA.
87. Simple App Native Hybrid Mobile Web iPhone $32,639 $36,719 $24,479 iPad $48,959 $45,899 $30,599 Android $57,118 $73,438 $48,959 Honeycomb $65,278 $73,438 $48,959 Blackberry $97,917 $110,157 $73,438 Total $301,911 $339,650 $226,433
88. Complex App Native Hybrid Mobile Web iPhone $163,200 $183,600 $122,400 iPad $244,800 $229,500 $153,000 Android $285,600 $367,200 $244,800 Honeycomb $326,400 $367,200 $244,800 Blackberry $489,600 $550,800 $367,200 Total $1,509,600 $1,698,300 $1,132,200
90. web app An application that runs within a web browser.
91. p/z universal build a website that provided the best possible experience to the context. iPad magazine iPhone web app Desktop website
93. Content in Context
95. MADE WITH LOVE IN SEATTLE BY
96. 1x HTML5 Markup 1x Hexadecimal CSS Framework 1x Typography Framework 3x Javascript Frameworks 12x Media-Query-based Layouts
97. a hexadecimal what?
98. the hex-grid Typically when using a grid web designers are typically only using vertical units.
99. the hex-grid but in mobile design, we must use horizontal units as well. this means that any unit size must work vertically as well as horizontally.
102. iPad magazine iPhone web app Desktop website ‣ pagination was a nightmare. ‣ had to create an entirely new css framework to deal with all the screen sizes. ‣ every page had to be designed individually. ‣ content had to be type fitted, similar to print layout workflow. ‣ had to disable pinch to zoom. ‣ large image needs for iPad were brutal. ‣ had to add device detection to reduce JS page load per context. ‣ typical navigation had to be scrapped. ‣ design sacrifices had to be made to make it work. ‣ page flow was less than ideal.
105. 2.85:1 QA : Dev
107. sni er.pinchzoom.com
108. Simple App Native Hybrid Mobile Web iPhone $32,639 $36,719 $24,479 iPad $48,959 $45,899 $30,599 Android $57,118 $73,438 $48,959 Honeycomb $65,278 $73,438 $48,959 Blackberry $97,917 $110,157 $73,438 Total $301,911 $339,650 $226,433
109. Complex App Native Hybrid Mobile Web iPhone $163,200 $183,600 $122,400 iPad $244,800 $229,500 $153,000 Android $285,600 $367,200 $244,800 Honeycomb $326,400 $367,200 $244,800 Blackberry $489,600 $550,800 $367,200 Total $1,509,600 $1,698,300 $1,132,200
110. That Guy
111. ask questions. get answers.
112. native? hybrid? web? + +