mobile apps: web vs. native - a nerdery agency primer

37

Upload: the-nerdery

Post on 16-Jan-2015

1.264 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mobile Apps: Web vs. Native - A Nerdery Agency Primer
Page 2: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

WEB APPS VS. NATIVE APPSA G E N C Y P R I M E R S E R I E S

Page 3: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

THE NERDERY

We help our partners get big ideas out of their heads and onto their clients’ websites

Website: www.nerdery.comTwitter: @the_nerdery

Page 4: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MIKEUSER EXPERIENCE MANAGER

Page 5: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

TONYFRONT-END DEVELOPER

Page 6: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

THE MOBILE LANDSCAPE

Page 7: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

DEMOGRAPHICS & GROWTH

Image Courtesy of - Dave Rupert http://bit.ly/hvlM6j

Page 8: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

WHO HAS A MOBILE PHONE?

292,000,000 Mobile Phones93% Market Penetration

Source - http://www.ctia.org/media/industry_info/index.cfm/AID/10323

Page 9: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MOBILE OS LANDSCAPESymbian (Nokia)

Android

Apple

RIM (BlackBerry)

Windows Mobile

Other

0 0.1 0.2 0.3 0.4

3%

3%

15%

17%

25%

37%

Market Share Source - http://en.wikipedia.org/wiki/File:Smartphone_share_current.png

Page 10: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MOBILE BANDWIDTH

3G Networks

4G Networks

10.0 MBPS

6.0 MBPS

6.0 MBPS

1.4 MBPS

Average SpeedPeak Speed

Page 11: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

WHAT’S THE DIFFERENCE?

MOBILE WEBSITE NATIVE APP

Page 12: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

NATIVE APPS VS. WEB APPSPROS CONS

WEB APPUNIVERSAL

NO DISTRIBUTION BARRIERSEASY TO UPDATE

STANDARDS BASED DEVELOPMENT

BROWSER INCONSISTENCIESREQUIRES INTERNET CONNECTIONPRESENTATION VARIES BETWEEN

DEVICES

NATIVE APP

ACCESS TO NATIVE HARDWARE FEATURESGREATER POTENTIAL FOR REVENUE

FASTER / MORE USABLELOCAL STORAGE / CACHING

ONE APP PER OPERATING SYSTEMADVANCED DEVELOPMENT SKILLS

MULTIPLE UI CONVENTIONS

Page 13: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

HOW TO CHOOSE

You want to reach the broadest possible audience for the least amount of money

You can deal with a less than spectacular user interface

You don’t need a distribution channel

GO MOBILE WEB IF... GO NATIVE APP IF...You need to utilize specific hardware features

You have a niche audience or large development budget

You need to make money from your application

Page 14: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MOBILE DESIGN BEST PRACTICES

Page 15: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

SIMPLIFY - THEN DO IT AGAIN.

Page 16: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MOBILE DESIGN PRINCIPLESDesign for touch interactions

Utilize common interface conventions

Fitts Law - Worry about “Fat Fingers”

Speed up load time by:

Reducing calls to the server

Reducing the number of images

Page 17: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MOBILE CONSTRAINTS

Attention Span

Lack of :hover interactions

Varying and changing screen sizes & resolutions

Limited or no Flash & Silverlight support

Typographical limitations

Bandwidth

Page 18: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

DESIGNING MOBILE WEBSITES

Page 19: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MOBILE SCREEN SIZES

Page 20: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

LIQUID LAYOUTS

Be flexible - Let content flow naturally

Allows for targeting all screen sizes and resolutions

Future proofs your website for new devices

Page 21: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

DEVICE DETECTION AND VERSION SWITCHING

Detect User Agent in software

Redirect to mobile subdomain

Allow Mobile / Desktop Switching

Most popular subdomains

http://yourwebsite.com ➔ http://m.yourwebsite.com

Page 23: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

DESIGNING NATIVEMOBILE APPS

Page 24: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

KNOW YOURAUDIENCE

Image Courtesy of - http://www.csectioncomics.com/2010/11/iphone-vs-android-vs-blackberry.html

Pick a platform, but consider multiple platforms if budget allows.

Design unique versions for each platform

Page 25: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

PLATFORM COMPARISONSIPHONE ANDROID PHONES

OS IOS - 5 VERSIONS ANDROID PLATFORM - 5 VERSIONS

DEVICES 4 DEVICES 60+ DEVICES

APP DEV LANGUAGE

OBJECTIVE C JAVA

DISTRIBUTION APP STORE ANDROID MARKET

APPS AVAILABLE

300,000 100,000

CARRIER AT&T WHOEVER WANTS TO

Page 26: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

MIMIC NATIVE CONVENTIONS

Page 27: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

TACTILE INTERACTION

Page 28: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

UTILIZING HARDWARE FEATURES

Geo Location Accelerometer Gyroscope Light Sensor

SMS Phone Calls Camera Touch Screen

Gestures Push Notifications Local Database

Page 29: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

USING GESTURES

TapDouble Tap

Tap and Hold

Change Orientation

One FingerScroll

Two FingerScroll

Shake

CircleRotate

Expand Pinch

Page 30: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

PRICING AND DISTRIBUTION

Page 31: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

FREE APPS VS PAID APPS

Image Courtesy of - http://www.distimo.com/

Page 32: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

APPS AVERAGE PRICE

Image Courtesy of - http://www.distimo.com/

Page 33: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

APP DISTRIBUTION

Apple App Store Android Market Blackberry App World

Page 34: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

APPLE APP STORE

Apple App Store

300,000 apps

Requires Apple Developer Account ($99)

Must be approved by Apple

14 day approval time (7 day for updates)

You set your price (Apple gets 30%)

Apple Enterprise Program

Page 35: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

HOW TO AVOID APPLE REJECTION

Apple App Store

The Dreaded HIG

Simulating Failures

Bandwidth Usage over Cellular Networks

Political Lampooning

Accurate app description

OS Compatibility

http://mobileorchard.com/avoiding-iphone-app-rejection-from-apple/

Page 36: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

ANDROID MARKET

Android Market

100,000 apps

$25.00 Developer Account

Instant Submission

No Review Process

Google takes 30%

Allows refunds before 24 hours

Page 37: Mobile Apps: Web vs. Native - A Nerdery Agency Primer

QUESTIONS?More answers online at http://nerdery.com