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

Mobile is the new Godzilla July 2011 FCIP






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Show example of

Mobile is the new Godzilla July 2011 FCIP Mobile is the new Godzilla July 2011 FCIP Presentation Transcript

  • Mobile is the new Godzilla Fort Collins Internet Professionals July 28, 2011
  • Godzilla is Coming View slide
  • 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 
    View slide
  • 2009 Forecast : PC vs Smart Phone Shipments Source:
  • 2010 Actual PC vs. Smart Phone Shipments
  • Shift in Usage
    • Fallout: 20% drop in usage of PC between 2008 and 2010.
  • 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: (January 2010)
  • We better do something!
    • “ 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
  • Smart Phone growth
    • 96% increase in smart phone sales Q3 2010
      • Smart phone prices are still dropping
      • Mobile is currently a $10B industry
      • Unprecedented
  • 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.
  • 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 )
  • 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 )
  • App usage on mobile devices
    • Over half of Android and iPhone users spend more than 30 minutes per day using apps. (2009
    • 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
    • 18 percent of social networking users log in while their heads are still on the pillow. (Ericsson 2011 PDF
  • % 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 (PDF)
    • Personal
      • Hobbies, religion, etc: 20%
      • TV/movie streaming: 16%
      • Music streaming: 34%
      • Music download: 22%
      • YouTube: 43%
      • Games download: 25%
  • 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.
    • “ 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 (PDF)
  • 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
  • Tablet Stats
    • iPad has 89% of tablet traffic world-wide
    • In the US, iPad has 96% of tablet traffic
    • Source
  • 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
  • More Mobile eCommerce
    • 50% of mobile ecommerce is eBay
    • Largest (known) single purchase via a mobile phone: a $500K airplane.
  • & 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?
  • Creating Mobile Experiences
  • 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!
  • Mwuahahahaha!
  • 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
  • Mobile is entirely new
  • Mobile is entirely new
    • Major Computing Eras
      • 1950s: Mainframe & Mini Computers
      • 1980s: Personal Computing
      • 1990s: Internet & World Wide Web
      • 2010s: Mobile
  • 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.
    • “ 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)
  • 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?
  • Where are we mobile?
    • 84% at home
    • 74% waiting in lines
    • 64% at work
    • “ 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)
  • Your people
    • Who are your people? Who is your audience?
    • What are their needs?
  • 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?
  • 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”
  • The problem with your current site
    • Pinch, zoom, pan = crappy way to navigate
    • User experience = 
  • Fighting the inevitable
    • Temptation = how do I “mobilize” my current website?
  • Fighting the inevitable
    • Temptation = how do I “mobilize” my current website?
  • 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
  • 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
  • Responsive Web Design is
      • “ A flexible grid (with flexible images )
      • that incorporates media queries to
      • create a responsive, adaptive layout.”
      • - Ethan Marcotte
  • 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.”
  • RWD site – iPad - landscape Website created by view it at
  • RWD site – iPad - landscape Website created by view it at
  • RWD site – iPad - landscape Website created by view it at
  • Website created by view it at
  • Website created by view it at
  • RWD site – iPad - landscape Website created by view it at
  • RWD site – iPad – portrait orientation Website created by view it at
  • Responsive Web Design Example
  • Mobile Website
    • Designed specifically to meet the needs of your mobile audience
    • Stand-alone mobile site
      • Can redirect via server-side code or JavaScript
      • for techniques
    • One that utilizes some of your existing website’s content
      • Utilize a WordPress plugin, e.g. WPTouch
      • or mobile theme
        • Mobile theme:
        • Example
        • By Debbie Campbell of Red Kite Creative
  • Website created by Debbie Campbell @ Red Kite Creative
  • Mobile version Website created by Debbie Campbell @ Red Kite Creative
  • 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
  • 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
  • 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
  • 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.
  • 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”
  • 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
  • Devices (We’re in the home stretch)
  • 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
  • Google Analytics
  • Google Analytics
  • Tips for Device Support
    • Start with the devices your audience uses
  • 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
  • Wrapping up
    • The mobile context is unique
    • Know your audience
    • Keep it simple
    • Create Mobile Experiences
  • How’d you get so good so fast? Flickr: Kaptain Kobold
  • 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
  • Resources - web
      • Check out his articles and presentations
    • Responsive Web Design
  • Where to find me
    • Twitter: @ron_z
    • [email_address]
    • Podcast:
      • @EinsteinMonkey
      • My web design/dev/ux podcast with Steve Martin @CleverCubed
    • and @IgniteFC
    • The Fort Collins Hive, shared office space for creatives:
  • Mobile is the new Godzilla Fort Collins Internet Professionals July 28, 2011
    • “ … 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
  • 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
    • “ Supporting and testing for even a small percentage of the devices in the market will bury your resources… ”
      • – Brian Fling
  • 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