what the web community can learn from mobile

1. what the web canlearn frommobile MADE WITH LOVE IN SEATTLE BY

2. MADE WITH LOVE IN SEATTLE BY

4. webmobile ux MADE WITH LOVE IN SEATTLE BY

5. webmobile ux MADE WITH LOVE IN SEATTLE BY

7. “[Brian] states making a nativeapplication can be the best thing for aproduct, but conﬁrms on the otherhand that the mobile web is the onlylong term commercially viablecontent platform for mobile devices” —Thibault Imbert

8. mobiledesign.org

10. CENSORE D pinch / zoom CE NS OREDCENSORED CENSORED CENSOR ED CENSORED pinchzoom.com

12. “Chuck” MADE WITH LOVE IN SEATTLE BY

13. Chuck is a real mobile expert. MADE WITH LOVE IN SEATTLE BY

14. Chuck is a real mobile expert.He will never speak at a conference you willattend. MADE WITH LOVE IN SEATTLE BY

15. Chuck is a real mobile expert.He will never speak at a conference you willattend.He will never write a book that you will read. MADE WITH LOVE IN SEATTLE BY

16. Chuck is a real mobile expert.He will never speak at a conference you willattend.He will never write a book that you will read.He doesn’t care about the topics we debate. MADE WITH LOVE IN SEATTLE BY

17. Chuck is a real mobile expert.He will never speak at a conference you willattend.He will never write a book that you will read.He doesn’t care about the topics we debate.But he is building the infrastructure that youwill use 5 years from now. MADE WITH LOVE IN SEATTLE BY

18. There are tens ofthousands of people likethis around the worldsolving the mobileproblem. MADE WITH LOVE IN SEATTLE BY

19. These are my mentors. MADE WITH LOVE IN SEATTLE BY

20. I learned more about thefuture of mobile in threehours than I have in thelast three years. MADE WITH LOVE IN SEATTLE BY

21. I can tell you... MADE WITH LOVE IN SEATTLE BY

22. I can tell you...‣ how many smartphones are being shipped in the US MADE WITH LOVE IN SEATTLE BY

23. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent MADE WITH LOVE IN SEATTLE BY

24. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent‣ which platforms the carrier is behind and which they aren’t MADE WITH LOVE IN SEATTLE BY

25. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent‣ which platforms the carrier is behind and which they aren’t‣ who is making money in mobile and who isnt MADE WITH LOVE IN SEATTLE BY

26. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent‣ which platforms the carrier is behind and which they aren’t‣ who is making money in mobile and who isnt‣ where the network will be in the next three years MADE WITH LOVE IN SEATTLE BY

27. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent‣ which platforms the carrier is behind and which they aren’t‣ who is making money in mobile and who isnt‣ where the network will be in the next three years‣ how carriers feel about mobile web apps MADE WITH LOVE IN SEATTLE BY

28. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent‣ which platforms the carrier is behind and which they aren’t‣ who is making money in mobile and who isnt‣ where the network will be in the next three years‣ how carriers feel about mobile web apps‣ who is consuming the most bandwidth and why it matters MADE WITH LOVE IN SEATTLE BY

29. I can tell you...‣ how many smartphones are being shipped in the US‣ which platforms are moving and which arent‣ which platforms the carrier is behind and which they aren’t‣ who is making money in mobile and who isnt‣ where the network will be in the next three years‣ how carriers feel about mobile web apps‣ who is consuming the most bandwidth and why it matters‣ when the next product from Apple is shipping MADE WITH LOVE IN SEATTLE BY

31. Mobile Lesson #1 if you have insideinformation, you keep it to yourself MADE WITH LOVE IN SEATTLE BY

32. “[Motorola Xoom & Atrix sales] have been disappointing —Analyst Douchelord

33. Mobile Lesson #2be skeptical of anyone claiming they have answers to mobile* *see lesson #1 MADE WITH LOVE IN SEATTLE BY

34. pinchzoom.com/thecontext

35. what’s next? MADE WITH LOVE IN SEATTLE BY

36. Mobile Lesson #3“the only prevailing wisdomin mobile is that there is no prevailing wisdom” —Daniel Appelquist, W3C Mobile Web Initiative MADE WITH LOVE IN SEATTLE BY

40. 1970 1980 1990 2000 2010 2020computingnetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

41. 1970 1980 1990 2000 2010 2020computing mainframenetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

42. 1970 1980 1990 2000 2010 2020computing mainframe pc’snetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

43. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobilitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

44. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetworkinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

45. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY

46. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY

47. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY

48. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3Ginternetdevicesweb MADE WITH LOVE IN SEATTLE BY

49. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternetdevicesweb MADE WITH LOVE IN SEATTLE BY

50. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4devicesweb MADE WITH LOVE IN SEATTLE BY

51. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devicesweb MADE WITH LOVE IN SEATTLE BY

52. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brickweb MADE WITH LOVE IN SEATTLE BY

53. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybarweb MADE WITH LOVE IN SEATTLE BY

54. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybar featureweb MADE WITH LOVE IN SEATTLE BY

55. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybar feature touchweb MADE WITH LOVE IN SEATTLE BY

56. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybar feature touchweb academia MADE WITH LOVE IN SEATTLE BY

57. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com MADE WITH LOVE IN SEATTLE BY

58. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 MADE WITH LOVE IN SEATTLE BY

59. 1970 1980 1990 2000 2010 2020computing mainframe pc’s mobility ubiquitynetwork 1G 2G 2.5G 3G LTEinternet IPv4 IPv6devices brick candybar feature touchweb academia dot-com web 2.0 next MADE WITH LOVE IN SEATTLE BY

62. everything has ledto this moment MADE WITH LOVE IN SEATTLE BY

63. the future of mobile will not be the web... MADE WITH LOVE IN SEATTLE BY

64. the future of mobile will not be the web... ...or apps MADE WITH LOVE IN SEATTLE BY

65. Mobile Lesson #4when it comes to mobile assume nothing MADE WITH LOVE IN SEATTLE BY

68. Mobile Lesson #5use the appropriate interaction to the context MADE WITH LOVE IN SEATTLE BY

69. Mobile Lesson #6no gets fired for using a lowest common denominator design MADE WITH LOVE IN SEATTLE BY

72. content result result result result result result MADE WITH LOVE IN SEATTLE BY

73. Mobile Lesson #7 mobile users havesophisticated spacial orientation MADE WITH LOVE IN SEATTLE BY

74. p/z universalbuild a website that provided the bestpossible experience to the context. MADE WITH LOVE IN SEATTLE BY

75. p/z universalbuild a website that provided the bestpossible experience to the context. iPad magazine MADE WITH LOVE IN SEATTLE BY

76. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone magazine web app MADE WITH LOVE IN SEATTLE BY

77. p/z universalbuild a website that provided the bestpossible experience to the context. iPad iPhone Desktop magazine web app website MADE WITH LOVE IN SEATTLE BY

79. Content in Context MADE WITH LOVE IN SEATTLE BY

81. 1x HTML5 Markup MADE WITH LOVE IN SEATTLE BY

82. 1x HTML5 Markup1x Hexadecimal CSS Framework MADE WITH LOVE IN SEATTLE BY

83. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework MADE WITH LOVE IN SEATTLE BY

84. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks MADE WITH LOVE IN SEATTLE BY

85. 1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks8x Media-Query-based Layouts MADE WITH LOVE IN SEATTLE BY

86. a hexadecimal what? MADE WITH LOVE IN SEATTLE BY

87. the hex-gridTypically when using a gridweb designers are typicallyonly using vertical units. MADE WITH LOVE IN SEATTLE BY

88. the hex-gridbut in mobile design, we must usehorizontal units as well. thismeans that any unit size mustwork vertically as well ashorizontally. MADE WITH LOVE IN SEATTLE BY

89. iPad iPhone Desktopmagazine web app website MADE WITH LOVE IN SEATTLE BY

90. iPad iPhone Desktop magazine web app website‣ pagination was a nightmare. MADE WITH LOVE IN SEATTLE BY

91. iPad iPhone Desktop magazine web app website‣ pagination was a nightmare.‣ hadto create an entirely new css framework to deal with all the screen sizes. MADE WITH LOVE IN SEATTLE BY

92. iPad iPhone Desktop magazine web app website‣ pagination was a nightmare.‣ hadto create an entirely new css framework to deal with all the screen sizes.‣ every page had to be designed individually. MADE WITH LOVE IN SEATTLE BY

93. iPad iPhone Desktop magazine web app website‣ pagination was a nightmare.‣ hadto 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. MADE WITH LOVE IN SEATTLE BY

94. iPad iPhone Desktop magazine web app website‣ pagination was a nightmare.‣ hadto 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. MADE WITH LOVE IN SEATTLE BY

95. 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 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. MADE WITH LOVE IN SEATTLE BY

96. 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 individually.‣ content had to be type fitted, similar to print layout workflow.‣ had to disable pinch to zoom. MADE WITH LOVE IN SEATTLE BY

