Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Go Native(-ish)! (PrairieDevCon 2014)

Af7acd01448753af3dfd648c3f5ea287?s=47 timgthomas
April 07, 2014

Go Native(-ish)! (PrairieDevCon 2014)

We've all heard the arguments of “Web vs. Native vs. Hybrid” mobile apps, but there's simply not enough time to learn it all. What if you're already an experienced Web developer, and you want to reuse as many of your skills as possible, yet still end up with a native-looking app? Fear not, for mobile devices can be a Web developer's best friend. In this presentation, you'll see how easy it is to make your Web app look—and behave—like its native cousins. We'll discuss UX principles, development techniques, interactions and behaviors, and testing and debugging...and help your Web app go native(-ish)!

Af7acd01448753af3dfd648c3f5ea287?s=128

timgthomas

April 07, 2014
Tweet

Transcript

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

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

  3. Tim G. Thomas frog tim@timgthomas.com @timgthomas

  4. #nativeish

  5. Today Web apps

  6. Today Web apps Mobile devices

  7. Your Options Native ! Hybrid ! Web

  8. Your Options Native ! Hybrid Native(-ish) Web

  9. Why to Go Native-ish Build with web tools No approval

    process Rapid deployment
  10. However... Limited discoverability Some missing hardware APIs High standards for

    comparison
  11. Agenda Design Development Debugging

  12. Design

  13. None
  14. Experience Design

  15. Experience Design Navigation Bars !

  16. Experience Design Navigation Bars “Stacks”

  17. Experience Design Navigation Bars “Stacks” Long-Presses

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

  19. Visual Design

  20. Visual Design Skeuomorphism !

  21. Visual Design Skeuomorphism Bold, bright colors

  22. Visual Design Skeuomorphism Bold, bright colors Translucency

  23. Demo Off-the-Shelf Options

  24. Development

  25. Development Pin Apps Simulate Behavior Tweak UI Go Offline

  26. Step 1 Pin Apps

  27. App Pinning Mobile Safari Google Chrome

  28. To-Do: Pin Apps Remove browser frame Prevent resizing and scrolling

    Prevent links from opening a new window
  29. 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>
  30. Remove Browser Frame <head> <meta name="mobile-web-app-capable" content="yes"> </head>

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

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

  33. Demo Step 1: App Pinning

  34. Step 2 Simulate Behavior

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

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

  37. Custom Keyboards Text ! !

  38. Custom Keyboards Text Email !

  39. Custom Keyboards Text Email Date

  40. Custom Keyboards Text Email Date Numeric Range

  41. Additional Inputs File !

  42. Additional Inputs File Location

  43. Additional Inputs File Location

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

    ! // position.coords.longitude; ! });
  45. Additional Inputs: Acceleration bit.ly/prdc-accel

  46. Tweak UI Step 3

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

  48. Home Screen Icons 196x196 ! 152x152

  49. 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">
  50. Device Fonts -apple-system-headline ! -apple-system-subheadline ! -apple-system-body ! ! -apple-system-font

  51. Demo Step 3: Tweak UI

  52. Go Offline Step 4

  53. To-Do: Go Offline Cache infrequently-changing files Store data locally

  54. Application Cache (AppCache)

  55. AppCache CACHE MANIFEST ! LOCAL: /apple-touch-icon.png ! NETWORK: * !

    FALLBACK: /login /offline.html
  56. AppCache <html manifest="app.appcache"> ! <!-- `text/cache-manifest` --> ! </html>

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

  58. Local Storage localStorage['tea'] = '{ "type":"Earl Grey" }'; ! console.log(localStorage['tea']);

    ! //> { "type":"Earl Grey" } ! console.log(JSON.parse(localStorage['tea']); ! //> Object { type: 'Earl Grey' }
  59. The Story So Far

  60. Demo Debugging

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