10 things to consider when taking your business to the mobile market

This talk will walk through ten considerations that you must make when moving your online business to a mobile audience. Based on the experience gained taking an existing web property to the mobile market, we take a guided tour through the challenges encountered and how you can avoid them in your business.

Transcript

1. things to consider when taking your business to the mobile market 11 12 13 14 9 10 10
2. Sam de Freyssinet works at develops tweets @samsoir
6. why do I need to care about mobile? 1
7. what the hell is this “ mobile web ” anyway?
8. “there is no mobile web” - Jeremy Keith
9. <link rel="stylesheet" type="text/css" href="/ media/css/iphone.css" /> <link rel="stylesheet" type="text/css" href="/ media/css/webkit.css" />
10. TV Desktop Windows Mobile Android iPad iPhone
11. So... why should I worry about mobile?
12. 25% 50% 75% 100% May ‘10 October ‘10 May ‘11 October ‘11 April ‘12 Desktop Mobile global web traffic Source: StatCounter, GlobalStats
13. but… are our customers using their mobile phones?
14. 25% 50% 75% 100% May ‘10 October ‘10 May ‘11 October ‘11 April ‘12 Desktop Mobile sittercity web traffic Source: Sittercity 10% 22% 5%
15. 3% 4% 10% 68% iPhone SonyEricsson LT15i Xperia Arc HTC EVO 4G Samsung GALAXY S Other visits by handset Source: Sittercity Data for April 2012
17. start with small changes 2
18. css3 media queries
19. @media screen and (min-width:320px) and (max-width:700px) { div.header { color: rgb(255,255,255); background-color: rgb(0,0,0); font-weight: bold; } }
20. Source: quirksmode.org/mobile media query support
25. build the mobile experience first 3
28. mobile introduces new constraints
29. screen size processor power ARM connection speed
32. “ one eyeball, one thumb ” - Luke Wroblewski Mobile First
33. focus on the core business value
34. more importantly focus on the user value
35. signal to noise
36. signal to noise
37. title content navigation advert widget related
38. title content navigation advert widget related
39. mobile first content first
41. “ too many experiences start the conversation with navigation options ” - Luke Wroblewski Mobile First
42. title content
43. title content navigation
44. title content navigation #
45. twitter espn
46. facebook
47. window.addEventListener("load", function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0); }); removing the address bar
48. user experience 4
53. natural user interfaces
56. https://twitter.com/lorenb/statuses/192298232968249344
57. be sympathetic to the device
58. things clear cultured code realmac software get things done (very differently)
62. “ sometimes the best interface is no interface at all ” - Aral Balkan
64. don’t be evil
65. choosing a platform 5
66. or runs in the web browser native runs independently
67. 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 …is the web you already know & love
68. 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 accelerometer location camera* web sockets local storage runs anywhere
69. <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" /> <link rel="apple-touch-startup-image" href="/startup.png" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app- status-bar-style" content="black" /> Source: http://bit.ly/ ieCyCK pimp my bookmark
70. the native equation
71. app stores in-app purchasing push notifications connection contacts compass system events camera filesystem security
72. here. app your
73. “iOS app success is a ‘lottery’: 60% (or more) of developers don't break even” - Chris Foresman Ars Technica http://bit.ly/K1K0nf
74. the lottery?
75. or hidden value?
76. THE THIRD WAY
77. hybrids Clutch.io
78. runs better in the web browser
79. don’t forget the web
80. money, money, money!!! 6
82. 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10
85. “10.13. Apps that link to external mechanisms for purchases or subscriptions to be used in the app, such as a “buy” button that goes to a web site to purchase a digital book, will be rejected” Source: http://bit.ly/Kv9Y79
86. give restful interaction a rest 7
87. photo name location contact application/json image/jpg
88. “ …on mobile networks, [when] compared to wifi networks, the routing overhead of individual requests is much, much, much larger. Setting up the connection is a significant portion of the api call, so it's better to combine. Pure rest apis with many small resource calls are typically sluggish in a mobile app that runs over a 3G network. ” - Ivo Jansch http://bit.ly/KvXquK
89. photo data name location contact multipart/related application/json image/jpg
90. http is not the only protocol available to mobile devices
91. mobile testing 8
95. releasing 9
96. ✓ making a list checking it twice
97. the app store may reject your app
98. version 1.x 10
100. support creative commons “10 things to consider when taking your business to the mobile market” by Sam de Freyssinet is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at def.reyssi.net. Creative Commons Photo Credits Patrick H. Lauke flickr.com/photos/redux/222439192/ Ricky Thakrar flickr.com/photos/rthakrar/4387303136/ Jelmer de Haas jelmerdehaas.com/
101. f thank you q&a