Successfully reported this slideshow.
Your SlideShare is downloading. ×

Mobile is the new Godzilla July 2011 FCIP


Check these out next

1 of 82 Ad

More Related Content

Slideshows for you (20)

Similar to Mobile is the new Godzilla July 2011 FCIP (20)


Recently uploaded (20)

Mobile is the new Godzilla July 2011 FCIP

  1. 1. Mobile is the new Godzilla Fort Collins Internet Professionals July 28, 2011
  2. 3. Godzilla is Coming
  3. 4. Are you ready? <ul><li>The choice: </li></ul><ul><ul><li>Don’t be surprised and find yourself running from the monster! </li></ul></ul><ul><ul><li>Educate yourself, plan, and implement: ride the monster to victory  </li></ul></ul>
  4. 5. 2009 Forecast : PC vs Smart Phone Shipments Source:
  5. 6. 2010 Actual PC vs. Smart Phone Shipments
  6. 7. Shift in Usage <ul><li>Fallout: 20% drop in usage of PC between 2008 and 2010. </li></ul>Source:
  7. 8. Mobile phones to outnumber PCs by 2013 <ul><li>According to Gartner's PC installed base forecast, by 2013: </li></ul><ul><ul><li>PCs in use will reach 1.78 billion units </li></ul></ul><ul><ul><li>Smartphones and browser-equipped enhanced phones will exceed 1.82 billion units </li></ul></ul><ul><ul><ul><li>and will be greater than the installed base for PCs thereafter. </li></ul></ul></ul><ul><li>By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. </li></ul><ul><li>Source: (January 2010) </li></ul>
  8. 10. We better do something!
  9. 11. <ul><li>“ Mobile Web users are typically prepared to make fewer clicks on a website than users accessing sites from a PC. Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the smaller-screen formats will become a market barrier for their owners — much content and many sites will need to be reformatted/rebuilt. ” </li></ul><ul><ul><li>– Gartner Research, January 2010 </li></ul></ul>
  10. 12. Smart Phone growth <ul><li>96% increase in smart phone sales Q3 2010 </li></ul><ul><ul><li>Smart phone prices are still dropping </li></ul></ul><ul><ul><li>Mobile is currently a $10B industry </li></ul></ul><ul><ul><li>Unprecedented </li></ul></ul>
  11. 13. Terminology <ul><li>Websites & Web Apps are used within a mobile web browser (e.g. mobile Safari, Opera, Android browser) </li></ul><ul><li>“Native Apps” are applications people download from the iTunes App Store or Android Marketplace and are written in a language unique to the platform. </li></ul>
  12. 14. Website usage from mobile devices <ul><li>Visits to websites from mobile devices grew 600% in 2010 </li></ul><ul><li>Access to Twitter via mobile browser experienced a 347% jump to 4.7 million users between January 2009 and January 2010. (March 2010 ) </li></ul>
  13. 15. Mobile content usage <ul><li>May 2011 </li></ul><ul><ul><li>69.5 percent of U.S. mobile subscribers used text messaging on their mobile device </li></ul></ul><ul><ul><li>Browsers used by 39.8% of subscribers (up 1.5 percentage points from previous month ) </li></ul></ul><ul><ul><li>Downloaded applications used by 38.6% (up 2.0 percentage points) </li></ul></ul><ul><ul><li>(May 2011 ) </li></ul></ul>
  14. 16. App usage on mobile devices <ul><li>Over half of Android and iPhone users spend more than 30 minutes per day using apps. (2009 </li></ul><ul><li>35 percent of US Android/iPhone users interact with applications on their smartphones before getting out of bed . The most common activity here is checking Facebook (Ericsson 2011 PDF </li></ul><ul><li>18 percent of social networking users log in while their heads are still on the pillow. (Ericsson 2011 PDF </li></ul>
  15. 17. % of smartphone users who use apps for: <ul><li>Everyday tasks </li></ul><ul><ul><li>$hopping : 38% </li></ul></ul><ul><ul><li>Weather: 58% </li></ul></ul><ul><ul><li>News: 46% </li></ul></ul><ul><ul><li>Maps: 50% </li></ul></ul><ul><li>Social & Interaction </li></ul><ul><ul><li>E-mail: 82% </li></ul></ul><ul><ul><li>Social networking: 65% </li></ul></ul><ul><ul><li>Twitter: 10% </li></ul></ul><ul><li>Android/iPhone smartphone users, USA. </li></ul><ul><li>Ericsson 2011 (PDF) </li></ul><ul><li>Personal </li></ul><ul><ul><li>Hobbies, religion, etc: 20% </li></ul></ul><ul><ul><li>TV/movie streaming: 16% </li></ul></ul><ul><ul><li>Music streaming: 34% </li></ul></ul><ul><ul><li>Music download: 22% </li></ul></ul><ul><ul><li>YouTube: 43% </li></ul></ul><ul><ul><li>Games download: 25% </li></ul></ul>
  16. 18. The app eal <ul><li>Apps are perceived as easy to use because they require: </li></ul><ul><ul><li>easy to download and install (even paid apps) </li></ul></ul><ul><ul><li>little or no navigation through file structures </li></ul></ul><ul><ul><li>no inputting of addresses/URLs </li></ul></ul><ul><ul><li>no web searching (it’s just there on your device) </li></ul></ul><ul><ul><li>no clicking on links </li></ul></ul><ul><li>Apps give users direct access to the content or online service of their choice. </li></ul>
  17. 19. <ul><li>“ The smartphone market is very clearly driven by consumer needs , leading Ericsson ConsumerLab to believe that smartphones will continue to rise in popularity and become true global mass-market devices. ” </li></ul><ul><ul><li>– Ericsson AB, May 2011 (PDF) </li></ul></ul>
  18. 21. Current Smartphone Market Share <ul><li>May 2011 (vs Feb 2011) </li></ul><ul><li>Android: 38.1% (+5.1 points in past 3 months) </li></ul><ul><li>Apple: 26.6% (+1.4) </li></ul><ul><li>RIM: 24.7% (-4.2) </li></ul><ul><li>Source </li></ul>
  19. 22. Tablet Stats <ul><li>iPad has 89% of tablet traffic world-wide </li></ul><ul><li>In the US, iPad has 96% of tablet traffic </li></ul><ul><li>Source </li></ul>
  20. 23. Mobile eCommerce <ul><li>By 2014 </li></ul><ul><ul><li>over 3 billion of the world's adult population will be able to transact electronically via mobile or Internet technology. </li></ul></ul><ul><ul><li>6.5 billion mobile connections </li></ul></ul><ul><ul><li>“Cash transactions will remain dominant in emerging markets by 2014, but the foundation for electronic transactions will be well under way for much of the adult world” </li></ul></ul><ul><ul><li>(Jan 2010 </li></ul></ul>
  21. 24. More Mobile eCommerce <ul><li>50% of mobile ecommerce is eBay </li></ul><ul><li>Largest (known) single purchase via a mobile phone: a $500K airplane. </li></ul>
  22. 25. & NFC <ul><li>NFC = Near Field Communications </li></ul><ul><ul><li>Technology similar to RFID, but 2-way </li></ul></ul><ul><li>First NFC phones are on the market now </li></ul><ul><ul><li>Android Nexus 4S on Sprint </li></ul></ul><ul><ul><li>BlackBerry Bold 9900 and 9930 </li></ul></ul><ul><li>Google Wallet </li></ul><ul><ul><li>Currently supports Citi MasterCard wherever MasterCard PayPass is accepted </li></ul></ul><ul><ul><li>As well as a prepaid Google card </li></ul></ul><ul><ul><ul><li>Can be funded with any credit card </li></ul></ul></ul><ul><li>2012 = year of the mobile wallet? </li></ul>
  23. 26. Creating Mobile Experiences
  24. 27. What do I do? <ul><li>I need an iPhone site </li></ul><ul><li>I need an iPhone app </li></ul><ul><li>I need an Android app </li></ul><ul><li>I need a Windows Phone 7 app </li></ul><ul><ul><li>Only kidding! </li></ul></ul>
  25. 28. Mwuahahahaha!
  26. 29. Why not <ul><li>How do you know what you need? </li></ul><ul><li>Apps aren’t the only answer </li></ul><ul><li>An app may or may not be the right answer for your clients, customers and business </li></ul>
  27. 30. Mobile is entirely new
  28. 31. Mobile is entirely new <ul><li>Major Computing Eras </li></ul><ul><ul><li>1950s: Mainframe & Mini Computers </li></ul></ul><ul><ul><li>1980s: Personal Computing </li></ul></ul><ul><ul><li>1990s: Internet & World Wide Web </li></ul></ul><ul><ul><li>2010s: Mobile </li></ul></ul>
  29. 32. Create a mobile experience <ul><li>Not a mobile site </li></ul><ul><li>Not an app </li></ul><ul><li>The words &quot;Mobile Experience&quot; keeps the focus where it should be. Not on what's hip today. </li></ul>
  30. 34. <ul><li>“ Create a product, don’t re-imagine one for small screens. Great mobile products are created, never ported.” </li></ul><ul><ul><li>– Brian Fling (author of Mobile Web Design & Development) </li></ul></ul>
  31. 35. Start from the beginning <ul><li>Context </li></ul><ul><ul><li>The setting: physical, mental, temporal </li></ul></ul><ul><ul><li>Physical </li></ul></ul><ul><ul><ul><li>Location </li></ul></ul></ul><ul><ul><ul><li>Stationary or in motion? </li></ul></ul></ul><ul><ul><ul><li>Standing, seated, in a car, in a conference room? </li></ul></ul></ul><ul><ul><ul><li>Two-handed or one-handed? </li></ul></ul></ul><ul><ul><li>Mental </li></ul></ul><ul><ul><ul><li>State of mind </li></ul></ul></ul><ul><ul><ul><li>Relaxed or stressed? </li></ul></ul></ul><ul><ul><li>Temporal </li></ul></ul><ul><ul><ul><li>When will users be accessing your content? </li></ul></ul></ul><ul><ul><ul><li>How much time will they have? </li></ul></ul></ul>
  32. 36. Where are we mobile? <ul><li>84% at home </li></ul><ul><li>74% waiting in lines </li></ul><ul><li>64% at work </li></ul>
  33. 37. <ul><li>“ Don’t forget that mobile is a unique medium with its own benefits. Don’t’ try to simply apply the same rationale to your mobile strategy as you would your web or print strategy .” </li></ul><ul><ul><li>– Brian Fling (author of Mobile Web Design & Development) </li></ul></ul>
  34. 38. Your people <ul><li>Who are your people? Who is your audience? </li></ul><ul><li>What are their needs? </li></ul>
  35. 39. Focus on context, goals, and needs <ul><li>Define your constituents’ context </li></ul><ul><li>Uncover their goals </li></ul><ul><li>Understand how their context alters their goals </li></ul><ul><li>Figure out the tasks they want to perform </li></ul><ul><li>What content and functionality will support those tasks and help them accomplish their goals? </li></ul><ul><li>How will a mobile experience add value to their lives? </li></ul>
  36. 40. Strategy tips <ul><li>Keep it simple </li></ul><ul><li>Limit features to only those crucial to your audience </li></ul><ul><li>Never put corporate goals above your users’ needs </li></ul><ul><li>“Try to determine the need that will motivate users to act or interact, and build the experience around that and nothing else” </li></ul>
  37. 41. The problem with your current site <ul><li>Pinch, zoom, pan = crappy way to navigate </li></ul><ul><li>User experience =  </li></ul>
  38. 42. Fighting the inevitable <ul><li>Temptation = how do I “mobilize” my current website? </li></ul>
  39. 43. Fighting the inevitable <ul><li>Temptation = how do I “mobilize” my current website? </li></ul><ul><li>STRATEGY FIRST! </li></ul>
  40. 44. Breaking out of the box <ul><li>Team “mobile device” exercise: </li></ul><ul><ul><li>List at least 10 properties your device has </li></ul></ul><ul><ul><li>List at least 5 tasks you can do with your device </li></ul></ul><ul><ul><li>List at least 1 business problem you can solve with this device </li></ul></ul><ul><ul><li>You have 10 minutes </li></ul></ul>
  41. 45. To App or not to App: Solutions <ul><li>Responsive Design (RWD) : Create one site for both web and mobile that adapts naturally </li></ul><ul><ul><li>Most flexible, works on all devices </li></ul></ul><ul><li>Mobile website (different than your main site) or HTML5 Web Application </li></ul><ul><ul><li>Works on all phones with a web browser </li></ul></ul><ul><li>Native App </li></ul><ul><ul><li>Need a separate one for each specific platform/device </li></ul></ul>
  42. 47. Responsive Web Design is <ul><ul><li>“ A flexible grid (with flexible images ) </li></ul></ul><ul><ul><li>that incorporates media queries to </li></ul></ul><ul><ul><li>create a responsive, adaptive layout.” </li></ul></ul><ul><ul><li>- Ethan Marcotte </li></ul></ul>
  43. 48. Responsive Web Design <ul><li>A flexible grid </li></ul><ul><ul><li>Sizing in proportions </li></ul></ul><ul><ul><ul><li>% rather than px, creates the fluid layout </li></ul></ul></ul><ul><ul><ul><li>images too: flexible images so they are fluid too </li></ul></ul></ul><ul><li>CSS3 Media Queries </li></ul><ul><ul><li>Conditional styling </li></ul></ul><ul><ul><li>Allows you to target specific viewport sizes, device sizes and much more </li></ul></ul><ul><ul><li>Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.” </li></ul></ul>
  44. 49. RWD site – iPad - landscape Website created by view it at
  45. 50. RWD site – iPad - landscape Website created by view it at
  46. 51. RWD site – iPad - landscape Website created by view it at
  47. 52. Website created by view it at
  48. 53. Website created by view it at
  49. 54. RWD site – iPad - landscape Website created by view it at
  50. 55. RWD site – iPad – portrait orientation Website created by view it at
  51. 56. Responsive Web Design Example <ul><li> </li></ul>
  52. 57. Mobile Website <ul><li>Designed specifically to meet the needs of your mobile audience </li></ul><ul><li>Stand-alone mobile site </li></ul><ul><ul><li>Can redirect via server-side code or JavaScript </li></ul></ul><ul><ul><li> for techniques </li></ul></ul><ul><li>One that utilizes some of your existing website’s content </li></ul><ul><ul><li>Utilize a WordPress plugin, e.g. WPTouch </li></ul></ul><ul><ul><li>or mobile theme </li></ul></ul><ul><ul><ul><li>Mobile theme: </li></ul></ul></ul><ul><ul><ul><li>Example </li></ul></ul></ul><ul><ul><ul><li>By Debbie Campbell of Red Kite Creative </li></ul></ul></ul>
  53. 58. Website created by Debbie Campbell @ Red Kite Creative
  54. 59. Mobile version Website created by Debbie Campbell @ Red Kite Creative
  55. 60. Mobile Website <ul><li>Content maintenance? </li></ul><ul><ul><li>If two different sites (web vs. mobile), extra work whenever content in common needs to be changed </li></ul></ul><ul><ul><li>If can do within a CMS then the common content between the two could come from the same source in the database </li></ul></ul>
  56. 61. Mobile Frameworks <ul><li>You might want to prototype with a framework for rapid development. </li></ul><ul><li>JQTouch: targeted for iOS, makes Web apps look like iOS apps (list views, etc.) </li></ul><ul><li>JQuery Mobile: designed for iPhone, Android, WebOS, and more; includes touch and gesture support </li></ul><ul><li>Sencha Touch: designed for iPhone & Android; includes enhanced touch events </li></ul>
  57. 62. Web Apps vs. Native Apps <ul><li>Web app </li></ul><ul><ul><li>Written in HTML and accessed via a web browser </li></ul></ul><ul><ul><li>All smart phones and many feature phones have web browsers </li></ul></ul><ul><li>Native apps </li></ul><ul><ul><li>Target specific device operating systems (iOS, Android, RIM, WebOS, Windows Phone 7, etc.) </li></ul></ul><ul><ul><li>Run natively and locally on the device rather than through a web browser </li></ul></ul>
  58. 63. Native Apps - benefits <ul><li>It’s hot right now, lots of people downloading and buying apps </li></ul><ul><li>Easy to install – Apple users in particular are conditioned to the ease and convenience of the app store. </li></ul><ul><li>Easy to get paid – you could make a lot of money if you are selling your app </li></ul><ul><li>Great experience for users – apps can be very responsive </li></ul><ul><li>Can take advantage of all device sensors </li></ul><ul><ul><li>Location, accelerometers, camera, microphone, etc. </li></ul></ul>
  59. 64. Native Apps - drawbacks <ul><li>Need a separate product for each platform </li></ul><ul><ul><li>Maintainability of code is co$tly </li></ul></ul><ul><ul><li>Takes lots of time and money to create separate apps for each platform </li></ul></ul><ul><ul><li>When new features are released the updates need to be made in multiple code bases </li></ul></ul><ul><ul><li>You can’t support all the smart phone operating systems out there. It’s just not possible. </li></ul></ul><ul><li>Apps may require approval </li></ul><ul><ul><li>Apple App Store – up to 2 week approval timeline </li></ul></ul><ul><ul><li>Including updates for bug fixes – time delay until users get the latest version </li></ul></ul><ul><li>Multiple versions to support “in the wild” </li></ul>
  60. 65. Web Apps <ul><li>Many smart phones are now using Webkit-based browsers: </li></ul><ul><ul><li>iOS, Android, Blackberry 6 </li></ul></ul><ul><ul><li>Notable exceptions: Windows Phone 7, Symbian </li></ul></ul><ul><li>Webkit browsers support </li></ul><ul><ul><li>HTML5 including </li></ul></ul><ul><ul><ul><li>LocalStorage – allows offline use (in the browser!) </li></ul></ul></ul><ul><ul><ul><li>Geolocation </li></ul></ul></ul><ul><li>No approval needed from any app store </li></ul><ul><li>People are always using the latest version </li></ul>
  61. 67. Devices (We’re in the home stretch)
  62. 68. Devices & Your Strategy <ul><li>Which devices does your audience use? </li></ul><ul><ul><li>Stay at home moms? </li></ul></ul><ul><ul><li>Business people? </li></ul></ul><ul><ul><li>Creative types? </li></ul></ul><ul><ul><li>Students? </li></ul></ul><ul><li>Find out </li></ul><ul><ul><li>Check your analytics or server logs </li></ul></ul><ul><ul><li>Go to a mobile store and shop for your audience </li></ul></ul><ul><ul><li>Talk to your audience: ask, watch, record </li></ul></ul>
  63. 69. Google Analytics
  64. 70. Google Analytics
  65. 71. Tips for Device Support <ul><li>Start with the devices your audience uses </li></ul>
  66. 72. Mobile Strategy Checklist <ul><li>Context </li></ul><ul><li>User needs, goals, and tasks </li></ul><ul><li>You’ve figured out how to add value to their lives and mobile experience </li></ul><ul><li>Device research </li></ul><ul><li>Budget? </li></ul><ul><li>Select the approach: </li></ul><ul><ul><li>Responsive Design </li></ul></ul><ul><ul><li>Mobile site/app </li></ul></ul><ul><ul><li>Native App </li></ul></ul>
  67. 73. Wrapping up <ul><li>The mobile context is unique </li></ul><ul><li>Know your audience </li></ul><ul><li>Keep it simple </li></ul><ul><li>Create Mobile Experiences </li></ul>
  68. 74. How’d you get so good so fast? Flickr: Kaptain Kobold
  69. 75. Resources - books <ul><li>Mobile Design and Development </li></ul><ul><ul><li>Brian Fling, 2009, O’Reilly </li></ul></ul><ul><li>Tapworthy: Designing Great iPhone Apps </li></ul><ul><ul><li>Josh Clark, 2010, O’Reilly </li></ul></ul><ul><li>Building iPhone Apps with HTML, CSS, and JavaScript </li></ul><ul><ul><li>Jonathan Stark, 2010, O’Reilly </li></ul></ul><ul><ul><li>Lots on PhoneGap </li></ul></ul>
  70. 76. Resources - web <ul><li> </li></ul><ul><ul><li>Check out his articles and presentations </li></ul></ul><ul><li>Responsive Web Design </li></ul><ul><ul><li> </li></ul></ul>
  71. 77. Where to find me <ul><li>Twitter: @ron_z </li></ul><ul><li>[email_address] </li></ul><ul><li> </li></ul><ul><li>Podcast: </li></ul><ul><ul><li>@EinsteinMonkey </li></ul></ul><ul><ul><li>My web design/dev/ux podcast with Steve Martin @CleverCubed </li></ul></ul><ul><li> </li></ul><ul><li> and @IgniteFC </li></ul><ul><li>The Fort Collins Hive, shared office space for creatives: </li></ul>
  72. 78. Mobile is the new Godzilla Fort Collins Internet Professionals July 28, 2011
  73. 79. <ul><li>“ … millions of people are now walking around with a gizmo in their pocket that not only knows where they are but also plugs into the Internet to share that info, merge it with online databases, and find out what - and who - is in the immediate vicinity… Simply put, LOCATION CHANGES EVERYTHING. This one input - our coordinates - has the potential to change all the outputs. Where we shop, who we talk to, what we read, what we search for, where we go - they all change once we merge location and the Web. ” </li></ul><ul><ul><li>– Mathew Honan, WIRED magazine, 1/19/09 </li></ul></ul>
  74. 80. Going with an App? <ul><li>Take an honest look at the devices you can support </li></ul><ul><li>You cannot support everything </li></ul><ul><ul><li>At least 10 operating systems </li></ul></ul><ul><ul><ul><li>iOS, Android, RIM, WebOS, Windows Phone 7, Symbian, … </li></ul></ul></ul><ul><ul><li>Hundreds of device models </li></ul></ul><ul><ul><ul><li>iOS: iPhone vs. iPad </li></ul></ul></ul><ul><ul><ul><li>Android: phone OS versions fragmented, device capabilities vary, and phone vs. tablet </li></ul></ul></ul><ul><ul><ul><li>RIM: phone vs. tablet </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul>
  75. 81. <ul><li>“ Supporting and testing for even a small percentage of the devices in the market will bury your resources… ” </li></ul><ul><ul><li>– Brian Fling </li></ul></ul>
  76. 82. To App or not to App: Solutions <ul><li>Responsive Design (RWD) : Create one site for both web and mobile that adapts naturally </li></ul><ul><ul><li>Most flexible, works on all devices </li></ul></ul><ul><li>Mobile website (different than your main site) or HTML5 Web Application </li></ul><ul><ul><li>Works on all phones with a web browser </li></ul></ul><ul><li>Native App </li></ul><ul><ul><li>Need a separate one for each specific platform/device </li></ul></ul><ul><li>Hybrid : Web Apps that feel Native </li></ul><ul><ul><li> </li></ul></ul>

Editor's Notes

  • Show example of