»

Mobile is the new Mobile is the new GodzillaGodzilla

Fort Collins Internet ProfessionalsFort Collins Internet ProfessionalsJuly 28, 2011July 28, 2011

»

»

Godzilla is Coming

» 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

» 2009 Forecast: PC vs Smart Phone Shipments

Source: http://bit.ly/iZzsbV

» 2010 Actual PC vs. Smart Phone Shipments

» Shift in Usage

• Fallout: 20% drop in usage of PC between 2008 and 2010.

Source: http://read.bi/lFHwKR

» 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)

»

»

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 http://bit.ly/krGJvz)

» 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)

» 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)

» % 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%

» The appeal

• 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 http://bit.ly/jKCOlY (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 http://bit.ly/qOVNtg

» Tablet Stats

• iPad has 89% of tablet traffic world-wide• In the US, iPad has 96% of tablet traffic

Source http://bit.ly/p80Ivq

» 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)

» 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!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?

• STRATEGY FIRST!

» To App or not to App: Solutions

1. Responsive Design (RWD): Create one site for both web and mobile that adapts naturally– Most flexible, works on all devices

2. Mobile website (different than your main site) or HTML5 Web Application– Works on all phones with a web browser

3. 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 tocreate 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.”

»

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

RWD site – iPad - landscape

»

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

RWD site – iPad - landscape

»

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

RWD site – iPad - landscape

»

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

»

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

»

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

RWD site – iPad - landscape

» RWD site – iPad – portrait orientation

Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

» Responsive Web Design Example• CodeGeek.net/amscan-rwd

» 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

»

Website created by Debbie Campbell @ Red Kite Creative

»

Website created by Debbie Campbell @ Red Kite Creative

Mobile version

» 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

1. Context

2. User needs, goals, and tasks

3. You’ve figured out how to add value to their lives and mobile experience

4. Device research

5. Budget?

6. 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?

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• LukeW.com:

– Check out his articles and presentations

• Responsive Web Design– http://www.alistapart.com/articles/responsive-web-d

esign/

» Where to find me

• Twitter: @ron_z• ronz@codegeek.net• 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

»

Mobile is the new Mobile is the new GodzillaGodzilla

Fort Collins Internet ProfessionalsFort Collins Internet ProfessionalsJuly 28, 2011July 28, 2011