Native v. Hybrid v. Web

6,942 views
6,695 views

Published on

My presentation for Web Directions Unplugged to talk about some of the specific costs and challenges we face when selecting a mobile development strategy.

Published in: Business, Technology
3 Comments
30 Likes
Statistics
Notes
No Downloads
Views
Total views
6,942
On SlideShare
0
From Embeds
0
Number of Embeds
265
Actions
Shares
0
Downloads
411
Comments
3
Likes
30
Embeds 0
No embeds

No notes for slide

Native v. Hybrid v. Web

  1. 1. vs vsnative hybrid web
  2. 2. @fling
  3. 3. the format
  4. 4. ask questions.get answers.
  5. 5. my sad love storyof the mobile web
  6. 6. vs vsnative hybrid web
  7. 7. bradfrostweb.com
  8. 8. “[Brian] made me feel the sameway I feel when my grandpa talksto me about surviving the GreatDepression. —Brad Frost bradfrostweb.com
  9. 9. That Guy
  10. 10. 3:1QA : Dev
  11. 11. For every hour spent ondevelopment, three had to be spent in QA.
  12. 12. webmobile ux
  13. 13. webmobile ux
  14. 14. 2010
  15. 15. “If the web was my religion, I feel asthough I’ve lost my faith. 2010
  16. 16. mobiledesign.org
  17. 17. “[Brian] states making a nativeapplication can be the best thing for aproduct, but confirms on the otherhand that the mobile web is the onlylong term commercially viablecontent platform for mobile devices —Thibault Imbert
  18. 18. MADE WITH LOVE IN SEATTLE BY
  19. 19. while my friends were rolling in cash from native apps,
  20. 20. while my friends were rolling in cash from native apps, I couldn’t pay my rent building web apps.
  21. 21. “I want desperately to be aweb developer again, but if Ihave to wait until 2020 forbrowsers to do what Cocoacan do in 2010, I won’t wait. —Joe Hewitt 29 April 2010
  22. 22. pinch / zoom pinchzoom.com
  23. 23. ! Price Apps
  24. 24. iflowreader.com
  25. 25. “We bet everything on Appleand iOS and then Apple killedus by changing the rules in themiddle of the game. iflowreader.com
  26. 26. suck my ass
  27. 27. I bet everything onthe web and I lost.
  28. 28. That Guy
  29. 29. Why?
  30. 30. MADE WITH LOVE IN SEATTLE BY
  31. 31. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobilitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  32. 32. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  33. 33. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  34. 34. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY
  35. 35. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4devicesweb MADE WITH LOVE IN SEATTLE BY
  36. 36. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devicesweb MADE WITH LOVE IN SEATTLE BY
  37. 37. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar featureweb MADE WITH LOVE IN SEATTLE BY
  38. 38. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb MADE WITH LOVE IN SEATTLE BY
  39. 39. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 MADE WITH LOVE IN SEATTLE BY
  40. 40. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 next MADE WITH LOVE IN SEATTLE BY
  41. 41. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 next MADE WITH LOVE IN SEATTLE BY
  42. 42. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G 4Ginternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 next MADE WITH LOVE IN SEATTLE BY
  43. 43. everything has led to this moment
  44. 44. the future of mobile will not be the web...
  45. 45. the future of mobile will not be the web... ...or apps
  46. 46. it’s everything everywhere
  47. 47. That Guy
  48. 48. vs vsnative hybrid web
  49. 49. native appAn application that isspecifically written for adevice platform.
  50. 50. “ They are expensive to create —a simple app could cost you $32,639 and take two months to create.
  51. 51. $32,639 for a simple app 2 months to create 2 weeks per feature 4 features $8,160 per feature
  52. 52. “ A complex app could have a price tag of more than $163,200 and take six months to develop.
  53. 53. $163,200 for a complex app 6 months to create 2 weeks per feature 12 features $13,600 per feature
  54. 54. “ This price multiplies if you decide you want to make it available on more than one operating system.
  55. 55. PLATFORM RESOURCES iPhone 100% iPad 150% Android 175%Honeycomb 200%Blackberry 300%
  56. 56. Cost of Native Simple App Complex AppiPhone $32,639 $163,200iPad $48,959 $244,800Android $57,118 $285,600Honeycomb $65,278 $326,400Blackberry $97,917 $489,600Total $301,911 $1,509,600
  57. 57. hybrid appAn application usingprimarily web technologiesinside a native container.
  58. 58. hybrid app...to be in the App Store.
  59. 59. ! Price Apps
  60. 60. The PhoneGap Box ScoreStars 53 1.2 Reviews Platforms
  61. 61. PLATFORM RESOURCES Hybrid iPhone 113% Hybrid iPad 141% Hybrid Android 225%Hybrid Honeycomb 225%Hybrid Blackberry 338%
  62. 62. wtf?
  63. 63. 2.85:1 QA : Dev
  64. 64. For every hour spent ondevelopment, three has to be spent in QA.
  65. 65. Simple App Native Hybrid Mobile WebiPhone $32,639 $36,719 $24,479iPad $48,959 $45,899 $30,599Android $57,118 $73,438 $48,959Honeycomb $65,278 $73,438 $48,959Blackberry $97,917 $110,157 $73,438Total $301,911 $339,650 $226,433
  66. 66. Complex App Native Hybrid Mobile WebiPhone $163,200 $183,600 $122,400iPad $244,800 $229,500 $153,000Android $285,600 $367,200 $244,800Honeycomb $326,400 $367,200 $244,800Blackberry $489,600 $550,800 $367,200Total $1,509,600 $1,698,300 $1,132,200
  67. 67. web appAn application that runswithin a web browser.
  68. 68. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website
  69. 69. Content in Context
  70. 70. MADE WITH LOVE IN SEATTLE BY
  71. 71. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks12x Media-Query-based Layouts
  72. 72. a hexadecimal what?
  73. 73. the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units.
  74. 74. the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally.
  75. 75. iPad iPhone Desktop magazine web app website‣ pagination was a nightmare. ‣ largeimage needs for iPad were‣ had brutal. to create an entirely new css framework to deal with all the screen ‣ had to add device detection to reduce sizes. JS page load per context.‣ every page had to be designed ‣ typical navigation had to be scrapped. individually. ‣ design sacrifices had to be made to‣ content had to be type fitted, similar to make it work. print layout workflow. ‣ page flow was less than ideal.‣ had to disable pinch to zoom.
  76. 76. 2.85:1 QA : Dev
  77. 77. sni er.pinchzoom.com
  78. 78. Simple App Native Hybrid Mobile WebiPhone $32,639 $36,719 $24,479iPad $48,959 $45,899 $30,599Android $57,118 $73,438 $48,959Honeycomb $65,278 $73,438 $48,959Blackberry $97,917 $110,157 $73,438Total $301,911 $339,650 $226,433
  79. 79. Complex App Native Hybrid Mobile WebiPhone $163,200 $183,600 $122,400iPad $244,800 $229,500 $153,000Android $285,600 $367,200 $244,800Honeycomb $326,400 $367,200 $244,800Blackberry $489,600 $550,800 $367,200Total $1,509,600 $1,698,300 $1,132,200
  80. 80. That Guy
  81. 81. ask questions.get answers.
  82. 82. + +native? hybrid? web?

×