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

Go Native(-ish)! (PrairieDevCon 2014)

timgthomas
April 07, 2014
Design
0
200

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

timgthomas

April 07, 2014
Tweet

More Decks by timgthomas

See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
timgthomas
0
130
Icons and the Web: Symbols of the Modern Age
timgthomas
0
120
Constructing Modern UIs with SVG
timgthomas
0
130
Browser Invasion: Desktop Apps and the Web
timgthomas
0
110
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
76
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
100
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
91
Ember ATX: Ember.Evented
timgthomas
0
100
Ember ATX: Components
timgthomas
0
75

Other Decks in Design

See All in Design
美しいUIを作るために デザイナーが意識している ちょっとした考え方
yuichi_hara7
51
32k
TUNAG BOOK 2024
stmn
0
330
Credence
lratmansunu
0
460
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
390
ZOZO CDO Office Design
zozodevelopers
PRO
1
450
Dreamia
elsh
0
170
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
Night Shift (beginning sequence)
cpineda57
0
910
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
180
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
300
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
560

Featured

See All Featured
Facilitating Awesome Meetings
lara
50
6.1k
A better future with KSS
kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Gamification - CAS2011
davidbonilla
80
5k
Unsuck your backbone
ammeep
668
57k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Scaling GitHub
holman
458
140k
KATA
mclloyd
29
14k
Six Lessons from altMBA
skipperchong
27
3.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k

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 [email protected] @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