97. 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.‣ content had to be type fitted, similar to print layout workflow.‣ had to disable pinch to zoom. MADE WITH LOVE IN SEATTLE BY

98. 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.‣ had to disable pinch to zoom. MADE WITH LOVE IN SEATTLE BY

99. 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. MADE WITH LOVE IN SEATTLE BY

100. Mobile Lesson #8mobile is really hard work MADE WITH LOVE IN SEATTLE BY

101. Mobile Lesson #9mobile web is oftenharder than native MADE WITH LOVE IN SEATTLE BY

102. mobiledesign.org

103. “ adding manpower to a late software project makes it later. —Fred Brooks

104. Mobile Lesson #10adding more devicesincreases the cost ofmobile development exponentially MADE WITH LOVE IN SEATTLE BY

105. “ They are expensive to create —a simple app could cost you $32,639 and take two months to create.

106. $32,639 for a simple app MADE WITH LOVE IN SEATTLE BY

107. $32,639 for a simple app 2 months to create MADE WITH LOVE IN SEATTLE BY

108. $32,639 for a simple app 2 months to create 2 weeks per feature MADE WITH LOVE IN SEATTLE BY

109. $32,639 for a simple app 2 months to create 2 weeks per feature 4 features MADE WITH LOVE IN SEATTLE BY

110. $32,639 for a simple app 2 months to create 2 weeks per feature 4 features $8,160 per feature MADE WITH LOVE IN SEATTLE BY

111. “ A complex app could have a price tag of more than $163,200 and take six months to develop.

112. $163,200 for a complex app MADE WITH LOVE IN SEATTLE BY

113. $163,200 for a complex app 6 months to create MADE WITH LOVE IN SEATTLE BY

114. $163,200 for a complex app 6 months to create 2 weeks per feature MADE WITH LOVE IN SEATTLE BY

115. $163,200 for a complex app 6 months to create 2 weeks per feature 12 features MADE WITH LOVE IN SEATTLE BY

116. $163,200 for a complex app 6 months to create 2 weeks per feature 12 features $13,600 per feature MADE WITH LOVE IN SEATTLE BY

117. “ This price multiplies if you decide you want to make it available on more than one operating system.

118. Native Mobile Web HybridiPhone 100% 75% 113%iPad 150% 125% 141%Android 175% 150% 225%Honeycomb 200% 150% 225%Blackberry 300% 225% 338% MADE WITH LOVE IN SEATTLE BY

121. task x time(complexity x effort) x rate = price MADE WITH LOVE IN SEATTLE BY

122. features x time( platform x experience ) x rate = price MADE WITH LOVE IN SEATTLE BY

123. Simple App Native Mobile Web HybridiPhone $32,639 $24,479 $36,719iPad $48,959 $30,599 $45,899Android $57,118 $48,959 $73,438Honeycomb $65,278 $48,959 $73,438Blackberry $97,917 $73,438 $110,157Total $301,911 $226,433 $339,650 MADE WITH LOVE IN SEATTLE BY

126. Complex App Native Mobile Web HybridiPhone $163,200 $122,400 $183,600iPad $244,800 $153,000 $229,500Android $285,600 $244,800 $367,200Honeycomb $326,400 $244,800 $367,200Blackberry $489,600 $367,200 $550,800Total $1,509,600 $1,132,200 $1,698,300 MADE WITH LOVE IN SEATTLE BY

130. Mobile Lesson #11regardless of technology, mobile isn’t cheap MADE WITH LOVE IN SEATTLE BY

131. an exercise MADE WITH LOVE IN SEATTLE BY

132. November 22, 1963

133. today, we are goingprove who shot JFKusing the principlesof the mobile web. November 22, 1963

134. what do you believe? MADE WITH LOVE IN SEATTLE BY

135. “ HTML5 has so much momentum it could defeat the native app in as little as two years.

138. Mobile Lesson #12 the client is not yourproblem. it’s your data. MADE WITH LOVE IN SEATTLE BY

139. Mobile Lesson #13a great mobile strategycreates more questionsthan it provide answers MADE WITH LOVE IN SEATTLE BY

140. Mobile Lesson #14there is no such thing as a magic bullets* *see lessons #1 & 2 MADE WITH LOVE IN SEATTLE BY

141. Get in TouchTHANK YOU Find Out How We Can Help You.My name is Brian Fling and Brian FlingI’m a Mobile Designer Founder & Creative Director brian@pinchzoom.com +1 206 351-6060twitter.com/flingbook mobiledesign.orgcompany pinchzoom.comblog pinchzoom.com/fling