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
140
Icons and the Web: Symbols of the Modern Age
timgthomas
0
120
Constructing Modern UIs with SVG
timgthomas
0
140
Browser Invasion: Desktop Apps and the Web
timgthomas
0
110
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
80
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
110
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
95
Ember ATX: Ember.Evented
timgthomas
0
100
Ember ATX: Components
timgthomas
0
77

Other Decks in Design

See All in Design
LayerX DesignersDeck
layerx
PRO
0
920
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
450
実利の世界で、表現者である
kiyou77
3
150
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
170
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.3k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
270
今日から始める グラレコ チャレンジ　DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
300
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
610
Haruki_Konaka_Portforio.pdf
haruki556
0
790
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Visualization
eitanlees
146
15k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Faster Mobile Websites
deanohume
305
30k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Practical Orchestrator
shlominoach
186
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Why Our Code Smells
bkeepers
PRO
335
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Music & Morning Musume
bryan
46
6.2k
GraphQLとの向き合い方2022年版
quramy
44
13k

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