Go Native(-ish)! (PrairieDevCon 2014)

Go Native(-ish)! ! Tim G. Thomas

Go Native(-ish)! PrairieDevCon 2014 Photo Source: Wikipedia User Magnus Manske

Tim G. Thomas frog [email protected] @timgthomas

#nativeish

Today Web apps

Today Web apps Mobile devices

Your Options Native ! Hybrid ! Web

Your Options Native ! Hybrid Native(-ish) Web

Why to Go Native-ish Build with web tools No approval
process Rapid deployment

However... Limited discoverability Some missing hardware APIs High standards for
comparison

Agenda Design Development Debugging

Design

Experience Design

Experience Design Navigation Bars !

Experience Design Navigation Bars “Stacks”

Experience Design Navigation Bars “Stacks” Long-Presses

Experience Design bit.ly/prdc-apple bit.ly/prdc-android

Visual Design

Visual Design Skeuomorphism !

Visual Design Skeuomorphism Bold, bright colors

Visual Design Skeuomorphism Bold, bright colors Translucency

Demo Off-the-Shelf Options

Development

Development Pin Apps Simulate Behavior Tweak UI Go Ofﬂine

Step 1 Pin Apps

App Pinning Mobile Safari Google Chrome

To-Do: Pin Apps Remove browser frame Prevent resizing and scrolling
Prevent links from opening a new window

Remove Browser Frame <head> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>

Remove Browser Frame <head> <meta name="mobile-web-app-capable" content="yes"> </head>

Prevent Resizing <head> <meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no ">
</head>

Prevent Scrolling <script> $(document).on('touchmove', function() { return false; }); </script>

Demo Step 1: App Pinning

Step 2 Simulate Behavior

To-Do: Simulate Behavior Use custom keyboards Support additional user inputs

Custom Keyboards <input type="[keyboard]">

Custom Keyboards Text ! !

Custom Keyboards Text Email !

Custom Keyboards Text Email Date

Custom Keyboards Text Email Date Numeric Range

Additional Inputs File !

Additional Inputs File Location

Additional Inputs: Location navigator .geolocation .getCurrentPosition(function(position) { ! // position.coords.latitude;
! // position.coords.longitude; ! });

Additional Inputs: Acceleration bit.ly/prdc-accel

Tweak UI Step 3

To-Do: Tweak UI Add home screen icon Use device fonts

Home Screen Icons 196x196 ! 152x152

Home Screen Icons ! <link rel="apple-touch-icon" href="icon.png"> ! <link rel="icon"
href="icon.png"> ! <link rel="apple-touch-icon" sizes="152x152" href="icon.png">

Device Fonts -apple-system-headline ! -apple-system-subheadline ! -apple-system-body ! ! -apple-system-font

Demo Step 3: Tweak UI

Go Ofﬂine Step 4

To-Do: Go Ofﬂine Cache infrequently-changing ﬁles Store data locally

Application Cache (AppCache)

AppCache CACHE MANIFEST ! LOCAL: /apple-touch-icon.png ! NETWORK: * !
FALLBACK: /login /offline.html

AppCache <html manifest="app.appcache"> !  ! </html>

AppCache http://bit.ly/prdc-appcache

Local Storage localStorage['tea'] = '{ "type":"Earl Grey" }'; ! console.log(localStorage['tea']);
! //> { "type":"Earl Grey" } ! console.log(JSON.parse(localStorage['tea']); ! //> Object { type: 'Earl Grey' }

The Story So Far

Demo Debugging

Thanks! @timgthomas tiny.cc/prdc14 Photo source: Wikipedia user Hequals2henry

Go Native(-ish)! (PrairieDevCon 2014)

Go Native(-ish)! (PrairieDevCon 2014)

More Decks by timgthomas

Other Decks in Design

Featured

Transcript