Your SlideShare is downloading. ×
Mobile is the new Godzilla July 2011 FCIP
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mobile is the new Godzilla July 2011 FCIP

1,325
views

Published on

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,325
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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