Mobile is the new Godzilla July 2011 FCIP

  • 1,298 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,298
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Show example of Amscan.org

Transcript

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